详解为element-ui的Select和Cascader添加弹层底部操作按钮


Posted in Javascript onFebruary 07, 2020

如下图这样把操作按钮放在select弹层底部是一种挺常见的设计方式

详解为element-ui的Select和Cascader添加弹层底部操作按钮

但是很遗憾element-ui没有给我们提供这个插槽,我们想实现这个功能只能重写组件或者等官方更新吗,答案当然是否定的!

花了一点时间通过一个函数实现这个功能,支持el-selectel-cascader,效果点击预览

详解为element-ui的Select和Cascader添加弹层底部操作按钮

详解为element-ui的Select和Cascader添加弹层底部操作按钮

其实逻辑很简单,把下面这段html插入到指定位置就行了

<ul class="el-cascader-menu__list" style="border-top: solid 1px #E4E7ED;padding:0">
 <li class="el-cascader-node" style="height:38px;line-height: 38px">
  <i class="el-icon-plus"></i>
  <span class="el-cascader-node__label">新增商品分类</span>
  <i class="el-icon-arrow-right el-cascader-node__postfix"/>
 </li>
</ul>

我这里直接使用el-cascader的样式,实际使用中这段html可以根据自己的需求修改
上代码,在methods写入这段函数

/**
 * 为element-ui的Select和Cascader添加弹层底部操作按钮
 * @param visible
 * @param refName 设定的ref名称
 * @param onClick 底部操作按钮点击监听
 */
visibleChange(visible, refName, onClick) {
 if (visible) {
  const ref = this.$refs[refName];
  let popper = ref.$refs.popper;
  if (popper.$el) popper = popper.$el;
  if (!Array.from(popper.children).some(v => v.className === 'el-cascader-menu__list')) {
   const el = document.createElement('ul');
   el.className = 'el-cascader-menu__list';
   el.style = 'border-top: solid 1px #E4E7ED; padding:0; color: #606266;';
   el.innerHTML = `<li class="el-cascader-node" style="height:38px;line-height: 38px">
<i class="el-icon-menu"></i>
<span class="el-cascader-node__label">商品分类管理</span>
<i class="el-icon-arrow-right el-cascader-node__postfix"/>
</li>`;
   popper.appendChild(el);
   el.onclick = () => {
    // 底部按钮的点击事件 点击后想触发的逻辑也可以直接写在这
    onClick && onClick();

    // 以下代码实现点击后弹层隐藏 不需要可以删掉
    if (ref.toggleDropDownVisible) {
     ref.toggleDropDownVisible(false);
    } else {
     ref.visible = false;
    }
   };
  }
 }
},

el-selectel-cascader的调用方式一致,这里以el-cascader举例

<el-cascader
  :options="cascaderOptions"
  v-model="cascaderValue"
  @visible-change="v => visibleChange(v, 'cascader', cascaderClick)"
  ref="cascader"
/>

如果调用的地方比较多,也可以像我一样封装成mixins

const selectBottomAction = {
 methods: {
  /**
   * 为element-ui的Select和Cascader添加弹层底部操作按钮
   * @visible-change="v => selectBottomAction(v, {ref: 'select', label: '商品分类' , icon: 'el-icon-menu', click: goodsTypeManagement})"
   * @param visible
   * @param ref   设定的ref名称
   * @param click  底部操作按钮点击监听
   * @param label  标题
   * @param icon   图标class
   * @param arrow  是否显示箭头
   */
  selectBottomAction(visible, {ref, click, label = '', icon = '', arrow = false}) {
   if (visible) {
    const _ref = this.$refs[ref];
    let popper = _ref.$refs.popper;
    if (popper.$el) popper = popper.$el;
    if (!Array.from(popper.children).some(v => v.className === 'el-cascader-menu__list')) {
     const el = document.createElement('ul');
     el.className = 'el-cascader-menu__list';
     el.style = 'border-top: solid 1px #E4E7ED; padding: 0; color: #606266;';
     el.innerHTML = `<li class="el-cascader-node" style="height:38px;line-height: 38px">
     ${icon ? `<i class="${icon}"></i>` : ''}
     <span class="el-cascader-node__label">${label}</span>
     ${arrow ? '<i class="el-icon-arrow-right el-cascader-node__postfix"/>' : ''}
     </li>`;
     popper.appendChild(el);
     el.onclick = () => {
      click && click();
      if (_ref.toggleDropDownVisible) {
       _ref.toggleDropDownVisible(false);
      } else {
       _ref.visible = false;
      }
     };
    }
   }
  },
 },
};

export default selectBottomAction;
提示:后期可能会随着官方版本升级失效,谨慎使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之二
Jul 05 Javascript
js中settimeout方法加参数
Feb 28 Javascript
javascript实现密码验证
Nov 10 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
详解JS模块导入导出
Dec 20 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
JS实现放烟花效果
Mar 10 Javascript
vue-cli设置css不生效的解决方法
Feb 07 #Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 #Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 #Javascript
JavaScript实现Excel表格效果
Feb 07 #Javascript
js实现自动播放匀速轮播图
Feb 06 #Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 #Javascript
vue 检测用户上传图片宽高的方法
Feb 06 #Javascript
You might like
德生1994机评
2021/03/02 无线电
PHP include任意文件或URL介绍
2014/04/29 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
js对象的比较
2011/02/26 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
Python批量转换文件编码格式
2015/05/17 Python
Python作用域用法实例详解
2016/03/15 Python
替换python字典中的key值方法
2018/07/06 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
中专三年学习的个人自我评价
2013/12/12 职场文书
预备党员转正考核材料
2014/06/03 职场文书
教师先进个人材料
2014/12/17 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
解决golang在import自己的包报错的问题
2021/04/29 Golang
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
JavaScript的function函数详细介绍
2021/11/20 Javascript
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js