elementUI——tab定位和渐变色图标

最新推荐文章于 2023-12-24 00:09:13 发布

一条大河全靠浪

最新推荐文章于 2023-12-24 00:09:13 发布

阅读量690

点赞数

分类专栏： elementUI 文章标签： elementui 前端 css

本文链接：https://blog.csdn.net/HYeeee/article/details/120528841

版权

elementUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

tab定位问题

当tab中的某个内容需要以整个tab来定位时，比如我在tabs栏右上角放一个input组件，这个input是属于某一个tab页中的。

1、先改变原始content的定位
 ::v-deep .el-tabs__content {
    position: static;
  }
  
2、 tab定位设置成 position: relative

3、右上角，组件定位
 .input{
  position: absolute;
  right: 20px;
  top: 10px;
 }

字体图标使用渐变色

//  仅适用于Chrome和Safari，新版firefox也能正常使用
 @mixin font-gradient($bg) {
   background-image: $bg;
   //背景的绘制区域为文字部分
   background-clip: text;
   -webkit-text-fill-color: transparent
 }
// 使用
 @include font-gradient(linear-gradient(180deg, #75B8FF 0%, #3261FC 80%));