开始

在《如何开发自定义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方法。