不说废话，先看图
组件风险等级.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>
大家如果有好的解决办法，请赐教~
