浏览代码

Новый способ импортирования компонентов из element-ui,
теперь с динамической загрузкой

Book Pauk 6 年之前
父节点
当前提交
e0b756091b
共有 1 个文件被更改,包括 43 次插入135 次删除
  1. 43 135
      client/element.js

+ 43 - 135
client/element.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 
+
 /*
 import ElementUI from 'element-ui';
 import './theme/index.css';
@@ -9,141 +10,47 @@ Vue.use(ElementUI, { locale });
 */
 
 //------------------------------------------------------
-import locale from 'element-ui/lib/locale/lang/ru-RU';
+//import './theme/index.css';
+
+import './theme/icon.css';
+import './theme/tooltip.css';
+
+import ElMenu from 'element-ui/lib/menu'; 
+import './theme/menu.css';
+
+import ElMenuItem from 'element-ui/lib/menu-item';
+import './theme/menu-item.css';
+
+import ElButton from 'element-ui/lib/button';
+import './theme/button.css';
+
+const ElTabs = () => import('element-ui/lib/tabs');
+import './theme/tabs.css';
 
-import {
-//  Pagination,
-//  Dialog,
-//  Autocomplete,
-//  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,
-  Popover,
-  Tooltip,
-  Breadcrumb,
-  BreadcrumbItem,
-  Form,
-  FormItem,*/
-  Tabs,
-  TabPane,
-  /*Tag,
-  Tree,
-  Alert,
-  Slider,
-  Icon,
-  Row,
-  Col,
-  Upload,
-  Progress,
-  Badge,
-  Card,
-  Rate,
-  Steps,
-  Step,
-  Carousel,
-  CarouselItem,
-  Collapse,
-  CollapseItem,
-  Cascader,
-  ColorPicker,
-  Transfer,*/
-  Container,
-//  Header,
-  Aside,
-  Main,
-//  Footer,
-//  Loading,
-//  MessageBox,
-//  Message,
-  Notification
-} from 'element-ui';
-
-//Vue.use(Pagination);
-//Vue.use(Dialog);
-//Vue.use(Autocomplete);
-//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(Popover);
-Vue.use(Tooltip);
-Vue.use(Breadcrumb);
-Vue.use(BreadcrumbItem);
-Vue.use(Form);
-Vue.use(FormItem);*/
-Vue.use(Tabs);
-Vue.use(TabPane);
-/*Vue.use(Tag);
-Vue.use(Tree);
-Vue.use(Alert);
-Vue.use(Slider);
-Vue.use(Icon);
-Vue.use(Row);
-Vue.use(Col);
-Vue.use(Upload);
-Vue.use(Progress);
-Vue.use(Badge);
-Vue.use(Card);
-Vue.use(Rate);
-Vue.use(Steps);
-Vue.use(Step);
-Vue.use(Carousel);
-Vue.use(CarouselItem);
-Vue.use(Collapse);
-Vue.use(CollapseItem);
-Vue.use(Cascader);
-Vue.use(ColorPicker);
-Vue.use(Transfer);*/
-Vue.use(Container);
-//Vue.use(Header);
-Vue.use(Aside);
-Vue.use(Main);
-//Vue.use(Footer);
+const ElTabPane = () => import('element-ui/lib/tab-pane');
+import './theme/tab-pane.css';
+
+import ElContainer from 'element-ui/lib/container';
+import './theme/container.css';
+
+import ElAside from 'element-ui/lib/aside';
+import './theme/aside.css';
+
+import ElMain from 'element-ui/lib/main';
+import './theme/main.css';
+
+const ElNotification = () => import('element-ui/lib/notification');
+import './theme/notification.css';
+
+const components = {
+    ElMenu, ElMenuItem, ElButton, ElTabs, ElTabPane,
+    ElContainer, ElAside, ElMain,
+    ElNotification
+};
+
+for (let [name, comp] of Object.entries(components)) {
+    Vue.component(name, comp);
+}
 
 //Vue.use(Loading.directive);
 
@@ -155,4 +62,5 @@ Vue.use(Main);
 Vue.prototype.$notify = Notification;
 //Vue.prototype.$message = Message;
 
-Vue.prototype.$ELEMENT = { locale };
+import locale from 'element-ui/lib/locale/lang/ru-RU';
+Vue.prototype.$ELEMENT = { locale };