如何在element时间控件的弹窗里面增加一个清空按钮？

Question

因为内容区域比较矮，弹出时间选择框的时候回挡住原有的情况按钮

Answer 1

查看源码这个组件的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 = '';
      };

    });
  }
},