极简方法让 Ant Design Vue 的 Radio 单选框单击时不弹出外围光圈边框

点击 Ant Design Vue 的 Radio 单选框时会出现如上类似于 outline 或 box-shadow 类的框框，但通过 CSS 进行屏蔽均无效。


在自定义配色时这个框框的浅蓝色在自定义配色按钮外围常常显得不相匹配

解决方法

• 在 a-radio-button 里配置点击事件 @click="cancleFocus($event)" ，传出点击事件 $event

  <a-radio-button
    value="INFO"
    style="border-right: 0"
    @click="cancleFocus($event)"
  >
    <a-icon type="info-circle" /> 
    信息 INFO
  </a-radio-button>

• 在 methods 里配置方法，用传入的 点击事件.target 获得 a-radio-button 对象自身，然后调用其 blur() 方法使其移除焦点，从而达到不显示该效果的作用

methods: {
    cancleFocus(e) {
        e.target.blur()
    }
}

本次自定义 Radio 单选框使用 CSS 覆盖实现

.ant-radio-button-wrapper:not(:first-child)::before {
    width: 0;
}

.ant-radio-button-wrapper-checked:nth-child(1),
.ant-radio-button-wrapper-checked:nth-child(1):hover {
    background: #1890ff10;
}

.ant-radio-button-wrapper:nth-child(1):hover,
.ant-radio-button-wrapper-checked:nth-child(1) {
    color: #1890ff;
    border-color: #1890ff;
}

.ant-radio-button-wrapper-checked:nth-child(2),
.ant-radio-button-wrapper-checked:nth-child(2):hover {
    background: #fa8c1610;
}

.ant-radio-button-wrapper:nth-child(2):hover,
.ant-radio-button-wrapper-checked:nth-child(2) {
    color: #fa8c16;
    border-color: #fa8c16;
}

.ant-radio-button-wrapper-checked:nth-child(3),
.ant-radio-button-wrapper-checked:nth-child(3):hover {
    background: #f5222d10;
}

.ant-radio-button-wrapper:nth-child(3):hover,
.ant-radio-button-wrapper-checked:nth-child(3) {
    color: #f5222d;
    border-color: #f5222d;
}

.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
    box-shadow: unset;
}