样式代码小总结

1.弹窗居中显示，内容过高自行滚动。

 .dialog /deep/.el-dialog {
   display: flex;
   flex-direction: column;
   margin: 0 !important;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-height: calc(100% - 200px);
   max-width: calc(100% - 100px);
   .el-dialog__body {
     flex: 1;
     overflow: auto;
   }
 }

1.去除el-table上selection column上最顶端的checkbox框，让table 无法进行全选

/deep/.el-table {
  th {
    .cell {
      &::before {
        content: "";
        position: absolute;
      }
      .el-checkbox__inner {
        display: none;
        position: relative;
      }
    }
  }
}

遇到问题1

vue-cli3安装scss时，一直报错 ： Syntax Error: TypeError: this.getOptions is not a function

查了一下发现,是因为安装的sass-loader版本太高了。。。

# 卸载
 npm uninstall sass-loader
# 重装指定版本
 npm install sass-loader@7.0.1 --save-dev

卸载后，重新安装即可解决问题。

开始编写简易的全局样式scss文件

• 文件夹路径：

|---src
|----assets
|-----scss
|------elementStyle //各个组件样式的重写
|-------button.scss
|-------checkbox.scss
|-------index.scss
|-------input.scss
|-------inputNumber.scss
|-------radio.scss
|------style.scss //样式输出文件
|------varible.scss //定义的变量和公共mixin 

当然这个可以根据自己的喜好自行调整

varible.scss:

/************* 字体大小 *******************/
$titleMain-font-size: 28px; //h1 大标题
$titleSub-font-size: 24px; // h2 二级标题
$large-font-size: 18px; // h2 标题
$medium-font-size: 16px; // h3 小标题
$small-font-size: 14px; // h4 正文
$mini-font-size: 12px;

/************* 字体类型 *****************/
$font-family: "Microsoft YaHei", sans-serif; // 中文字体

/********* 颜色 **********/
$white-color: #fff; // 白色
$black-color: #000; // 黑色
$pagination-background-color: #bdcbe5; //分页背景色

// 主色
$primary-light-color: #fd7560;
$primary-color: #155bd4;
$primary-deep-color: #fd3415;
// 成功色
$success-light-color: #26d2be;
$success-color: #2da641;
$success-deep-color: #04bca6;
// 警告色
$warning-light-color: #fd924e;
$warning-color: #ed6a0c;
$warning-deep-color: #f2711f;
// 危险色
$danger-light-color: #f36161;
$danger-color: #d40000;
$danger-deep-color: #dc4646;
// info灰色
$info-color: #778ca3;
//字体颜色
$color-text-primary: #646566; //⽂字⾊ 主文字色
$color-text-regular: #323233; //⽂字⾊ （默认⾊）
$color-text-placeholder: #c8c9cc; // 默认提⽰⽂字文字和disable
$black-light-color: #778ca3; // 用于副标题、或辅助信息的文字

//border
$border-color-base: #112233; //边框、线⾊

//background
$background-color-base: #f7f8fa; //背景色

/*********** 尺寸 ************/
$header-height: 60px; // 页头菜单栏的高度
$normal-space: 20px; // 页面tab 标题与内容模块之间的间隔
$small-form-field-height: 34px; // Form表单的项的高度
$page-min-width: 1200px; // 浏览器页面的最小宽度
$aside-menu-width: 180px; // 左侧菜单栏的宽度
$form-label-width: 220px; // form标签的宽度
$button-height: 40px; // button高度

//声明一些公共样式 mixin
@mixin font-common-style {
  font-size: $medium-font-size;
  font-family: $font-family;
}
@mixin medium-button-common-style {
  border-radius: 6px;
}

style.scss:

@import "@/assets/scss/variable.scss"; //定义的变量和公共mixin
@import "@/assets/scss/elementStyle/index.scss";

button.scss:

