开始
在《如何开发自定义Vue组件(一)？》中已经说明了如何开发一个自定义的进度条，自定义vue组件也在该文中有介绍，所以直接进入本文主题，怎么开发一个自定义时间组件？
同样是3方面的内容：Template、Css、Component。
举例说明：时间组件
part-time.png
Template
之前开发自定义进度条是在原生progress基础上加上自定义样式达到目的，这次自定义时间组件没有原生组件做基础，完全用div拼出来的。
<script type="x-template" id="part-datetime">
<div class="border-box" style="padding:25px;">
<div class="text-orion">当前时间</div>
<div>
<div class="row text-center">
<div class="col-md-2">
<div class="text-orion text-center" style="font-size:30px;" v-text="day"></div>
<div class="text-orion-light text-center">DAY</div>
</div>
<div class="col-md-2" >
<div style="font-size:30px;" class="text-center" v-text="hour"></div>
<div class="text-orion-light text-center">H</div>
</div>
<div class="col-md-1">
<div class="text-orion" style="font-size:30px;">:</div>
</div>
<div class="col-md-2">
<div style="font-size:30px;" class="text-center" v-text="minute"></div>
<div class="text-orion-light text-center">MIN</div>
</div>
<div class="col-md-1">
<div class="text-orion" style="font-size:30px;">:</div>
</div>
<div class="col-md-2">
<div style="font-size:30px;" class="text-center" v-text="second"></div>
<div class="text-orion-light text-center">SEC</div>
</div>
</div>
</div>
</div>
</script>
Css
基础样式是bootstrap.css，再加上自定义样式。
.border-box {
height: 130px;
padding: 20px;
border: 1px solid rgb(45, 44, 60);
}
.text-orion {
color:#56BBCA;
}
.text-orion-light {
color:#5D858D;
}
Component
为了让新组件成为vue的一员，所以需要注册。
先注册一个简单的不会自动更新的时间组件。
Vue.component('part-datetime', {
data: function () {
return {}
},
props: {
day: {
type: Number,
default: 10
},
hour: {
type: Number,
default: 12,
},
minute: {
type: Number,
default: 15,
},
second: {
type: Number,
default: 30,
},
},
template: 'part-datetime'
})
然后再此基础上在注册一个会自动更新时间的组件。
这次使用data来更新数据。
Vue.component('p-datetime', {
data: function () {
return {
dayValue:6,
hourValue:17,
minuteValue:31,
secondValue:50,
}
},
created() {
var self = this
function repeated() {
self.setTime()
setTimeout(repeated, 1000);
}
repeated()
},
methods: {
setTime: function() {
var self = this
var now = new Date()//获取系统当前时间
self.dayValue = now.getDate() //获取当前日(1-31)
self.hourValue = now.getHours() //获取当前小时数(0-23)
self.minuteValue = now.getMinutes() //获取当前分钟数(0-59)
self.secondValue = now.getSeconds() //获取当前秒数(0-59)
}
},
template: `
<part-datetime
:day="dayValue"
:hour="hourValue"
:minute="minuteValue"
:second="secondValue">
</part-datetime>
`
})
到此，新的时间组件就开发完成了，怎么应用呢？
如何应用自定义组件？
Html
像html普通组件一样使用，因为已经注册了一个会自动更新的时间组件p-datetime，所以很简单的使用即可，无需赋值。
<div class="col-md-3 first">
<p-datetime></p-datetime>
</div>
这样显示的时间就会和当前电脑时间一样，并自动更新时分秒的数值。
这和之前的自定义进度条有区别，传值的方式不同：自定义进度条需要在当前页面中传相应的值；自定义时间组件在构建组件时已经把传值方法写好，查看setTime方法。
