# vue-tut-clock > [![npm](https://img.shields.io/npm/v/vue-tut-clock.svg)](https://www.npmjs.com/package/vue-tut-clock) [![npm](https://img.shields.io/npm/dt/vue-tut-clock.svg)](https://www.npmjs.com/package/vue-tut-clock) ![Version](https://img.shields.io/github/package-j Latest version **0.1.22** (published 2023-09-30) · MIT license · 0 weekly downloads ## Install ```sh npm install vue-tut-clock pnpm add vue-tut-clock yarn add vue-tut-clock bun add vue-tut-clock ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.22 | | Published | 2023-09-30 | | First published | 2023-09-28 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 3 | | Unpacked size | 1 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Author | _tut | | Maintainers | _tut | | Keywords | vue-tut-clock, flip, clock, 翻页时钟, 时钟, 时间, time, vue2, vue-clock | ## Links - npm: https://www.npmjs.com/package/vue-tut-clock - npm.io page: https://npm.io/package/vue-tut-clock ## Dependencies (3) - [vue](https://npm.io/package/vue.md) ^2.6.14 - [core-js](https://npm.io/package/core-js.md) ^3.8.3 - [highlight.js](https://npm.io/package/highlight.js.md) ^11.8.0 ## Alternatives - [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads - [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads - [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads - [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads - [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads ## Recent versions - 0.1.22 (latest) — 2023-09-30 - 0.1.21 — 2023-09-29 - 0.1.20 — 2023-09-29 - 0.1.19 — 2023-09-28 - 0.1.18 — 2023-09-28 - 0.1.17 — 2023-09-28 - 0.1.16 — 2023-09-28 - 0.1.15 — 2023-09-28 - 0.1.14 — 2023-09-28 - 0.1.13 — 2023-09-28 ## README # :timer_clock: vue-tut-clock [![npm](https://img.shields.io/npm/v/vue-tut-clock.svg)](https://www.npmjs.com/package/vue-tut-clock) [![npm](https://img.shields.io/npm/dt/vue-tut-clock.svg)](https://www.npmjs.com/package/vue-tut-clock) ![Version](https://img.shields.io/github/package-json/version/TuGitee/vue-tut-clock) ![stars](https://img.shields.io/github/stars/TuGitee/vue-tut-clock) ![forks](https://img.shields.io/github/forks/TuGitee/vue-tut-clock) ![last commit](https://img.shields.io/github/last-commit/TuGitee/vue-tut-clock) ![views](https://komarev.com/ghpvc/?username=TuGitee&label=Views&color=0e75b6&style=flat) ![language](https://img.shields.io/github/languages/top/TuGitee/vue-tut-clock) ![license](https://img.shields.io/github/license/TuGitee/vue-tut-clock) :clock1: 这是一个翻页时钟，用于展示当前时间！适用于Vue 2 项目！ ## 安装 ### npm安装 推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。 ```shell $ npm install vue-tut-clock or $ npm i vue-tut-clock ``` ### CDN 目前可以通过 [unpkg.com/vue-tut-clock](https://unpkg.com/vue-tut-clock/) 获取到最新版本的资源，在页面上引入 js 文件即可开始使用。 ```html ``` > 建议使用 CDN 引入vue-tut-clock的用户在链接地址上锁定版本，以免将来 vue-tut-clock 升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com/)。 #### Hello vue-tut-clock ```html vue-tut-clock
``` ## 完整引入 ```js // main.js import Vue from 'vue' import VueTutClock from 'vue-tut-clock'; Vue.use(VueTutClock) ``` ## 使用 ### 基本用法 ```vue ``` ### 配置参数 | 名称 | 类型 | 默认 | 说明 | | --------- | -------------- | ------------ | ------------------------------------------------------------ | | formatter | String | hh:ii::ss | 格式化显示时间格式，可选的字符格式：['YYYY', 'MM', 'DD', 'hh', 'ii', 'ss']，分别对应年、月、日、时、分、秒，不区分大小写，除此外文本可自定义，例如：YYYY年MM月DD日（:warning:倒计时模式下，只可选用日时分秒） | | size | Number\|String | fit | 翻转时钟大小，可选值为large（大号），middle（中号），small（小号），fit（适应容器大小），screen（适应屏幕大小），任意数值（单位：px） | | center | Boolean | false | 使用absolute定位居中，推荐页面中只有此组件为主题内容时配置 | | offsetX | Number | 0 | X轴偏移量，单位px | | offsetY | Number | 0 | Y轴偏移量，单位px | | theme | String | auto | 翻页时钟主题，可选值为dark，light，auto以及任意其他rgba形式或单词形式的颜色，auto模式为适应当前浏览器深色或浅色模式，使用auto模式颜色会根据html根结点自定义属性[data-theme="dark"]或[data-theme="light"]进行自动切换 | | GMT | Number | 当前所在时区 | 取值范围在-12至12之间 | | warp | Boolean | true | 横向宽度不足以容纳时钟组件时换行展示 | | deadline | String\|Date | —— | 开启倒计时模式（开启此模式最好重新配置formatter），并指定截止时间 | | prevent | Boolean | false | 倒计时模式下是否展示时间到时的默认动画，动画持续时间为2s（不可调整） | | event | String | 重要事件 | 倒计时事件名称 | #### 事件 | 事件名 | 参数 | 返回值 | 说明 | | --------------- | ---- | ------ | ------------------------------ | | handlerDeadline | void | void | 当Deadline到达时，执行回调函数 | #### 示例 ```vue ``` ### 插槽 | 插槽名 | 说明 | | ------ | ------------ | | header | 时钟顶部内容 | | footer | 时钟底部内容 | #### 示例 ```vue ``` #### 综合使用 ```vue // 展示韩国时钟 ``` ### 圆形时钟 vue-tut-clock同时支持圆形时钟。 #### 基本用法 ```vue ``` #### 配置参数 | 名称 | 类型 | 默认 | 说明 | | ------- | -------------- | ------------ | ------------------------------------------------------------ | | GMT | Number | 当前所在时区 | 取值范围在-12至12之间 | | size | Number\|String | fit | 圆形时钟大小，可选值为large（大号），middle（中号），small（小号），fit（适应容器大小），screen（适应屏幕大小），任意数值（单位px） | | center | Boolean | false | 使用absolute定位居中，推荐页面中只有此组件为主题内容时配置 | | offsetX | Number | 0 | X轴偏移量，单位px | | offsetY | Number | 0 | Y轴偏移量，单位px | | theme | String | auto | 圆形时钟主题，可选值为dark，light，auto以及任意其他rgba形式或单词形式的颜色，auto模式为适应当前浏览器深色或浅色模式，使用auto模式颜色会根据html根结点自定义属性[data-theme="dark"]或[data-theme="light"]进行自动切换 | | step | Boolean | false | 指针运动方式：步进或连续 | ##### 示例 ```vue ``` #### 插槽 | 插槽名 | 说明 | | ------ | ------------ | | header | 时钟顶部内容 | | footer | 时钟底部内容 | ##### 示例 ```vue ``` ### 数字时钟 vue-tut-clock还支持另类的数字时钟。 #### 基本用法 ```vue ``` #### 配置参数 | 名称 | 类型 | 默认 | 说明 | | ------- | -------------- | ------------ | ------------------------------------------------------------ | | GMT | Number | 当前所在时区 | 取值范围在-12至12之间 | | size | Number\|String | fit | 数字时钟大小，可选值为large（大号），middle（中号），small（小号），fit（适应容器大小），screen（适应屏幕大小），任意数值（单位px），百分比，:warning:该属性最小值为240px | | center | Boolean | false | 使用absolute定位居中，推荐页面中只有此组件为主题内容时配置 | | offsetX | Number | 0 | X轴偏移量，单位px | | offsetY | Number | 0 | Y轴偏移量，单位px | | theme | String | auto | 数字时钟主题，可选值为dark，light，auto以及任意其他rgba形式或单词形式的颜色，auto模式为适应当前浏览器深色或浅色模式，使用auto模式颜色会根据html根结点自定义属性[data-theme="dark"]或[data-theme="light"]进行自动切换 | | dot | Boolean | false | 将背景数字改为圆点 | ##### 示例 ```vue ``` #### 插槽 | 插槽名 | 说明 | | ------ | ------------ | | header | 时钟顶部内容 | | footer | 时钟底部内容 | ##### 示例 ```vue ``` ### 时钟组 时钟组的作用主要为换行显示。例如：你想要在页面中使用`flip-clock`组件同时开启center，多个`flip-clock`将重叠在一起（由于absolute定位），此时可以使用时钟组，将整个时钟组居中即可。 ```vue ``` #### 配置参数 | 名称 | 类型 | 默认 | 说明 | | ---------- | ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | config | Object\|Array | {center: false, gap: 10, clocks: [{ formatter: 'YYYY-MM-DD'},{formatter: 'hh:ii:ss'}]} | 传递对象时可传递center，gap，clocks参数，传递数组时，即只传递clocks对象数组即可，center和gap采用默认值，默认分行显示年月日和时分秒，配置项信息见下 | | center | Boolean | false | 使用absolute定位居中，推荐页面中只有此组件为主题内容时配置 | | gap | Number | 10 | 时钟组间距，单位px | | swiper | Boolean | false | 配置时钟组是否开启轮播模式 | | pagination | Boolean | false | 轮播模式下是否显示下方分页小圆点 | | vertical | Boolean | false | 时钟组轮播方式是否垂直 | | autoplay | Boolean | false | 轮播模式下是否开启自动轮播 | | duration | Number | 5000 | 自动轮播时间（单位：毫秒ms） | | clocks | Array | [{ formatter: 'YYYY-MM-DD'},{formatter: 'hh:ii:ss'}] | 配置时钟对象，可指定每个时钟类型type，默认为flip，可选值为flip，circle或digit；每个时钟的配置参数与对应Clock配置参数相似，但不可配置center属性，默认值与之相同 | #### 示例 ```vue ``` ##### 插槽 | 插槽名 | 说明 | | ------------ | ------------------------------------------------------- | | header | 时钟组顶部内容 | | footer | 时钟组底部内容 | | header:index | 第[index]个时钟顶部内容，index的取值范围为[0, 时钟数量) | | footer:index | 第[index]个时钟底部内容，index的取值范围为[0, 时钟数量) | ##### 示例 ```vue ``` ### 格式化时间 #### 全局方法 vue-tut-clock 为 Vue.prototype 添加了全局方法 `$time`。因此在 Vue Instance 中可以直接采用此方法格式化时间。 ##### 参数说明 | 参数 | 类型 | 默认 | 说明 | | --------- | ------------ | ------------------- | ------------------------------------------------------------ | | time | String\|Date | 当前时间 | 格式化的时间 | | formatter | String | YYYY-MM-DD hh:ii:ss | 格式化显示时间格式，可选的字符格式：['YYYY', 'MM', 'DD', 'hh', 'ii', 'ss']，分别对应年、月、日、时、分、秒，不区分大小写，除此外文本可自定义，例如：YYYY年MM月DD日 | | 返回值 | String | —— | 返回结果为按照格式化输出的结果 | ##### 示例 ```vue ``` #### 自定义指令 为便于使用，vue-tut-clock 注册了自定义指令 `v-time`。因此可以直接使用此指令达到格式化时间的效果。 > :warning:v-time渲染时，dom元素中不能有任何子节点，用法与 `v-text` 以及 `v-html` 相似。 > > 此指令设计存在缺陷，无法单独配置formatter，推荐使用全局方法`$time`代替此方法。 可以在引入时配置全局格式化，格式与formatter相同。 ##### 引入示例 ```js import Vue from 'vue' import TutClipClock from 'tut-clip-clock' Vue.use(TutClipClock,'YYYY年MM月') ``` ##### 使用示例 ```vue ``` ### 切换主题 #### 全局方法 vue-tut-clock 为 Vue.prototype 添加了全局方法 `$switchTheme`,可以直接采用此方法切换主题，使用`theme="auto"`的组件将会跟随主题颜色变化。 | 方法名 | 参数 | 返回值 | 说明 | | ------------ | ---- | -------- | ------------------------------------------- | | $switchTheme | void | 当前主题 | 切换主题方法，返回值有且仅有dark和light两种 | #### 示例 ```vue ``` #### 一键换肤 使用此方法提供的切换主题只需在其余样式中添加相关css即可完成换肤适配。 ```vue // component.vue ``` 若在根节点设置不同主题，只需修改如下代码： ```vue // App.vue ``` ## 体验网址 [vue-tut-clock 时钟](https://tugitee.github.io/vue-tut-clock) ## 关于 ### 开源协议 Copyright © 2023 [vue-tut-clock](https://github.com/TuGitee/vue-tut-clock/blob/main/LICENSE) (MIT) > 如存在任何问题，请提交pr或联系作者[_tut](mailto:1137725646@qq.com)。 --- _Source: https://npm.io/package/vue-tut-clock · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._