vue-analog-clock v1.0.2

效果图

说明：这是基于vue开发的一个模拟时钟组件。

1.安装&使用

• 安装

npm install -D vue-analog-clock

• 使用

//方法1
import AnalogClock from 'vue-analog-clock'
Vue.use(AnalogClock);

//方法2
import {AnalogClock} from 'vue-analog-clock'
Vue.component("AnalogClock",AnalogClock);

//方法3 假设是test.vue文件 <script>标签内使用局部注册AnalogClock组件
import {AnalogClock} from 'vue-analog-clock'
export default{
    components:{AnalogClock}
}

2.例子

2.1 最简单使用

• 代码

<AnalogClock/>

• 效果
  

2.2 显示罗马数字

• 代码

<AnalogClock :size="size" scaleType="roman"/>

• 效果
  

2.3 自定义边框颜色、背景色、刻度线颜色以及小时数字颜色

• 代码

<AnalogClock bordercolor="brown" backgroundColor="black" hourColor="white" scaleColor="yellow"/>

• 效果

2.4 自定义边框图片、背景图片

• 代码1

<AnalogClock borderImage="/static/img/border.png" backgroundImage="/static/img/bg.jpg"/>

• 代码2 使用远程图片

<AnalogClock
        borderImage="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545553805386&di=ec656215a2958d617ef30631e96304e0&imgtype=0&src=http%3A%2F%2Fimg1.ali213.net%2Fshouyou%2Fupload%2Fimage%2F2018%2F07%2F09%2F584_2018070952816881.png"
        backgroundImage="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545553773235&di=1c768f80fc088c2edc20fa75af77c515&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F03%2F20160703164252_2WySB.jpeg"
    />

• 效果

3. props

4. 方法

提示：给AnalogClock组件增加ref属性可获取组件的Vue实例，实例可执行下面的方法。例如：

<AnalogClock ref="ac"/>

export default{
    mounted(){
        let ac = this.$refs.ac;
        //如果props没有传入time,那么会默认执行run方法
        // ac.run();
        // ac.stop();
    }
}