Vue-clock-lonlyape NPM

vue-clock-lonlyape

vue 的时钟组件

use

# install
npm install -S vue-clock-lonlyape

# main.js
......
import vueClock from 'vue-clock-lonlyape'
Vue use(vueClock)
......

or
# xxx.vue
......
import {vueClock} from 'vue-clock-lonlyape'
......
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	针的颜色