/deep/.el-button {
  &.el-button--default {
    @include font-common-style;
    @include medium-button-common-style;
    background: $background-color-base;
    border: 1px solid $background-color-base;
  }
  &.el-button--primary {
    @include font-common-style;
    @include medium-button-common-style;
    background: $primary-color;
    border: 1px solid $primary-color;
  }
  &.el-button--success {
    @include font-common-style;
    @include medium-button-common-style;
    background: $success-color;
    border: 1px solid $success-color;
  }
  &.el-button--info {
    @include font-common-style;
    @include medium-button-common-style;
    background: $info-color;
    border: 1px solid $info-color;
  }
  &.el-button--warning {
    @include font-common-style;
    @include medium-button-common-style;
    background: $warning-color;
    border: 1px solid $warning-color;
  }
  &.el-button--danger {
    @include font-common-style;
    @include medium-button-common-style;
    background: $danger-color;
    border: 1px solid $danger-color;
  }
}

checkbox.scss:

/deep/.el-checkbox-group {
  .el-checkbox {
    .el-checkbox__input {
      vertical-align: text-top;
      &.is-checked {
        .el-checkbox__inner {
          border-color: $primary-color;
          background: $primary-color;
        }
        & + .el-checkbox__label {
          color: $primary-color;
        }
      }
      .el-checkbox__inner {
        width: $medium-font-size;
        height: $medium-font-size;
        &:after {
          top: 2px;
          left: 5px;
        }
      }
    }
    .el-checkbox__label {
      @include font-common-style;
    }
  }
}

index.scss:

@import "./button.scss";
@import "./radio.scss";
@import "./checkbox.scss";
@import "./input.scss";
@import "./inputNumber.scss";

input.scss:

/deep/.el-input {
  .el-input__inner {
    @include font-common-style;
    border: 1px solid $color-text-placeholder;
    &:focus {
      border: 1px solid $primary-color;
    }
  }
}

inputNumber.scss:

/deep/.el-input-number {
  .el-input {
    .el-input__inner {
      @include font-common-style;
      border: 1px solid $color-text-placeholder;
      &:focus,
      &:hover {
        border: 1px solid $primary-color;
      }
    }
  }
  .el-input-number__decrease,
  .el-input-number__increase {
    &:hover {
      color: $primary-color;
    }
    color: $color-text-primary;
  }
}

radio.scss:

/deep/.el-radio-group {
  .el-radio {
    .el-radio__input {
      &.is-checked {
        .el-radio__inner {
          border-color: $primary-color;
          background: $primary-color;
        }
        & + .el-radio__label {
          color: $primary-color;
        }
      }
      .el-radio__inner {
        width: $medium-font-size;
        height: $medium-font-size;
        line-height: $medium-font-size;
        &:after {
          width: $medium-font-size / 4;
          height: $medium-font-size / 4;
        }
      }
    }
    .el-radio__label {
      @include font-common-style;
    }
  }
}

页面引用

scss.vue：

<template>
  <div>
    <h1>button:</h1>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <h1>radio:</h1>
    <el-radio-group v-model="radio">
      <el-radio :label="3">上海</el-radio>
      <el-radio :label="6">北京</el-radio>
      <el-radio :label="9">深圳</el-radio>
    </el-radio-group>
    <h1>checkbox:</h1>
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="复选框 A"></el-checkbox>
      <el-checkbox label="复选框 B"></el-checkbox>
      <el-checkbox label="复选框 C"></el-checkbox>
    </el-checkbox-group>
    <h1>input:</h1>
    <div style="width: 30%; margin: 0 auto">
      <el-input v-model="input" placeholder="请输入内容"></el-input>
    </div>
    <h1>inputNumber:</h1>
    <div style="width: 30%; margin: 0 auto">
      <el-input-number
        v-model="num"
        @change="handleChange"
        :min="1"
        :max="10"
        label="描述文字"
      ></el-input-number>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: 3,
      checkList: ["复选框 A"],
      input: "",
      num: 1,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/style.scss";
</style>

未完待续...