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

2023-08-02 00:29:04 326

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

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

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

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




新增商品分类

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

/**
*为element-ui的Select和Cascader添加弹层底部操作按钮
*@paramvisible
*@paramrefName设定的ref名称
*@paramonClick底部操作按钮点击监听
*/
visibleChange(visible,refName,onClick){
if(visible){
constref=this.$refs[refName];
letpopper=ref.$refs.popper;
if(popper.$el)popper=popper.$el;
if(!Array.from(popper.children).some(v=>v.className==='el-cascader-menu__list')){
constel=document.createElement('ul');
el.className='el-cascader-menu__list';
el.style='border-top:solid1px#E4E7ED;padding:0;color:#606266;';
el.innerHTML=`

商品分类管理

`;
popper.appendChild(el);
el.onclick=()=>{
//底部按钮的点击事件点击后想触发的逻辑也可以直接写在这
onClick&&onClick();

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

el-select跟el-cascader的调用方式一致，这里以el-cascader举例

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

constselectBottomAction={
methods:{
/**
*为element-ui的Select和Cascader添加弹层底部操作按钮
*@visible-change="v=>selectBottomAction(v,{ref:'select',label:'商品分类',icon:'el-icon-menu',click:goodsTypeManagement})"
*@paramvisible
*@paramref设定的ref名称
*@paramclick底部操作按钮点击监听
*@paramlabel标题
*@paramicon图标class
*@paramarrow是否显示箭头
*/
selectBottomAction(visible,{ref,click,label='',icon='',arrow=false}){
if(visible){
const_ref=this.$refs[ref];
letpopper=_ref.$refs.popper;
if(popper.$el)popper=popper.$el;
if(!Array.from(popper.children).some(v=>v.className==='el-cascader-menu__list')){
constel=document.createElement('ul');
el.className='el-cascader-menu__list';
el.style='border-top:solid1px#E4E7ED;padding:0;color:#606266;';
el.innerHTML=`
${icon?``:''}
${label}
${arrow?'':''}
`;
popper.appendChild(el);
el.onclick=()=>{
click&&click();
if(_ref.toggleDropDownVisible){
_ref.toggleDropDownVisible(false);
}else{
_ref.visible=false;
}
};
}
}
},
},
};

exportdefaultselectBottomAction;

提示：后期可能会随着官方版本升级失效，谨慎使用

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