1. 基本用法:
<TimePicker v-model="selectedTime" />
在上述例子中，v-model 用于绑定时间选择器的值，selectedTime 是在 data 中定义的变量。
2. 禁用状态:
<TimePicker v-model="selectedTime" disabled />
添加 disabled 属性可以禁用时间选择器。
3. 可清空:
<TimePicker v-model="selectedTime" clearable />
添加 clearable 属性可以在时间选择器后添加清空按钮。
4. 默认时间:
<TimePicker v-model="selectedTime" :default-value="defaultTime" />
使用 default-value 属性可以设置时间选择器的默认值。
data() {
return {
defaultTime: new Date(2000, 0, 1, 12, 0, 0) // 示例：12:00 PM
};
}
5. 时间范围:
<TimePicker v-model="selectedTime" :start="startTime" :end="endTime" />
使用 start 和 end 属性可以设置时间选择器的范围。
data() {
return {
startTime: '09:00',
endTime: '18:00'
};
}
6. 自定义时间格式:
<TimePicker v-model="selectedTime" :format="customFormat" />
使用 format 属性可以自定义时间的显示格式。
methods: {
customFormat(value) {
return value ? `${value.getHours()} 时 ${value.getMinutes()} 分` : '';
}
}
7. 时间步长:
<TimePicker v-model="selectedTime" :picker-options="{ selectableRange: '18:00:00 - 22:30:00', step: '00:15' }" />
使用 picker-options 属性中的 selectableRange 和 step 可以设置时间的可选范围和步长。
以上是一些常见的 Element-React TimePicker 组件的用法示例。你可以根据具体需求在项目中使用它们，并根据 Element-React 文档进行详细配置和使用说明。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5606/Element-React