```
html:
<ul class="status-btns" @click="statusBtnsClick">
```js
enum BtnType {
'完成' = '完成'
'进行中' = '进行中'
'停用' = '停用'
}
const statusBtnsClick = (e:any) =>{
const val:BtnType = e.target.innerText
if(!statusBtns.includes(val)){
statusBtns.leghth = 0
statusBtns.push(val)
}else{
statusBtns.splice(statusBtns.findIndex(i:string => i === val), 1)
}
const obj = {
完成:1,
进行中:0,
停用:2
}
if(!statusBtns.length){
emit('checkStatus', '')
return
}else{
emit('checkStatus', obj[val])
}
}
```
css:
.status-btns {
list-style: none;
width: 225px;
display: inline-block;
li {
display: inline-block;
width: 60px;
text-align: center;
padding: 3px;
border: 1px solid #ccc;
font-size: 14px;
cursor: pointer;
color: #606266;
}
.cur {
background-color: blue;
color: white;
}
.doing {
border-left: none;
border-right: none;
}
```
