vue 的时钟组件
# install
npm install -S vue-clock-lonlyape-v3
# main.js
......
import Clock from 'vue-clock-lonlyape-v3'
app.use(Clock)
......
or
# xxx.vue
......
import {clock} from 'vue-clock-lonlyape-v3'
......
components:{
myClock:vueClock
}
......| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| width | String |
auto | canvas 画布的宽度，默认为画布容器的宽度 |
| height | String |
auto | canvas 画布的高度，默认与画布的宽度一致 |
| timezone | Number |
本地时区 | 时区，如时区为 UTC+8，则 timezone=8 |
| adaptive | Boolean |
true | 自适应，如果容器小于时钟的设定大小，时钟根据容器的大小自行调整 |
| time | Object |
时间的配置，具体各个属性意义参考以下 | |
| border | Object |
边界的配置，具体各个属性意义参考以下 | |
| background | Object |
背景的配置，具体各个属性意义参考以下 | |
| dial | Object |
刻度的配置，具体各个属性意义参考以下 | |
| number | Object |
数字的配置，具体各个属性意义参考以下 | |
| needle | Object |
针的配置，具体各个属性意义参考以下 |
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| isStatic | Boolean |
false | 是否为静止时间 |
| timestamp | Number |
0 | 时钟的时间，只有 isStatic 为 true 时才起作用 |
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | String |
circle | 边界类型（圆、四边形）;circle(圆形) 、 rectangle(四边形) |
| width | Number |
300 | 时钟的宽度或直径，如果 type==circle ，则为时钟的直径 |
| height | Number |
300 | 时钟的高度，只有 type==rectangle 明有效 |
| lineWidth | Number |
2 | 边界线的宽度（粗细） |
| color | String |
#bbb | 边界线的颜色 |
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | String |
空 | 背景颜色 |
| image | String |
空 | 背景图片 |
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| isDial | Boolean |
true | 是否需要刻度 |
| distance | Number |
0 | 刻度与边界的距离 |
| maxLength | Number |
8 | 长刻度的长度 |
| minLength | Number |
5 | 短刻度的长度 |
| maxWidth | Number |
3 | 长刻度的宽度（粗细） |
| minWidth | Number |
2 | 短刻度的宽度（粗细） |
| color | String |
#888 | 刻度的颜色 |
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| isNumber | Boolean |
true | 是否需要数字 |
| type | String |
arabic | 数字类型，罗马：roman；阿拉伯：arabic |
| color | String |
#777 | 数字的颜色 |
| fontSize | String |
19px | 字体的大小 |
| fontWeight | String |
normal | 字体的粗细 （与css中font-weight一致） |
| fontFamily | String |
微软雅黑 | 字体 |
| radius | Number |
125 | 数字圆的半径 |
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| second | Object |
秒针 | |
| minute | Object |
分针 | |
| hour | Object |
时针 |
在 needle 中，secone、minute、hour 分别为一个对象，每个对象中的属性名和代表的意义是一样的
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| length | Number |
second : 100 minute : 110 hour : 70 |
针的长度 |
| lineWidth | String |
second : 3 minute : 4 hour : 4 |
针的宽度（粗细） |
| longOut | Number |
second : 5 minute : 5 hour : 5 |
超出圆心的长度 |
| color | String |
second : #aaa minute : #999 hour : #888 |
针的颜色 |
| 事件名 | 说明 | 参数 |
|---|---|---|
| timeChange | 一秒触发一次，当 time.isStatic 为 true 时，只触发一次 | 当前时间的 date 对象 |
