# ym-flip-clock

**Repository Path**: ymaai/ym-flip-clock

## Basic Information

- **Project Name**: ym-flip-clock
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-22
- **Last Updated**: 2025-12-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ym-flip-clock

一个精美的翻页时钟组件，支持 12/24 小时制，具有流畅的翻页动画效果和可自定义的主题样式。

## 特性

- ✨ 流畅的 3D 翻页动画效果
- 🎨 支持自定义主题颜色和尺寸
- ⏰ 支持 12/24 小时制切换
- 📱 适配 uni-app 多端（H5、小程序、App）
- 🎯 基于 Vue3 + TypeScript + Less 开发
- 🔧 智能尺寸计算，支持响应式布局

## 安装

将 `uni_modules/ym-flip-clock` 目录复制到你的 uni-app 项目的 `uni_modules` 目录下即可。

## 使用方法

### 基础用法

```vue
<template>
	<view class="container">
		<ym-flip-clock></ym-flip-clock>
	</view>
</template>

<script setup lang="ts">
// 无需导入，配置 easycom 后可直接使用
</script>

<style lang="less" scoped>
.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000;
}
</style>
```

### 12 小时制

```vue
<template>
	<ym-flip-clock hour-format="12"></ym-flip-clock>
</template>
```

### 自定义尺寸

```vue
<template>
	<ym-flip-clock :size="sizeConfig"></ym-flip-clock>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const sizeConfig = ref({
	width: 60,        // 数字卡片宽度（px 或字符串，如 '60px'）
	height: 120,      // 数字卡片高度（可选，会根据宽度自动计算）
	fontSize: 100,    // 字体大小（可选，会根据高度自动计算）
	lineHeight: 120,  // 行高（可选，默认等于高度）
	radius: 8         // 圆角（px 或字符串）
})
</script>
```

### 自定义主题

```vue
<template>
	<ym-flip-clock :theme="themeConfig"></ym-flip-clock>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const themeConfig = ref({
	backgroundColor: '#2c3e50',  // 数字卡片背景色
	textColor: '#ecf0f1',         // 数字文字颜色
	colonColor: '#3498db'         // 冒号分隔符颜色
})
</script>
```

### 完整配置示例

```vue
<template>
	<view class="container">
		<ym-flip-clock 
			hour-format="24"
			:size="sizeConfig"
			:theme="themeConfig"
		></ym-flip-clock>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const sizeConfig = ref({
	width: 90,
	radius: 10
})

const themeConfig = ref({
	backgroundColor: '#e38538',
	textColor: '#fedec2',
	colonColor: '#fedec2'
})
</script>
```

## 配置 easycom（推荐）

在 `pages.json` 中配置 easycom，配置后可以直接使用组件，无需手动导入：

```json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			"^ym-flip-clock$": "@/uni_modules/ym-flip-clock/components/ym-flip-clock/ym-flip-clock.vue"
		}
	}
}
```

## Props

| 参数名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| hourFormat | `'12' \| '24'` | `'24'` | 小时制格式，12 小时制或 24 小时制 |
| size | `SizeConfig` | `{}` | 尺寸配置对象，详见下方 SizeConfig |
| theme | `ThemeConfig` | `{}` | 主题配置对象，详见下方 ThemeConfig |

### SizeConfig

| 参数名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| width | `number \| string` | `'90px'` | 数字卡片宽度 |
| height | `number \| string` | `'170px'` | 数字卡片高度（可选，会根据宽度自动计算） |
| fontSize | `number \| string` | `'150px'` | 字体大小（可选，会根据高度自动计算） |
| lineHeight | `number \| string` | `'170px'` | 行高（可选，默认等于高度） |
| radius | `number \| string` | `'10px'` | 圆角大小 |

**尺寸计算规则：**
- 如果只提供 `width`，会自动根据宽度计算高度（比例约为 1.417:1）
- 如果提供了 `height`，会自动根据高度计算行高（行高等于高度）
- 如果提供了 `lineHeight`，会自动根据行高计算字体大小（约为行高的 94%）

### ThemeConfig

| 参数名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| backgroundColor | `string` | `'#e38538'` | 数字卡片背景色（支持十六进制颜色） |
| textColor | `string` | `'#fedec2'` | 数字文字颜色 |
| colonColor | `string` | `'#fedec2'` | 冒号分隔符颜色 |

## 默认值

### 默认尺寸
- 宽度：`90px`
- 高度：`170px`
- 字体大小：`150px`
- 行高：`170px`
- 圆角：`10px`

### 默认主题
- 背景色：`#e38538`（橙棕色）
- 文字颜色：`#fedec2`（米白色）
- 冒号颜色：`#fedec2`（米白色）

## 组件结构

```
uni_modules/ym-flip-clock/
├── components/
│   ├── types/
│   │   └── clock.ts          # TypeScript 类型定义
│   ├── utils/
│   │   ├── colorUtils.ts     # 颜色和尺寸工具函数
│   │   └── timeUtils.ts      # 时间处理工具函数
│   └── ym-flip-clock/
│       ├── ym-flip-clock.vue # 主组件
│       └── ym-flip-item.vue  # 数字翻页子组件
├── package.json              # 组件配置
├── readme.md                 # 使用文档
└── changelog.md              # 更新日志
```