vue-clock-lonlyape-v3

a clock component for vue3


Keywords
vue-clock-v3, vue-clock-lonlyape, vue-clock, vueClock, clock, vue
License
MIT
Install
npm install vue-clock-lonlyape-v3@1.0.0

Documentation

vue-clock-lonlyape

vue 的时钟组件

use

# 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 针的配置,具体各个属性意义参考以下

time (时间)

属性 类型 默认值 说明
isStatic Boolean false 是否为静止时间
timestamp Number 0 时钟的时间,只有 isStatic 为 true 时才起作用

border (边界)

属性 类型 默认值 说明
type String circle 边界类型(圆、四边形);circle(圆形) 、 rectangle(四边形)
width Number 300 时钟的宽度或直径,如果 type==circle ,则为时钟的直径
height Number 300 时钟的高度,只有 type==rectangle 明有效
lineWidth Number 2 边界线的宽度(粗细)
color String #bbb 边界线的颜色

background (背景)

属性 类型 默认值 说明
color String 背景颜色
image String 背景图片

dial (刻度)

属性 类型 默认值 说明
isDial Boolean true 是否需要刻度
distance Number 0 刻度与边界的距离
maxLength Number 8 长刻度的长度
minLength Number 5 短刻度的长度
maxWidth Number 3 长刻度的宽度(粗细)
minWidth Number 2 短刻度的宽度(粗细)
color String #888 刻度的颜色

number (数字)

属性 类型 默认值 说明
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 数字圆的半径

needle (针)

属性 类型 默认值 说明
second Object 秒针
minute Object 分针
hour Object 时针

在 needle 中,secone、minute、hour 分别为一个对象,每个对象中的属性名和代表的意义是一样的

needle.second/needle.minute/needle.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 对象