Переглянути джерело

修改elemen-ui组件引用方式,重写el-dialog

zhanglb 3 роки тому
батько
коміт
636136277e

+ 20 - 0
front-vue/src/components/Dialog/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <zap-dialog :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners">
+    <slot></slot>
+    <slot name="title"></slot>
+    <slot name="footer"></slot>
+  </zap-dialog>
+</template>
+
+<script>
+import {Dialog} from 'element-ui'
+export default {
+    components: {
+      "zap-dialog": Dialog
+    },
+    inheritAttrs: false
+}
+</script>
+
+<style lang="scss">
+</style>

+ 304 - 0
front-vue/src/element-ui.js

@@ -0,0 +1,304 @@
+/* Automatically generated by './build/bin/build-entry.js' */
+
+import {
+  Pagination,
+  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,
+  MessageBox,
+  Breadcrumb,
+  BreadcrumbItem,
+  Form,
+  FormItem,
+  Tabs,
+  TabPane,
+  Tag,
+  Tree,
+  Alert,
+  Notification,
+  Slider,
+  Loading,
+  Icon,
+  Row,
+  Col,
+  Upload,
+  Progress,
+  Spinner,
+  Message,
+  Badge,
+  Card,
+  Rate,
+  Steps,
+  Step,
+  Carousel,
+  Scrollbar,
+  CarouselItem,
+  Collapse,
+  CollapseItem,
+  Cascader,
+  ColorPicker,
+  Transfer,
+  Container,
+  Header,
+  Aside,
+  Main,
+  Footer,
+  Timeline,
+  TimelineItem,
+  Link,
+  Divider,
+  Image,
+  Calendar,
+  Backtop,
+  InfiniteScroll,
+  PageHeader,
+  CascaderPanel,
+  Avatar,
+  Drawer,
+  Popconfirm,
+  Skeleton,
+  SkeletonItem,
+  Empty,
+  Descriptions,
+  DescriptionsItem,
+  Result,
+} from 'element-ui';
+import locale from 'element-ui/src/locale';
+import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
+const components = [
+  Pagination,
+  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,
+  Spinner,
+  Badge,
+  Card,
+  Rate,
+  Steps,
+  Step,
+  Carousel,
+  Scrollbar,
+  CarouselItem,
+  Collapse,
+  CollapseItem,
+  Cascader,
+  ColorPicker,
+  Transfer,
+  Container,
+  Header,
+  Aside,
+  Main,
+  Footer,
+  Timeline,
+  TimelineItem,
+  Link,
+  Divider,
+  Image,
+  Calendar,
+  Backtop,
+  PageHeader,
+  CascaderPanel,
+  Avatar,
+  Drawer,
+  Popconfirm,
+  Skeleton,
+  SkeletonItem,
+  Empty,
+  Descriptions,
+  DescriptionsItem,
+  Result,
+  CollapseTransition
+];
+
+const install = function (Vue, opts = {}) {
+  locale.use(opts.locale);
+  locale.i18n(opts.i18n);
+
+  components.forEach(component => {
+    Vue.component(component.name, component);
+  });
+
+  Vue.use(InfiniteScroll);
+  Vue.use(Loading.directive);
+
+  Vue.prototype.$ELEMENT = {
+    size: opts.size || '',
+    zIndex: opts.zIndex || 2000
+  };
+
+  Vue.prototype.$loading = Loading.service;
+  Vue.prototype.$msgbox = MessageBox;
+  Vue.prototype.$alert = MessageBox.alert;
+  Vue.prototype.$confirm = MessageBox.confirm;
+  Vue.prototype.$prompt = MessageBox.prompt;
+  Vue.prototype.$notify = Notification;
+  Vue.prototype.$message = Message;
+
+};
+
+/* istanbul ignore if */
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+}
+
+export default {
+  version: '2.15.6',
+  locale: locale.use,
+  i18n: locale.i18n,
+  install,
+  CollapseTransition,
+  Loading,
+  Pagination,
+  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,
+  MessageBox,
+  Breadcrumb,
+  BreadcrumbItem,
+  Form,
+  FormItem,
+  Tabs,
+  TabPane,
+  Tag,
+  Tree,
+  Alert,
+  Notification,
+  Slider,
+  Icon,
+  Row,
+  Col,
+  Upload,
+  Progress,
+  Spinner,
+  Message,
+  Badge,
+  Card,
+  Rate,
+  Steps,
+  Step,
+  Carousel,
+  Scrollbar,
+  CarouselItem,
+  Collapse,
+  CollapseItem,
+  Cascader,
+  ColorPicker,
+  Transfer,
+  Container,
+  Header,
+  Aside,
+  Main,
+  Footer,
+  Timeline,
+  TimelineItem,
+  Link,
+  Divider,
+  Image,
+  Calendar,
+  Backtop,
+  InfiniteScroll,
+  PageHeader,
+  CascaderPanel,
+  Avatar,
+  Drawer,
+  Popconfirm,
+  Skeleton,
+  SkeletonItem,
+  Empty,
+  Descriptions,
+  DescriptionsItem,
+  Result
+};

+ 4 - 2
front-vue/src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 
 import Cookies from 'js-cookie'
 
-import Element from 'element-ui'
+import Element from './element-ui'
 import './assets/styles/element-variables.scss'
 
 import '@/assets/styles/index.scss' // global css
@@ -40,6 +40,8 @@ import Attachments from "@/components/Attachments"
 import TextItem from "@/components/TextItem"
 // 导入
 import UploadImport from '@/components/UploadImport/index.vue'
+import Dialog from "@/components/Dialog"
+
 // 日期过滤器
 import "@/filters/date.js"
 
@@ -79,7 +81,7 @@ Vue.component('StatisticalData', StatisticalData)
 Vue.component('Attachments', Attachments)
 Vue.component('TextItem', TextItem)
 Vue.component('UploadImport', UploadImport)
-
+Vue.component('ElDialog', Dialog)
 Vue.use(permission)
 
 //拖拽