ElementPlus Radio 实现双击取消选择的效果

效果如下所示，在element plus中是没有直接双击取消选择的。但是我可以通过代码去实现

 

基本思路是：点击事件 和 变更事件会依次触发。如果只有单击事件没有变更事件触发，则说明点击到的是同一位置。
将监听值还原即可

<script>

const showMode = ref('0');

//通过时间 和 缓存值，来判断是否是点击事件。实现取消选择模式
let showModeChangeTime:Date = new Date();
const showModeChanged = (value: string) => {
  showModeChangeTime = new Date();
}

const showModeClick = () => {
  setTimeout(() => {
    //延迟触发，判断是否是点击事件。 如果没有触发  showModeChanged 说明是点击当前元素，则取消选择。 
    let now = new Date();
    console.log('showModeClick',now.getTime() - showModeChangeTime.getTime())
    if(now.getTime() - showModeChangeTime.getTime() > 50){
      showMode.value = '0';
    }
  }, 0);
}

</script>




<template>

  <el-radio-group v-model="showMode" size="small" fill="#6cf" @change="showModeChanged" @click="showModeClick" style="margin-left: 20px;">
      <!-- <el-radio-button label="无" value="0" /> -->
      <el-radio-button label="Die数量" value="1" />
      <el-radio-button label="Die良率" value="2" />
      <el-radio-button label="Die占比" value="3" />
    </el-radio-group>
</template>