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 对象 |