element radio ,单击取消

                  <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版权协议,转载请附上原文出处链接和本声明。