## 时长

### 基础用法

```html
<template>
  <div class="main-content">
    <div class="flex-line">
      <label>时长</label>
      <cl-duration v-model="timeVal"></cl-duration>
    </div>
    <div class="flex-line">
      <label>绑定的值单位为分</label>
      <div>{{timeVal}}</div>
    </div>
    <div class="flex-line">
      <label>禁用</label>
      <cl-duration v-model="timeVal" disabled></cl-duration>
    </div>
    <div class="flex-line">
      <label>size指定尺寸</label>
      <cl-duration v-model="timeVal" size="medium"></cl-duration>
    </div>
   
  </div>
</template>
<script>
  export default {
    data () {
      return {
        timeVal: 0,
      }
    }
  }
</script>
<style>
  .main-content{
    width: 100%;
  }
  .main-content .flex-line:last-child{
    margin-bottom:0;
  }
  .flex-line{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label{
    width: 110px;
    text-align: right;
    margin-right: 20px;
  }
</style>
<!-- time-1.vue -->
```
### 时长类型分为分和秒
`type`可指定类型，时长单位为分（minute）或者秒（second）。

```html
<template>
  <div class="main-content">
    <div class="flex-line">
      <label>时长</label>
      <cl-duration v-model="timeVal" type="second"></cl-duration>
    </div>
    <div class="flex-line">
      <label>绑定的值单位为秒</label>
      <div>{{timeVal}}</div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        timeVal: "",
      }
    }
  }
</script>
<style>
   .main-content{
    width: 100%;
  }
  .main-content .flex-line:last-child{
    margin-bottom:0;
  }
  .flex-line{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label{
    width: 110px;
    text-align: right;
    margin-right: 20px;
  }
</style>
<!-- time-2.vue -->
```


### 属性说明
| 属性 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| v-model | string/number | - | 绑定值 |
| validate | string / object | - | 校验规则 |
| size | string | small | 尺寸大小，可选值large，medium, small, mini |
| disabled | boolean | false | 禁用 |
| type | string | minute | 类型，可选值minute，second |
