element-ui全局引入、修改组件样式_element-ui 组件内样式

项目终端安装依赖

npm i element-ui -S
1

项目main.js引入（全局引入）

import ElementUI from "element-ui";
Vue.use(ElementUI);
ElementUI.Dialog.props.closeOnClickModal.default = false; //按个人需要，此项目需要设置el-dialog 默认点击遮照为不关闭
1
2
3

样式文件夹
一般会在项目中新开一个样式的文件夹如style，用来改样式。可以创建几个样式文件reset.scss、common.scss等，但在style下的index.scss中统一引用。

//index.scss中引其他样式文件
@import 'reset';
@import 'common';
1
2
3

//项目main.js引入

import "./style/index.scss";
1

修改样式
以改按钮为例，一般是页面中使用element组件，然后在浏览器f12控制台定位到元素，获取元素的样式名然后去写一套优先级较高的样式。

.el-button {
	font-size: 12px;
	&.el-button--default,
	&.el-button--primary,
	&.el-button--danger,
	&.el-button--plain {//设置几种按钮的高度
	   height: 28px;
	   line-height: 28px;
	}
}
1
2
3
4
5
6
7
8
9
10

另外，页面中改也可以使用::v-deep修改element样式。

//页面中
<style scoped>//scoped能使样式不污染全局样式，只作用到当前页面
::v-deep .el-button--danger{
	background-color:yellow
}
</style>
1
2
3
4
5
6