使用组件库时是经常需要根据需求进行修改,这次就遇到一个radio单选按钮去除边框的需求。
问题
而这次去除边框有一下几个问题解决:
- 去除按钮边框
- 去除按钮的before伪元素
- 去除按钮选中后的外边框outline
- 去除未选中按钮的阴影
效果展示
代码
<a-radio-group
v-model="queryParam.operation"
@change="onRadioChange"
default-value="0"
>
<a-radio-button value="0">
待审核
</a-radio-button>
<a-radio-button value="1">
已完成
</a-radio-button>
<a-radio-button value="2">
审核未通过
</a-radio-button>
<a-radio-button value="3">
提现失败
</a-radio-button>
<a-radio-button value="4">
已取消
</a-radio-button>
</a-radio-group>
/deep/ .ant-radio-button-wrapper{
border: none;
}
/deep/ .ant-radio-button-wrapper:before{
content: none;
}
/deep/ .ant-radio-button-wrapper:focus-within{
outline: none;
}
/deep/ .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
box-shadow: 0 0 0 0 #1890ff;
}