Time时间

基础用法

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: "时间",
          prop: "time",
          type: "time",
        }]
      },
    };
  }
}
</script>

显示代码复制代码复制代码

下拉框样式

.popperClass .el-time-spinner__item{
  background-color: rgba(0,0,0,.2);
}

popperClass属性配置样式的class名字

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: "时间",
          prop: "time",
          popperClass: 'popperClass',
          type: "time",
        }]
      },
    };
  }
}
</script>

显示代码复制代码复制代码

固定时间点

，可设置pickerOptions中分别通过start、end和step指定可选的起始时间、结束时间和步长

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: "时间",
          prop: "time",
          type: "time",
          pickerOptions: {
            start: '08:30',
            step: '00:15',
            end: '18:30'
          }
        }]
      },
    };
  }
}
</script>

显示代码复制代码复制代码

格式化

使用format指定输入框的格式；使用valueFormat指定绑定值的格式。

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: "时间",
          prop: "time",
          type: "time",
          format: 'HH时mm分ss秒',
          valueFormat: 'HH:mm:ss'
        }]
      },
    };
  }
}
</script>

显示代码复制代码复制代码

时间范围

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: "时间范围",
          prop: 'timerange',
          type: 'timerange',
          format: 'HH:mm:ss',
          valueFormat: 'HH:mm:ss',
          startPlaceholder: '时间开始范围自定义',
          endPlaceholder: '时间结束范围自定义',
        }]
      },
    };
  }
}
</script>

显示代码复制代码复制代码

固定时间范围

若先选择开始时间，则结束时间内备选项的状态会随之改变

<template>
  <avue-form v-model="form"
             :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {}
    };
  },
  computed: {
    option () {
      return {
        column: [{
          label: "开始时间",
          prop: 'start',
          type: 'time',
          format: 'HH:mm:ss',
          start: '08:30',
          step: '00:15',
          end: '18:30'
        }, {
          label: "结束时间",
          prop: 'end',
          type: 'time',
          format: 'HH:mm:ss',
          start: '08:30',
          step: '00:15',
          end: '18:30',
          minTime: this.form.start
        }]
      }
    }
  }
}
</script>

显示代码复制代码复制代码