记录element UI问题持续归纳

从安装elementUI框架到使用遇到的样式问题记录归纳，首先先安装elementUI

输入命令行：

npm i element-ui -S

 

 

 安装成功后，再main.js里引入elementUI和样式文件

import ElementUI from 'element-ui'
@import "~element-ui/packages/theme-chalk/src/index"

===============================================================================

改变主题色

参考elementUI官网提供的方法之一，新建一个文件夹例如element-variables.scss

/* 改变主题色变量 */
$--color-primary: #00c3f3;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

然后再在main.js引入element-variables.scss即可

==========================================================================================

switch 开关

elementUI中的开关el-switch默认true或false,如果后台传过来0或1似乎会自动转义成false，解决方案使用了el-switch的一个属性

 

 

 

<el-switch v-model="swicth1" :active-value = '1' :inactive-value = '0' ></el-switch>

==========================================================================================

drawer 抽屉

会有两个样式问题：

（1）点击弹窗会出现边框；

（2）点击标题会出现边框；

靠度娘完美解决

 

.el-drawer:focus
  outline: none

 

:focus
  outline: 0

===========================================================================================

---------------------------------待补充 2020.9.16-------------------------------