使用.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
}

 

Logo

前往低代码交流专区

更多推荐