Element-ui 标签页el-radio-button左边框不显示问题

想实现一个tab切换的功能 看tabs组件挺相似的直接拿来用 默认是下边的效果

在这里插入图片描述

分开点 发现右边的白的按钮左边框没了
11

选中右边 左边按钮的边框正常
在这里插入图片描述

emmmm
选择按钮后查看样式
发现他有个border-left:0
Element-ui 标签页el-radio-button左边框不显示问题_第1张图片
去掉之后显示正常
在代码里添加border属性后显示正常了 但又出现新的问题了
在这里插入图片描述
在这里插入图片描述

选中的时候左边有间隙 emmmm
查看元素样式 发现选中的一瞬间多了这个样式
在这里插入图片描述

Element-ui 标签页el-radio-button左边框不显示问题_第2张图片
把-1改成-8 发现这个也跟着变了
在这里插入图片描述
改为0 正常了
在这里插入图片描述

在这里插入图片描述
后来发现不加边框 直接设置盒阴影X轴-1也是可以的

 ::v-deep(.el-radio-button) {
    span {
      box-shadow: 0px 0px 0px #e9e9e9;
      border-left: 1px solid #e9e9e9;
    }
  }
或者
 ::v-deep(.el-radio-button) {
    span {
       box-shadow: -1px 0px 0px #e9e9e9;
    }
  }

你可能感兴趣的:(javascript,前端,vue,elementui)