详解为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 相关文章推荐
js动态生成指定行数的表格
Jul 11 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
jQuery实现大图轮播
Feb 13 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
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
德劲1103二次变频版的打磨
2021/03/02 无线电
PHP图片上传代码
2013/11/04 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
javascript静态的url如何传递
2007/05/03 Javascript
js表格分页实现代码
2009/09/18 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
python基础教程之循环介绍
2014/08/29 Python
总结Python编程中三条常用的技巧
2015/05/11 Python
python实现的文件同步服务器实例
2015/06/02 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
python实战教程之自动扫雷
2018/07/13 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
Python实现自动整理文件的脚本
2020/12/17 Python
python实现简单猜单词游戏
2020/12/24 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
读书活动总结
2014/04/28 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书