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

这篇具有很好参考价值的文章主要介绍了Element UI el-date-picker datetime 日期时间选择器底部添加清除按钮。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

背景

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

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

解决方案

我想到了两个方案解决

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

el-date-picker 清空按钮,前端开发,ui,vue.js,前端,elementui

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

el-date-picker 清空按钮,前端开发,ui,vue.js,前端,elementui

：话不多说，直接上代码

<!-- :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
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。文章来源地址https://www.toymoban.com/news/detail-846639.html

到了这里，关于Element UI el-date-picker datetime 日期时间选择器底部添加清除按钮的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！