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