因为内容区域比较矮,弹出时间选择框的时候回挡住原有的情况按钮
查看源码这个组件的footer
没有提供插槽,熟悉原生js的话实现起来不怎么费劲,手动通过$refs
筛选到el-picker-panel__footer
这个div,创建一个按钮插在里面就行了
给你简单写了个可用的例子
https://codepen.io/asseek/pen/yLYKXbm
可以通过下面注释理解实现原理
datePickerFocus() {
// 简单写个判断避免重复创建
if (!this.insertButton) {
this.$nextTick(() => {
// 获得要插入的目标dom 这一步要靠控制台筛选元素自己去找到位置进行筛选,每个组件都不同
const targetEl = this.$refs.picker.picker.$el.querySelector('.el-picker-panel__footer');
// 创建清空按钮 可以自定义类跟样式
const btn = document.createElement('button');
btn.className = 'el-button el-picker-panel__link-btn el-button--text el-button--mini';
btn.innerHTML = '清空';
// 把清空按钮插入目标dom的前面
targetEl.insertBefore(btn, targetEl.children[0]);
// 避免重复创建标记
this.insertButton = true;
// 监听按钮点击事件 这里是点击了把值清空
btn.onclick = () => {
this.value1 = '';
};
});
}
},