vue3实现单选效果且再次点击可取消选择

最新推荐文章于 2024-04-04 10:05:31 发布

47321

最新推荐文章于 2024-04-04 10:05:31 发布

阅读量2.1k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_62426826/article/details/126894127

版权

最近碰到一个需求，需要实现单选效果，且再次点击之后可取消选择。

拿到这个需求，自然而然想到了用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;
    }
        }
 }