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