vue3制作时间选择框

在 Vue3 中，可以使用官方推荐的 Element Plus 组件库来创建一个时间选择器，它提供了一个方便易用的时间选择组件 `el-time-picker`。以下是简单的步骤：

1. 首先，确保已经安装了 Vue 和 Element Plus，如果没有，可以通过 npm 或 yarn 安装：

   npm install vue element-plus
   # 或者
   yarn add vue element-plus

2. 引入相关的 CSS 文件和组件：

   <link rel="stylesheet" href="element-plus/lib/theme-chalk/index.css">
   <script setup> import { ElTimePicker } from "element-plus"; </script>

3. 在模板中使用 `ElTimePicker` 组件：

   <template>
     <div>
       <label for="timePicker">选择时间：</label>
       <el-time-picker v-model="selectedTime" placeholder="请选择时间"></el-time-picker>
     </div>
   </template>

   <!-- 在 script 部分定义数据 -->
   <script>
   import { ref } from 'vue';
   export default {
     setup() {
       const selectedTime = ref('');
       return {
         selectedTime,
       };
     },
   };
   </script>

4. 可以通过 `.value` 访问用户选择的时间值。

注意：你需要在 Vue 环境下编写上述代码，并确保正确配置了 Vue 的运行环境（如 Vue CLI、Webpack 等）。