elementui 样式修改 ---el-button && el-select

最新推荐文章于 2024-05-07 17:00:04 发布

MerlinJava

最新推荐文章于 2024-05-07 17:00:04 发布

阅读量6.3k

点赞数 3

分类专栏： elementui样式修改文章标签： css 前端 elementui

本文链接：https://blog.csdn.net/Merlin12345789/article/details/125916982

版权

elementui样式修改专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如果在全局样式下修改elementui样式则不需要穿透，在scoped下要穿透

css 使用 >>>
less 使用 /deep/
scss 使用 ::v-deep

1.el-button---按钮

<el-button icon="el-icon-search" class="common-el-button">搜索</el-button>

<el-button class="common-el-button">
      <span>搜索</span>
      <i class="el-icon-search el-icon--right"></i>
</el-button>

.common-el-button {
  width: 5rem; // 调整宽度
  height: 2rem; // 调整高度
  background: #339274; // 背景
  color: #52e6bb; //字体颜色
  border-radius: 20px; //圆角
  border: 0; //边框
  font-size: 16px; //字体大小
  //---- 按钮文字且图标垂直水平居中----
  display: flex;
  align-items: center;
  justify-content: center;
  ::v-deep span {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  //-------------------------
  // 修改图标样式
   ::v-deep .el-icon-search{
    color: brown;
  }
  //鼠标悬浮
  &:hover {
    background: #f78336;
    color: #52e6bb;
    border: 0;
  }
  //伪类向激活（在鼠标点击与释放之间发生的事件）的元素添加特殊的样式
  &:active {
    background: #f78336;
    color: #52e6bb;
    border: 0;
  }
  //获得焦点时的样式
  &:focus {
    background: #f78336;
    color: #52e6bb;
    border: 0;
  }
}

2.el-select 下拉框

<el-select
      popper-class="common-el-select-pannel"
      class="common-el-select"
      v-model="value"
      clearable
      placeholder="请选择"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
</el-select>
//选择框内的样式
.common-el-select {
  width: 6rem; // 调整宽度
  ::v-deep .el-input {
    .el-input__inner { //选择宽内样式修改
      height: 30px; //调整高度
      background: aquamarine; //选择框背景框
      color: cadetblue; //选择框字体颜色
      font-size: 12px; //选择框内字体大小
      font-weight: 500;
      border: 1px solid cadetblue;
      &:focus{
        border: 1px solid red;
      }
      //placehoder样式修改
      &::-webkit-input-placeholder{
        color: blue;
      }
    }
    .el-input__suffix {
      .el-input__suffix-inner {
        .el-select__caret { // 修改右侧图标样式
          height: 100%; 
          line-height: 100%;
          color: yellowgreen;
        }
      }
    }
  }
}

//选择面板样式 该样式不能写在scoped内
//不能添加scoped，是因为 el-popper与app.vue同级，所以在页面上直接改样式是改动不了的,可以新加个非scoped的<style></style>或放在全局css样式中；
.common-el-select-pannel {
  background: aquamarine !important; //选择面板背景色
  .el-scrollbar {
    .el-select-dropdown__wrap {
      .el-select-dropdown__list {//选择列表
        .el-select-dropdown__item {//列表行
          font-size: 12px;
          color: blueviolet;
        }
        .el-select-dropdown__item.hover {//列表行鼠标悬浮
          background: aqua;
          color: blueviolet;
        }
        .el-select-dropdown__item.selected {//已选中列表行
          color: rebeccapurple;
        }
      }
    }
  }
}