修改el-tooltip样式

不说废话，先看图

组件风险等级.jpg

UI设计的样式是提示边框有阴影效果，且在多处使用，方位不确定。

<style lang="scss">
/* 修改弹窗边框 这里用的是light主题，所以是is-light */
.el-tooltip__popper.is-light {
  border: none !important;
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05), 0px 3px 5px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.1) !important;
}

/* 修改箭头边框 这里方位是right，所以 x-placement^="right" 并且是设置 border-right-color 的颜色*/
.el-tooltip__popper.is-light[x-placement^="right"] .popper__arrow {
  border-right-color: #eaeaea !important;
}

.el-tooltip__popper[x-placement^="right"] .popper__arrow {
  border-right-color: #eaeaea !important;
}

/* 修改箭头背景颜色
.el-tooltip__popper[x-placement^=right] .popper__arrow {
  border-right-color: #c02460!important;
}

.el-tooltip__popper[x-placement^=right] .popper__arrow:after {
  border-right-color: #c02460!important;
} */
</style>

当方位不确定的时候，岂不是每个方位都是要像上面一样定义一遍？当然不用那么麻烦啦，我们可以使用scss进行简写：

<style lang="scss">
/* @each指令的格式是@each $var in $list , $var可以是任何变量名，比如$placement，而$list是一连串的值，也就是值列表。 使用 #{} 插值语句将变量包裹，避免运算。*/
$placement-list: "top" "top-start" "top-end" "bottom" "bottom-start" "bottom-end" "left" "left-start" "left-end" "right" "right-start" "right-end";

.el-tooltip__popper.is-light {
  border: none !important;
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05), 0px 3px 5px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.1) !important;
}

@each $placement in $placement-list {
  .el-tooltip__popper.is-light[x-placement^=#{$placement}] .popper__arrow {
    border-#{$placement}-color: #eaeaea !important;
  }

  .el-tooltip__popper[x-placement^=#{$placement}] .popper__arrow {
    border-#{$placement}-color: #eaeaea !important;
  }
</style>

但是这样的写法是有问题的，没有 border-top-start-color、border-top-end-color 这种标签，scss貌似没有像js中startsWith这样的方法，这里使用@if判断：

<style lang="scss">
$placement-list: "top" "top-start" "top-end" "bottom" "bottom-start" "bottom-end" "left" "left-start" "left-end" "right" "right-start" "right-end";

.el-tooltip__popper.is-light {
  border: none !important;
  box-shadow:
    0px 1px 10px 0px rgba(0, 0, 0, 0.05),
    0px 3px 5px 0px rgba(0, 0, 0, 0.08),
    0px 2px 4px -1px rgba(0, 0, 0, 0.1) !important;
}

@each $placement in $placement-list {
  .el-tooltip__popper.is-light[x-placement^=#{$placement}] .popper__arrow {
    @if $placement=="top" or $placement=="top-start" or $placement=="top-end" {
      border-top-color: #eaeaea !important;
    }

    @else if $placement=="bottom" or $placement=="bottom-start" or $placement=="bottom-end" {
      border-bottom-color: #eaeaea !important;
    }

    @else if $placement=="left" or $placement=="left-start" or $placement=="left-end" {
      border-left-color: #eaeaea !important;
    }

    @else {
      border-right-color: #eaeaea !important;
    }
  }

  .el-tooltip__popper[x-placement^=#{$placement}] .popper__arrow {

    @if $placement=="top" or $placement=="top-start" or $placement=="top-end" {
      border-top-color: #eaeaea !important;
    }

    @else if $placement=="bottom" or $placement=="bottom-start" or $placement=="bottom-end" {
      border-bottom-color: #eaeaea !important;
    }

    @else if $placement=="left" or $placement=="left-start" or $placement=="left-end" {
      border-left-color: #eaeaea !important;
    }

    @else {
      border-right-color: #eaeaea !important;
    }
  }
}
</style>

大家如果有好的解决办法，请赐教~