element plus中el-radio选中之后再次点击取消选中
需求要求是单选操作,再次点击取消勾选
Vue中的事件修饰符:
1.prevent:阻止默认事件;
2.stop:阻止事件冒泡;
3.once:事件只触发一次;
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件;
代码
<div>
<el-radio-group v-model="ruleForm.radio2">
<el-radio :label="'FACE'"
@click.prevent="radioChange('FACE')">面容</el-radio>
<el-radio :label="'FINGERPRINT'"
@click.prevent="radioChange('FINGERPRINT')">指纹</el-radio>
<el-radio :label="'IC'"
@click.prevent="radioChange('IC')">刷卡
</el-radio-group>
</div>
js代码
const radioChange = (e) => {
e === data.ruleForm.radio2 ? (data.ruleForm.radio2 = "") : (data.ruleForm.radio2 = e);
}
vue2中的写法
(.native修饰符在vue3中已经移除)
<div>
<el-radio-group v-model="ruleForm.radio2">
<el-radio :label="'FACE'"
@click.native.prevent="radioChange('FACE')">面容</el-radio>
<el-radio :label="'FINGERPRINT'"
@click.native.prevent="radioChange('FINGERPRINT')">指纹</el-radio>
<el-radio :label="'IC'"
@click.native.prevent="radioChange('IC')">刷卡
</el-radio-group>
</div>
radioChange = (e) => {
e === this.ruleForm.radio2 ? (this.ruleForm.radio2 = "") : (this.ruleForm.radio2 = e);
}