在 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 的示例類似。
)