element-ui 修改 el-popper 的样式（使用scss 全局修改）

最新推荐文章于 2024-07-31 15:48:21 发布

原创最新推荐文章于 2024-07-31 15:48:21 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

这篇博客详细介绍了如何使用SASS在CSS中定义自定义的工具提示（tooltip）样式，包括设置不同方向的箭头颜色、背景色以及边框颜色，并展示了如何为内容区域添加深色背景、文字颜色以及内阴影效果，提升UI视觉体验。

部署运行你感兴趣的模型镜像

//提示
//箭头颜色
$tooltipTextColor: #fff;
$tooltipBgColor: rgba(21,52,122,1);
$tooltipBorderColor: #20739e;
.el-tooltip__popper{
  //上、下、左、右 四个方向的箭头
  @each $direction in top, bottom, left, right {
    //边框色
    &[x-placement^=#{$direction}] .popper__arrow{
      border-#{$direction}-color: $tooltipBorderColor;
      &::after{
        //背景色
        border-#{$direction}-color: $tooltipBgColor;
      }
    }
  }
}

//内容
.el-tooltip__popper.is-dark{
  background: rgba(18,34,70,1) !important;
  color: $tooltipTextColor;
  border: 1px solid $tooltipBorderColor;
  box-shadow: 0 0 8px 3px #173c90 inset;
}

您可能感兴趣的与本文相关的镜像