续章-关于vue-cli3+element-ui 源码样式修改

直接进入主题吧

1、关于element-ui 样式修改

1、首先在vue项目的 assets下创建styles文件夹，在文件夹下再创建一个index.scss 和 element-variables.scss样式文件，如下图

在element-variables.scss 中会放element-ui改动的样式 而在index.scss会引入element-variables.scss样式

然后再main.js里面引入index.scss样式（修改index.scss里面的样式的时候会使编译变得慢-仅仅使修改index得时候，其他地方不会影响得）

首先是引入element-ui样式：

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "../../../node_modules/element-ui/packages/theme-chalk/src/index";

下面是关于竖菜单栏样式的修改 el-menu

// 左边菜单栏 样式修改
.el-menu {
  border-right: 0;
  background: transparent;
  // 有子目录的
  .el-submenu {
    .el-menu--inline {
      .el-menu-item-group {
        .el-menu-item {
          &:focus, &:hover, &.is-active {
            background-color: transparent !important;
            @extend .text-base-color;
            @extend .text-shadow-base-color;
          }
        }
      }
    }

    .el-submenu__title {
      &:focus, &:hover {
        background-color: transparent !important;
        @extend .text-base-color;
        @extend .text-shadow-base-color;
      }

      .el-icon-arrow-down {
        @extend .text-base-color;
      }
    }
  }
  // 没有子目录的
  .el-menu-item {
    &:focus, &:hover, &.is-active {
      background-color: transparent !important;
      @extend .text-base-color;
      @extend .text-shadow-base-color;
    }
  }
}

下面是关于table样式修改 el-table

// 修改table样式
.el-table {
  background-color: transparent;
  border: 1px solid transparent;

  .el-table__header-wrapper { // table - 头
    background-color: transparent;

    .el-table__header {
      font-size: 14px;
      color: white;
      padding: 0;

      .has-gutter {
        background-color: transparent;
        tr {

          border-bottom: 2px solid #EDAEFF;
          background-color: rgba(28, 129, 157, 1);
          th {
            border: 2px solid rgba(34, 159, 191, 1);
            border-right: 0 transparent;
            border-left: 0 transparent;
            color: white;
            height: 40px;
            padding: 0;
            line-height: 40px;
            background-color: transparent;
          }
        }
      }
    }
  }

  .el-table__body-wrapper {
    color: white;
    background-color: transparent;

    .el-table__body { // table - body
      background-color: transparent;

      tbody {
        border: 0;
        tr {
          //  border: 0;
          padding: 0;
          background-color: transparent;

          td {
            height: 40px;
            line-height: 40px;
            border: solid transparent;
            border-bottom: solid rgba(33, 115, 121, 0.5);
            border-width: 1px 0 1px 0;
            background-color: transparent;
            color: white;
            padding: 0;
          }
        }
        .el-table__row {
          &:focus, &:hover {
            color: #EDAEFF;
          }
        }
      }
    }
  }

  .el-table__fixed-right { // table 右边被固定的内容
    border: solid transparent;
    background-color: transparent;

    &:before {
      background-color: transparent;
    }
    .el-table__fixed-header-wrapper {
      background-color: transparent;
      font-size: 14px;
      padding: 0;
      color: white;

      .el-table__header {
        tr {
          background-color: transparent;

          th {
            border: solid transparent;
            height: 40px;
            line-height: 40px;
            color: white;
            padding: 0;
            background-color: transparent;
          }
        }
      }
    }

    .el-table__fixed-body-wrapper {
      border: solid transparent;
      background-color: transparent;
      tr {
        background-color: transparent;
        td {
          height: 40px;
          line-height: 40px;
          border: solid transparent;
          background-color: transparent;
          color: white;
          padding: 0;

          &:focus, &:hover {
            color: #EDAEFF;
          }
        }
      }
    }
  }
}

.el-table:before {
  background-color: transparent;
}

下面是关于输入框 el-input 和 el-textarea

.el-input { // 输入框
  //  box-shadow: inset 0 0 15px rgba(3, 98, 221, 1);
  border-radius: 5px;
  color: white;
  background-color: rgba(10, 17, 33, 1);

  .el-input__inner {
    color: white;
    border: 2px solid transparent;
    background-color: transparent;
    &:focus {
      @extend .border-base-style;
    }
  }
}

.el-textarea {
  border-radius: 5px;
  color: white;
  background-color: rgba(10, 17, 33, 1);
  .el-textarea__inner {
    max-height: 70px;
    color: white;
    border: 2px solid transparent;
    background-color: transparent;
    &:focus {
      @extend .border-base-style;
    }
  }
}

下拉选择框 el-select

.el-select { // 下拉选择框- 输入框样式
  background-color: rgba(10, 17, 33, 1);
  border-radius: 5px;
  .el-input {
    border-radius: 5px;
    color: white;
    background-color: transparent;

    .el-input__inner {
      color: white;
      border: 2px solid transparent;
      background-color: transparent;
      &:hover, &:focus {
        @extend .border-base-style;
      }
    }
  }
}

.el-select-dropdown { // 下拉框弹框样式
  background: rgba(6, 22, 48, 1);
  @extend .border-base-style;

  .el-scrollbar {

    .el-select-dropdown__wrap {

      .el-scrollbar__view {

        .el-select-dropdown__item {
          color: white;

          &:hover, &:focus, &.hover {
            background-color: transparent !important;
            @extend .text-base-color;
            @extend .text-shadow-base-color;
          }
          &.selected {
            @extend .text-base-color;
          }
        }
      }
    }
  }
}

.el-popper[x-placement^="bottom"] { // 下拉框三角形样式
  .popper__arrow {
    border-bottom-color: rgba(3, 98, 221, 1);
    &:after {
      border-bottom-color: rgba(3, 98, 221, 1);
    }
  }
}

弹框 el-dialog

.el-dialog {
  border-radius: 5px;
  background: rgba(6, 22, 48, 1);
  @extend .border-base-style;
  .el-dialog__header {
    .el-dialog__title {
      color: white;
    }
    .el-dialog__headerbtn {
      .el-dialog__close {
        color: white
      }
    }
  }
  .el-dialog__body {
    text-align: left;
  }
  .el-dialog__footer {

  }
}

后续...