截屏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>
如上寫法按鈕無法多選边灭，可通過動態(tài)添加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;
}
寫到這里會遇到异希，點(diǎn)擊取消時按鈕焦點(diǎn)無法取消，如果按鈕有按鍵監(jiān)聽行為绒瘦，那么當(dāng)按鈕在聚焦?fàn)顟B(tài)下也會觸發(fā)称簿，比如點(diǎn)擊button打開模態(tài)窗時調(diào)用了一個方法openDialog,如果按鈕未失去焦點(diǎn)，那么通過按鍵可能會再次觸發(fā)該方法惰帽，所以需要手動移除聚焦效果
addPersionLayer(e)
{
this.active = !this.active;
let target = e.target;
// 根據(jù)button組件內(nèi)容 里面包括一個span標(biāo)簽憨降，如果設(shè)置icon，則還包括一個i標(biāo)簽该酗，其他情況請自行觀察授药。
// 所以，在我們點(diǎn)擊到button組件上的文字也就是span標(biāo)簽上時呜魄，直接執(zhí)行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();
}
同理爵嗅，如果需要修改選中后藍(lán)底狀態(tài)娇澎，用上面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
