美文网首页
关于el-button 无法多选的解决办法

关于el-button 无法多选的解决办法

作者: 最慢的是活着 | 来源:发表于2021-12-17 11:29 被阅读0次
截屏2021-12-17 上午11.10.54.png 
<el-button plain @click="addPersionLayer" style="  margin: 20px;">朴素按钮</el-button>
 <el-button plain @click="addCarLayer" style="  margin: 20px;">朴素按钮2</el-button>

如上写法按钮无法多选，可通过动态添加class来解决

  <el-button plain @click="addPersionLayer" :class="active?'aaa':'bbb'" style="  margin: 20px;">朴素按钮</el-button>
   <el-button plain @click="addCarLayer" :class="active2?'aaa':'bbb'" style="  margin: 20px;">朴素按钮2</el-button>

css

.aaa{
    color:#1890FF;
    border: 1px solid #1890FF; 
}
.bbb{
    color:#606266;;
    border: 1px solid #DCDFE6; 
}

js

addPersionLayer(e)
 {
    this.active = !this.active;  
  },
addCarLayer(e) 
{
   this.active2 = !this.active2;
 }

写到这里会遇到，点击取消时按钮焦点无法取消，如果按钮有按键监听行为，那么当按钮在聚焦状态下也会触发，比如点击button打开模态窗时调用了一个方法openDialog,如果按钮未失去焦点，那么通过按键可能会再次触发该方法，所以需要手动移除聚焦效果

addPersionLayer(e)
 {
    this.active = !this.active;  
    let target = e.target;
    // 根据button组件内容 里面包括一个span标签，如果设置icon，则还包括一个i标签，其他情况请自行观察。
   // 所以，在我们点击到button组件上的文字也就是span标签上时，直接执行e.target.blur()不会生效，所以要加一层判断。
   if(target.nodeName == 'SPAN' || target.nodeName == 'I')
     {
        target = e.target.parentNode;
      }
    target.blur();
  },
addCarLayer(e) 
{
   this.active2 = !this.active2;
   if(target.nodeName == 'SPAN' || target.nodeName == 'I')
     {
        target = e.target.parentNode;
      }
    target.blur();
 }

同理，如果需要修改选中后蓝底状态，用上面css写样式也可以，或者通过active去判断是否更改他的type

  <el-button @click="addPersionLayer" style="  margin: 20px;" :type="active?'primary':''">朴素按钮</el-button>
<el-button @click="addCarLayer" style="  margin: 20px;" :type="active2?'primary':''">朴素按钮2</el-button>

这样就可以得到如图的多选按钮


截屏2021-12-17 上午11.27.12.png

相关文章