Element Plus 的 TimePicker(时间选择器)组件用于选择时间。在使用 Element Plus 的 TimePicker 组件之前,请确保已经正确引入了 Element Plus 库。

以下是一个简单的例子,演示如何在 Vue.js 中使用 Element Plus 的 TimePicker 时间选择器:

首先,确保你已经引入了 Element Plus 库。你可以通过以下方式之一来引入:

1. 使用 npm 安装:
npm install element-plus --save

然后在你的项目中使用:
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

2. 直接在 HTML 中引入:
<!-- 在你的 HTML 文件中引入 Element Plus 的 CSS 文件 -->
<link rel="stylesheet" href="path/to/element-plus/theme-chalk/index.css">

<!-- 在你的 HTML 文件中引入 Element Plus 的 JS 文件 -->
<script src="path/to/element-plus/index.js"></script>

然后,在你的 Vue 组件中使用 TimePicker 时间选择器:
<template>
  <div>
    <el-time-picker v-model="timeValue" placeholder="请选择时间" :picker-options="pickerOptions"></el-time-picker>
    <p>选择的时间是:{{ timeValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeValue: '',
      pickerOptions: {
        selectableRange: '18:30:00 - 20:30:00'
      }
    };
  }
}
</script>

在上述例子中,v-model 用于双向绑定时间选择器的值,placeholder 用于设置选择器的占位文本,pickerOptions 可以配置一些选项,例如 selectableRange 可以设置可选的时间范围。




转载请注明出处:http://www.zyzy.cn/article/detail/5539/ElementPlus