<el-radio-group v-model="baseInfoForm.cornerMarkId">
<el-row type="flex" :gutter="30">
<el-col v-for="item in cornerMarkerUrlList" :key="item.id">
<el-radio
:label="item.id"
style="margin-top:10px"
@click.native.prevent="callbackChange(item.id)"
>
<div style="width:0px"></div>
</el-radio>
</el-col>
</el-row>
</el-radio-group>
上述代码因为实际场景中的样式问题,所以会有冗余,实际操作中可以按照实际场景选择。
callbackChange(el) {
el == this.baseInfoForm.cornerMarkId
? (this.baseInfoForm.cornerMarkId = '')
: (this.baseInfoForm.cornerMarkId = el);
}
原理其实是阻止原本的click动作,覆盖原来的click函数。
但是如果使用element-ui的话,可能会出现一点小小的样式问题, 可能是阻断原生的click动作而导致的
可以覆盖原有的样式解决这个问题
.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
-webkit-box-shadow: 0 0 2px 2px #0000;
box-shadow: 0 0 2px 2px #0000;
}
版权声明:本文为qq_32734639原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。