问答

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

作者:admin 2021-08-21 我要评论

因为内容区域比较矮,弹出时间选择框的时候回挡住原有的情况按钮 ### 查看源码这个组件的 footer 没有提供插槽,熟悉原生js的话实现起来不怎么费劲,手动通过 $r...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

###

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

    });
  }
},

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 使用箭头函数return数据不能实现

    使用箭头函数return数据不能实现

  • 个人小程序号能接入小程序3D地图吗?

    个人小程序号能接入小程序3D地图吗?

  • vue 移动端项目中,使用了better-scrol

    vue 移动端项目中,使用了better-scrol

  • css如何做出区域平均划分为四列

    css如何做出区域平均划分为四列

腾讯云代理商
海外云服务器