Vue项目中按需引入ElementUI组件库以及Message的二次封装

1. 动态引入ElementUI组件

import {
  Menu,
  MenuItem,
  Submenu,
  Input,
  Carousel,
  CarouselItem,
  Button,
  Row,
  Col,
  Tabs,
  TabPane,
  Dropdown,
  DropdownItem,
  DropdownMenu,
  Rate,
  Dialog,
  Form,
  FormItem,
  Badge,
  Table,
  TableColumn,
  Pagination,
  Loading,
  Tooltip,
} from "element-ui";
const comps = [
  Menu,
  MenuItem,
  Submenu,
  Input,
  Carousel,
  CarouselItem,
  Button,
  Row,
  Col,
  Tabs,
  TabPane,
  Dropdown,
  DropdownItem,
  DropdownMenu,
  Rate,
  Dialog,
  Form,
  FormItem,
  Badge,
  Table,
  TableColumn,
  Pagination,
  Tooltip,
];

export default {
  install(Vue) {
    comps.map((c) => {
      Vue.component(c.name, c);
    });
    // 单独引入Loading组件
    Vue.use(Loading);
    Vue.use(Loading.directive);
  },
};

import Vue from "vue";
import App from "./App.vue";
import element from "./plugins/element";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(element);

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");

2. 二次封装Message

解决message多次出现的问题

/**
 * 二次封装message 避免多个消息提示同时出现
 */
import { Message } from "element-ui";
let messageInstance = null;
const resetMessage = (options) => {
  if (messageInstance) {
    messageInstance.close();
  }
  messageInstance = Message(options);
};
["error", "success", "info", "warning"].forEach((type) => {
  resetMessage[type] = (options) => {
    if (typeof options === "string") {
      options = {
        message: options,
      };
    }
    options.type = type;
    return resetMessage(options);
  };
});
export const message = resetMessage;

import { MessageBox} from "element-ui";

import { message } from "./message";
  

export default {
  install(Vue) {
    Vue.prototype.$message = message;
    Vue.prototype.$confirm = MessageBox.confirm;
  },
};