Element UI el-date-picker datetime 日期时间选择器 底部添加清除按钮

背景

客户需要在时间选择器点击后在选择面板的下方添加一个清除按钮进行时间的清除，不想使用自带的清除小x按钮。

element-ui并没有暴露可以自定义按钮与事件。

解决方案

我想到了两个方案解决

1.使用组件提供的快捷方法 Shortcuts 完成，需要把样式调整到对应的位置。由于我最终没有选择这个方法，具体样式需要大家自己去完成。

2.使用自定义指令完成。最终的效果图如下

：话不多说，直接上代码

<!-- :append-to-body 最好是设置为false DetePicker 自身是否插入至 body 元素上。 -->
<!-- 不插入到body元素上是为了在自定义指令中更好的找到目标元素 -->
<el-date-picker
    v-model="value"
    v-picker-clearable
    :append-to-body="false"
    type="datetime"
    />

接下来就是指令的完成，vue2（3也是同理）

import i18n from '@/lang/index'
/**
 * 日期选择清除
 * 使用 <el-date-picker v-picker-clearable :append-to-body="false"></el-date-picker>
 */
const pickerClearable = {
  inserted(el, binding, vnode) {
    // 获取到picker实例
    const picker = vnode.componentInstance
    // 当组件focus的时候执行 仅执行一次
    picker.$once('focus', () => {
      picker.$nextTick(() => {
        // 假设他没有插入到body中 :append-to-body="false"
        let pickerPanel = el.querySelector('.el-picker-panel')
        if (!pickerPanel) {
          // 如果没有找到说明插入在body中 目前我看的规律是后创建的时候插入到最后一个
          const pickerPanelList = document.querySelectorAll('.el-picker-panel')
          const lastIndex = pickerPanelList.length - 1
          pickerPanel = el.querySelector('.el-picker-panel') || pickerPanelList[lastIndex]
        }
        if (pickerPanel) {
          const footer = pickerPanel.querySelector('.el-picker-panel__footer')
          if (footer) {
            // 创建清除按钮并插入到footer里面
            const clearButton = document.createElement('el-button')
            clearButton.textContent = i18n.t('clear')
            clearButton.className = 'clear-button el-button el-picker-panel__link-btn el-button--text el-button--mini'
            footer.insertBefore(clearButton, footer.firstChild)
            // 给按钮注册事件
            clearButton.addEventListener('click', () => {
              // 通过picker实现完成时间清空 pick方法不行 选择了input
              picker.$emit('input', null)
              // 关闭日期面板
              picker.handleClose()
            })
          }
        }
      })
    })
  }
}
 
export default pickerClearable
 

也可以到我的掘金上查看

作者：记得坚持
链接：https://juejin.cn/post/7317325063128088585
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。