基础用法

vue2

vue3

<template>
  <tvue-form :option="option"></tvue-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);
}

vue2

vue3

`popperClass`属性配置样式的`class`名字

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

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

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

固定时间点

vue2

vue3

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

<template>
  <tvue-form :option="option"></tvue-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>

格式化

vue2

vue3

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

<template>
  <tvue-form :option="option"></tvue-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>

时间范围

vue2

vue3

<template>
  <tvue-form :option="option"></tvue-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>

固定时间范围

vue2

vue3

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

<template>
  <tvue-form v-model="form"
             :option="option"></tvue-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>

方法

vue2

vue3

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

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

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

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