Ant-Design-Of-Vue radio-group单选按钮去除边框只留文字

463 阅读1分钟
 使用组件库时是经常需要根据需求进行修改,这次就遇到一个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;
}