vue2中年度选择器

### 创建或使用年度选择器组件 对于希望在 Vue 2 中创建或使用年度选择器组件的需求，可以考虑几种方法来实现这一目标。 #### 方法一：利用现有库 如果不想自行编写大量代码，则可以选择现有的第三方库。Element UI 是一个非常流行的选择，它不仅支持 Vue 2 而且提供了一个日期时间选择器组件 `el-date-picker`，可以通过设置属性将其配置成仅显示年份模式[^3]。这允许用户方便地挑选特定的一年或多选多年作为区间。 ```html <template> <div class="year-selector"> <!-- 单个年份选择 --> <el-date-picker v-model="selectedYear" type="year"></el-date-picker> <!-- 多个年份范围选择 --> <el-date-picker v-model="yearRange" type="daterange" :picker-options="{ shortcuts: [{ text: '最近一年', onClick(picker) { const end = new Date(); const start = new Date(); start.setFullYear(start.getFullYear() - 1); picker.$emit('pick', [start, end]); }}]}" range-separator="-" start-placeholder="开始年份" end-placeholder="结束年份"> </el-date-picker> </div> </template> <script> export default { data () { return { selectedYear: '', yearRange: [] } } } </script> ``` #### 方法二：自定义组件 另一种方案是从零开始构建自己的年度选择器组件。这种方式虽然更耗时但也给予开发者更大的灵活性去定制化功能和外观。下面是一个简单的例子： ```javascript // YearPicker.vue 文件内容如下： <template> <div class="custom-year-picker"> <input @click="toggleDropdown()" readonly placeholder="请选择年份..." /> <ul v-show="showYearsList" ref="dropdownMenu"> <li v-for="(year, index) in yearsArray" :key="index" @mousedown.prevent="selectYear(year)"> {{ year }} </li> </ul> </div> </template> <script> import moment from "moment"; export default { name: "CustomYearPicker", props: ["value"], mounted() {}, methods: { toggleDropdown() { this.showYearsList = !this.showYearsList; }, selectYear(selectedYear) { this.$emit("input", selectedYear); // 更新绑定值 this.toggleDropdown(); // 关闭下拉列表 } }, computed: { yearsArray() { let currentYear = parseInt(moment().format("YYYY")); let result = []; for (let i = 0; i <= 99; ++i) { result.push(currentYear - i); } return result.reverse(); } }, watch: { value(newValue) {} }, data() { return { showYearsList: false, }; } }; </script> <style scoped lang="scss"> .custom-year-picker ul { list-style-type: none; } .custom-year-picker li:hover { background-color: lightblue; cursor: pointer; } </style> ``` 此示例展示了如何通过监听点击事件打开/关闭年份数组的下拉菜单，并允许用户从中选取某一年份。当选择了某个选项后会触发父级组件中的输入事件从而更新绑定的数据模型。