Element ui 换主题色
https://element.eleme.cn/#/zh-CN/theme/preview
在Element ui 官网选择颜色 然后按下载得到对应的主题包。
把主题文件放在项目中,在main.js 里面引用即可。
Element ui 按需加载组件
第一步
npm install babel-plugin-component -D
第二步
在babel.config.js 文件修改下
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
第三步
新建js文件---->element-ui.js 组件按需引入
import Vue from 'vue';
import {
Pagination,
Dialog,
Dropdown,
DropdownMenu,
DropdownItem,
Menu,
Submenu,
MenuItem,
MenuItemGroup,
Input,
InputNumber,
Radio,
RadioGroup,
RadioButton,
Checkbox,
CheckboxButton,
CheckboxGroup,
Switch,
Select,
Option,
OptionGroup,
Button,
ButtonGroup,
Table,
TableColumn,
DatePicker,
TimeSelect,
TimePicker,
Breadcrumb,
BreadcrumbItem,
Form,
FormItem,
Tag,
Tree,
Icon,
Row,
Col,
Badge,
Card,
Container,
Header,
Aside,
Main,
Footer,
Loading,
MessageBox,
Message,
} from 'element-ui';
Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Badge);
Vue.use(Card);
// Vue.use(Collapse);
// Vue.use(CollapseItem);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Loading.directive);
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$message = Message;
第四步
在main.js引用 刚刚新建的js文件
import './element-ui';
element-ui 组件自定义命名
例如项目想同时使用element-ui 和Ant Design 组件,但是它们的Message组件命名有冲突。此时可以给Message组件重新命名。
//重命名
Vue.prototype.$elementMessage = Message
Vue.prototype.$elementMessageBox = MessageBox
Vue.prototype.$elementAlert = MessageBox.alert
Vue.prototype.$elementConfirm = MessageBox.confirm
//调用的时候
this.$elementMessage.info('加载中。。。')
在js文件中直接使用element-ui组件
使用场景—>可以用在request.js
import { MessageBox, Message } from "element-ui";
function innerConfirm(title) {
return MessageBox.confirm(title, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return true;
}).catch(() => {
Message({
type: 'info',
message: '操作已取消'
});
return false;
});
}