After selecting el-radio in element plus, click again to cancel the selection

The demand requirement is a single-select operation, click again to uncheck
the event modifier in Vue:
1.prevent: prevent the default event;
2.stop: prevent the event from bubbling;
3.once: the event is only triggered once;
4.capture: use The capture mode of the event;
5.self: the event is only triggered when the event.target is the element of the current operation;
code

 <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 code

 const radioChange = (e) => {
    
    
    e === data.ruleForm.radio2 ? (data.ruleForm.radio2 = "") : (data.ruleForm.radio2 = e);
  }

Written in vue2
(.native modifier has been removed in 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);
}