el-radio重复点击取消选择,动态变更颜色

137 阅读1分钟

el-radio 实现重复点击取消选中

<el-radio
    :style="{'--checked-color': selsectColorChanges(e),
    '--checked-thickness': checkedThickness(e),
    '--back-color': backColor(e),
    '--label-display': labelDisplay(e)}"
    @click.native.prevent="radioClick(lqbel)"
      v-for="(e, index) in item.labels"
      :label="lqbel"
      size="large"
      >{{ e }}
</el-radio>

把选中方式改为@click.native.prevent 传入label值来实现

动态修改单选颜色

:style="{'--checked-color': selsectColorChanges(e),
    '--checked-thickness': checkedThickness(e),
    '--back-color': backColor(e),
    '--label-display': labelDisplay(e)}"
var(--label-display)

用v-bind = 来把css样式值传入style中定义的变量中实现

image.png