element-ui 单选-再次选中取消
使用.native修饰符,(native修饰符的作用:你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on的修饰符.native,可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签,但对于普通的HTML标签是没作用的)html<el-radio-group v-model="selects.xc"><el-radio-bu...
·
使用.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
}
更多推荐
已为社区贡献13条内容
所有评论(0)