最近碰到一个需求,需要实现单选效果,且再次点击之后可取消选择。
拿到这个需求,自然而然想到了用el-radio来做。但是也遇到了很多不大不小的坑。
首先我写了下面的代码
<el-radio-group v-model="myFilterValue">
<el-radio
v-for="item in showItems"
:key="item.id"
:label="item.id"
@change="handleSelRadio(item)"
>
{{ item.behaviorName }}
</el-radio>
</el-radio-group>
function handleSelRadio(val) {
const newRadioVal = val ? val : '';
emit('updateFilterValue', newRadioVal);
}
可是这时候出现了一个问题,当使用change事件的时候,如果点击已经选中的单选框,则不会触发,这和需求相悖,所以只能换一种方式。
于是乎我把change事件换成了click事件。却发现他会触发两次,于是写了下面的代码,解决问题
<el-radio-group v-model="myFilterValue">
<el-radio
v-for="item in showItems"
:key="item.id"
:label="item.id"
@click.native.prevent="handleSelRadio(item)"
>
{{ item.behaviorName }}
</el-radio>
</el-radio-group>
function handleSelRadio(val) {
let newRadioVal;
if (myFilterValue.value === val.id) {
myFilterValue.value = null;
newRadioVal=''
} else {
myFilterValue.value = val.id;
newRadioVal=val
}
emit('updateFilterValue', newRadioVal);
}
这样确实能实现功能,但是取消点击的时候,样式不对了,于是又给他上了样式,完美解决
<div class="radio-select__list">
<el-radio-group v-model="myFilterValue">
<el-radio
v-for="item in showItems"
:key="item.id"
:label="item.id"
@click.native.prevent="handleSelRadio(item)"
>
{{ item.behaviorName }}
</el-radio>
</el-radio-group>
<div/>
function handleSelRadio(val) {
let newRadioVal;
if (myFilterValue.value === val.id) {
myFilterValue.value = null;
newRadioVal=''
} else {
myFilterValue.value = val.id;
newRadioVal=val
}
emit('updateFilterValue', newRadioVal);
}
.radio-select {
&__list {
:deep(.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner)
{
box-shadow: none;
}
}
}