https://github.com/limintao/vue-turn-clock

Vue 翻滚时钟插件！
https://github.com/limintao/vue-turn-clock

clock countdown flip flip-clock time ts typescript vite vue vue3

Last synced: 10 days ago
JSON representation

Vue 翻滚时钟插件！

• Host: GitHub
• URL: https://github.com/limintao/vue-turn-clock
• Owner: limintao
• License: mit
• Created: 2023-06-08T12:43:07.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-03-18T08:28:13.000Z (8 months ago)
• Last Synced: 2024-09-19T03:48:40.975Z (about 2 months ago)
• Topics: clock, countdown, flip, flip-clock, time, ts, typescript, vite, vue, vue3
• Language: TypeScript
• Homepage:
• Size: 171 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-turn-clock  [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/limintao/vue-turn-clock/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/vue-turn-clock.svg?style=flat)](https://www.npmjs.com/package/vue-turn-clock) [![npm](https://img.shields.io/npm/dt/vue-turn-clock.svg)](https://www.npmjs.com/package/vue-turn-clock)

这是一个简单的翻页倒计时组件，也可以是展示当前时间！

- 💪 支持 Vue 3 组合式 API

- 🔥 使用 TypeScript 编写

### 安装

With NPM:

```

npm install vue-turn-clock

```

With Yarn:

```

yarn add vue-turn-clock

```

With PNPM:

```

pnpm add vue-turn-clock

```

### 使用

```vue

import TurnClock from 'vue-turn-clock';

```

### 参数配置

| 名称        | 类型 | 默认 | 说明 |

|-----------| -- | -- |------------------------------------------------------------------------------------|

| startTime | Date/Number/String | Date.now() | 需要设置当前的初始化系统时间，可以是Date对象，也可以是时间戳，亦可是一个可被转换的时间字符串，主要用来防止用户修改电脑时间，设置初始化服务器时间 |

| endTime   | Date/Number/String | -- | 需要倒计时的时间，可以是Date对象，也可以是时间戳，亦可是一个可被转换的时间字符串 |

| formatter | String | YYYY-MM-DD HH:mm:ss | 当仅显示日期格式时，可限制显示的日期格式，可选的字符格式：['YYYY', 'MM', 'DD', 'HH', 'mm', 'ss']，必须是这些其中的，区分大小写 |

| units     | String[] | [':', ':', ':', ''] | 要给每个时间层级后面添加的字符 |

| theme     | combine/separate/text | combine | 要展示的样式，`combine` :每个层级的数字合并显示，`separate` :每个层级的数字单独显示，`text` :当做纯文本格式显示 |

| color     | String | -- | 数字的颜色 |

| bgColor   | String | -- | 卡片的背景色和分隔符的颜色，一般分隔符和卡片背景是一个颜色，如需设置不同颜色请自行用样式覆盖 |

### 事件

| 事件名 | 说明 | 类型 |

| -- | -- | -- |

| over | 倒计时时间走完时触发 | Function |

### 示例

| 代码 | 效果 |

| -- | -- |

| `````` | ![screenshot1](./example/01.gif) |

| `````` | ![screenshot2](./example/02.gif) |

| `````` | ![screenshot3](./example/03.gif) |

| `````` | ![screenshot4](./example/04.gif) |

| `````` | ![screenshot5](./example/05.gif) |

| `````` | ![screenshot6](./example/06.gif) |

| `````` | ![screenshot7](./example/07.gif) |

* 有什么问题欢迎随时提Issues！😊