element-ui 单选-再次选中取消

最新推荐文章于 2024-06-25 20:22:21 发布

好菜的程序媛

最新推荐文章于 2024-06-25 20:22:21 发布

阅读量4.4k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/Gomeer/article/details/97369735

版权

vue 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

使用.native修饰符，（native修饰符的作用：你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native，可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，但对于普通的HTML标签是没作用的）

html

<el-radio-group v-model="selects.xc">
   <el-radio-button label="有瑕疵" @click.native.prevent = 'handleCancel("有瑕疵")'></el-radio-button>
   <el-radio-button label="无瑕疵" @click.native.prevent = 'handleCancel("无瑕疵")'></el-radio-button>
</el-radio-group>

methods

handleCancel(value){
    this.selects.xc = value == this.selects.xc ? '' : value
},

方法上加了.native 和 .prevent 后，样式会有些改变，添加以下css

css

.el-radio-button:focus:not(.is-focus):not(:active) {
  -webkit-box-shadow: 0 0 2px 2px #fff;
  box-shadow: 0 0 2px 2px #fff;
}
.el-radio-button__inner {
  border-left: 1px solid #d8dce5
}