【区分vue2和vue3下的element UI TimePicker 时间选择器组件，分别详细介绍属性，事件，方法如何使用，并举例】
在 Vue 2 中，我们通常使用 Element UI 来实现时间选择器（TimePicker）组件。然而，在 Vue 3 中，Element UI 没有官方支持 Vue 3 的版本。但是，有一个名为 Element Plus 的库，它是 Element UI 的 Vue 3 版本。下面我将分别介绍 Vue 2 下 Element UI 的 TimePicker 和 Vue 3 下 Element Plus 的 TimePicker 的属性、事件和方法。
Vue 2 + Element UI
TimePicker 时间选择器
属性 (Attributes):
v-model: 绑定值，为选定的时间type: 选择器类型，可选值为datetimerange、daterange、datetime、date、time、times，对于时间选择器，通常使用time或timesplaceholder: 非必填项占位符format: 展示的时间格式value-format: 绑定值的格式disabled: 是否禁用选择器clearable: 是否显示清除按钮picker-options: 选择器的配置项，比如可选择的范围等...: 其他通用属性
事件 (Events):
change: 值改变时触发的事件blur: 失去焦点时触发的事件focus: 获得焦点时触发的事件...: 其他通用事件
方法 (Methods):
- Element UI 的 TimePicker 组件通常不提供直接调用的方法，而是通过属性和事件来控制其行为。
示例:
<template><el-time-pickerv-model="time"type="time"placeholder="选择时间":picker-options="{ selectableRange: '18:30:00-20:30:00' }"@change="handleChange"></el-time-picker>
</template><script>
export default {data() {return {time: '',};},methods: {handleChange(val) {console.log(val);},},
};
</script>
Vue 3 + Element Plus
TimePicker 时间选择器
Element Plus 的 TimePicker 与 Element UI 的非常相似，但可能有一些新增或调整的功能。你应该查阅 Element Plus 的官方文档以获取最新的信息。
属性、事件和方法 的大部分与 Element UI 相同，但可能有一些新的添加或改变。
示例:
由于我没有直接的 Element Plus 示例代码，但你可以预期它与 Vue 2 的示例非常相似，只是需要确保你正在使用 Vue 3 和 Element Plus。
<template><el-time-pickerv-model="time"type="time"placeholder="选择时间":picker-options="{ selectableRange: '18:30:00-20:30:00' }"@change="handleChange"></el-time-picker>
</template><script>
import { ref } from 'vue';export default {setup() {const time = ref('');const handleChange = (val) => {console.log(val);};return {time,handleChange,};},
};
</script>
在这个 Vue 3 的示例中，我们使用了 Composition API 的 ref 函数来创建响应式的 time 变量，并且 handleChange 方法是一个箭头函数，它可以在 Vue 组件的 setup 函数内部被正确引用。其他的使用方式与 Vue 2 的示例类似。