elementUI 样式小总结

样式代码小总结

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-numberv-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> 

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享