Time 时间

基础用法

效果预览可直接操作下方示例

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: "时间",
      prop: "time",
      type: "time",
    }
  ]
});
</script>

下拉框样式

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

效果预览可直接操作下方示例

popperClass属性配置样式的class名字

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [{
    label: "时间",
    prop: "time",
    popperClass: 'popperClass',
    type: "time",
  }]
});
</script>

固定时间点

效果预览可直接操作下方示例

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

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  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 setup>
import { ref } from 'vue';

const option = ref({
  column: [{
    label: "时间",
    prop: "time",
    type: "time",
    format: 'HH时mm分ss秒',
    valueFormat: 'HH:mm:ss'
  }]
});
</script>

时间范围

效果预览可直接操作下方示例

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  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 setup>
import { ref, computed } from 'vue';

const form = ref({});

const option = computed(() => ({
  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: form.value.start
    }
  ]
}));
</script>

方法

提示

3.5.2+

效果预览可直接操作下方示例

visibleChange 下拉列表出现/消失时触发

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: "时间",
      prop: "time",
      type: "time",
      visibleChange: () => {
        console.log('=====')
      }
    }
  ]
});
</script>