element ui 在时间选择器下拉框底部添加选择今天功能
时间: 2023-07-19 21:39:41 浏览: 188
您可以在 Element UI 的 `TimePicker` 组件的下拉框底部添加一个“选择今天”按钮,来实现在时间选择器下拉框底部添加选择今天功能。具体实现方法如下:
1. 在 `TimePicker` 组件上添加 `ref` 属性,用于获取下拉框 DOM 元素:
```
<el-time-picker
ref="timePicker"
...
></el-time-picker>
```
2. 在 `mounted` 钩子函数中获取下拉框 DOM 元素,并在其底部添加“选择今天”按钮:
```
mounted() {
const picker = this.$refs.timePicker.picker;
const footerBtn = document.createElement('span');
footerBtn.textContent = '选择今天';
footerBtn.addEventListener('click', () => {
picker.date = new Date(); // 设置日期为今天
picker.handleConfirm(); // 触发确认事件
});
picker.$el.querySelector('.el-time-panel__footer').appendChild(footerBtn);
}
```
在上述代码中,我们首先获取了 `TimePicker` 组件的下拉框 DOM 元素,然后在其底部添加了一个按钮,并监听其点击事件。当用户点击“选择今天”按钮时,我们会将日期设置为今天,并触发确认事件,从而完成日期的选择。
需要注意的是,由于 `TimePicker` 组件的底部有一个分割线,因此我们需要将“选择今天”按钮添加在分割线的上方。在上述代码中,我们通过 `querySelector` 方法找到了分割线对应的 DOM 元素,并在其之前添加了按钮。
阅读全文