以下是一个简单的例子，演示如何在 Vue.js 中使用 Element Plus 的 DatePicker 日期选择器：
首先，确保你已经引入了 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 组件中使用 DatePicker 日期选择器：
<template>
<div>
<el-date-picker
v-model="dateValue"
type="date"
placeholder="请选择日期"
:picker-options="pickerOptions"
></el-date-picker>
<p>选择的日期是：{{ dateValue }}</p>
</div>
</template>
<script>
export default {
data() {
return {
dateValue: '',
pickerOptions: {
shortcuts: [
{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
},
{
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
},
{
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}
]
}
};
}
}
</script>
在上述例子中，v-model 用于双向绑定日期选择器的值，type 可以设置选择器的类型（如日期、日期时间等），placeholder 用于设置选择器的占位文本，pickerOptions 可以配置一些选项，例如 shortcuts 可以设置快捷选项。
转载请注明出处：http://www.zyzy.cn/article/detail/5541/ElementPlus