【add】增加全局弹窗

assets/styles/global.less

@@ -0,0 +1,24 @@
+.visual-dialog {
+  .ant-modal-content {
+    background-color: #063367;
+    .ant-modal-header {
+      background-color: #063367;
+      color: #fff;
+    }
+    .ant-modal-close-x {
+      width: 68px * 1.5;
+      height: 68px * 1.5;
+      line-height: 130px;
+      font-size: 60px;
+      color: #fff;
+    }
+    .ant-modal-title {
+      font-size: 70px;
+      line-height: 68px * 1.5;
+      color: #fff;
+    }
+    .ant-modal-body {
+      padding: 36px;
+    }
+  }
+}

assets/styles/mixin.less

@@ -1,4 +1,5 @@
 @import "@/assets/fonts/fonts.less";
+@import "global";
 //表单元素垂直居中对齐（也可设置顶对齐，底对齐）
 .form-element-v-align(@alignment: middle){
   display: inline-block;

components/Test.vue

@@ -0,0 +1,15 @@
+<template>
+<div>
+  123123123
+</div>
+</template>
+
+<script>
+export default {
+  name: "Test"
+}
+</script>
+
+<style scoped>
+
+</style>

nuxt.config.js

@@ -46,6 +46,7 @@ export default {
     '@/plugins/echarts',
     '@/plugins/axios',
     '@/plugins/setup',
+    '@/plugins/dialog/index',
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components

pages/visual/PeakCoalView.vue

@@ -120,6 +120,7 @@
 <script>
 import mapFilters from "@/config/mapFilters";
 const centerBg = require('@/assets/peakCoalImages/center/center-content-bg.png')
+import Test from "@/components/Test";
 export default {
   name: "PeakCoalView",
   components: {},
@@ -146,6 +147,13 @@ export default {
       e.stopPropagation()
       this.getAutoStyle()
     }, false)
+    this.$open(Test, {}, {
+      title: '测试',
+      width: 1920,
+      onClose () {
+        console.log(1);
+      }
+    })
   },
   methods: {
     getAutoStyle() {

plugins/dialog.js

@@ -1,42 +0,0 @@
-import { Modal } from 'ant-design-vue'
-import Vue from 'vue'
-
-class CustomVisualModel {
-  constructor() {
-    this.modelPros = {
-      mask: true,
-      maskClosable: true,
-      keyboard: true,
-      footer: null
-    }
-  }
-
-  /**
-   * 预览监控点
-   */
-  previewCamera () {
-
-  }
-
-  /**
-   * 预览图片
-   */
-  previewImage () {}
-
-  /**
-   * 微站检测数据
-   */
-  wzRecord () {}
-
-  /**
-   * 深度检测仪数据
-   */
-  sdRecord () {}
-
-  /**
-   * cems检测数据
-   */
-  cemsRecord () {}
-
-
-}

plugins/dialog/confirm.js

@@ -0,0 +1,78 @@
+import Omit from "omit.js";
+import {destroyFns} from "ant-design-vue/es/modal/Modal";
+import Base from "ant-design-vue/es/base";
+import Vue from "vue";
+import ConfirmDialog from "./dialog";
+import _extends from 'babel-runtime/helpers/extends';
+
+export default function confirm(config) {
+  var div = document.createElement('div');
+  var el = document.createElement('div');
+  div.appendChild(el);
+  document.body.appendChild(div);
+  var currentConfig = _extends({}, Omit(config, ['parentContext']), { close: close, visible: true });
+
+  var confirmDialogInstance = null;
+  var confirmDialogProps = { props: {} };
+  function close() {
+    destroy.apply(undefined, arguments);
+  }
+  function update(newConfig) {
+    currentConfig = _extends({}, currentConfig, newConfig);
+    confirmDialogProps.props = currentConfig;
+  }
+  function destroy() {
+    if (confirmDialogInstance && div.parentNode) {
+      confirmDialogInstance.$destroy();
+      confirmDialogInstance = null;
+      div.parentNode.removeChild(div);
+    }
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var triggerCancel = args.some(function (param) {
+      return param && param.triggerCancel;
+    });
+    if (config.onCancel && triggerCancel) {
+      config.onCancel.apply(config, args);
+    }
+    for (var i = 0; i < destroyFns.length; i++) {
+      var fn = destroyFns[i];
+      if (fn === close) {
+        destroyFns.splice(i, 1);
+        break;
+      }
+    }
+  }
+
+  function render(props) {
+    confirmDialogProps.props = props;
+    var V = Base.Vue || Vue;
+    return new V({
+      el: el,
+      parent: config.parentContext,
+      data: function data() {
+        return { confirmDialogProps: confirmDialogProps };
+      },
+      render: function render() {
+        var h = arguments[0];
+
+        // 先解构，避免报错，原因不详
+        var cdProps = _extends({}, this.confirmDialogProps);
+        console.log(cdProps)
+        return h(ConfirmDialog, cdProps);
+      }
+    });
+  }
+
+  confirmDialogInstance = render(currentConfig);
+  destroyFns.push(close);
+  return {
+    destroy: close,
+    update: update
+  };
+}
+
+

plugins/dialog/dialog.js

@@ -0,0 +1,77 @@
+import _defineProperty from 'babel-runtime/helpers/defineProperty'
+import classNames from "classnames";
+import Dialog from "ant-design-vue/es/modal/Modal";
+import warning from 'ant-design-vue/es/_util/warning';
+
+export default {
+  functional: true,
+  render: function render(h, context) {
+    var props = context.props;
+    var close = props.close,
+      zIndex = props.zIndex,
+      afterClose = props.afterClose,
+      visible = props.visible,
+      keyboard = props.keyboard,
+      centered = props.centered,
+      getContainer = props.getContainer,
+      maskStyle = props.maskStyle,
+      _props$closable = props.closable,
+      closable = _props$closable === undefined ? true : _props$closable;
+
+    warning(!('iconType' in props), 'Modal', 'The property \'iconType\' is deprecated. Use the property \'icon\' instead.');
+    var prefixCls = props.prefixCls || 'ant-modal';
+    var contentPrefixCls = prefixCls + '-confirm2';
+    // 默认为 true，保持向下兼容
+    var width = props.width || 416;
+    var title = props.title || '';
+    var style = props.style || {};
+    var onClose = props.onClose || null;
+    var mask = props.mask === undefined ? true : props.mask;
+    // 默认为 false，保持旧版默认行为
+    var maskClosable = props.maskClosable === undefined ? false : props.maskClosable;
+    var transitionName = props.transitionName || 'zoom';
+    var maskTransitionName = props.maskTransitionName || 'fade';
+
+    var classString = classNames(contentPrefixCls, contentPrefixCls + '-' + props.type, prefixCls + '-' + props.type, props['class']);
+
+    return h(
+      Dialog,
+      {
+        attrs: {
+          prefixCls: prefixCls,
+          wrapClassName: classNames(_defineProperty({}, contentPrefixCls + '-centered', !!centered)),
+          visible: visible,
+          closable: closable,
+          title: title,
+          transitionName: transitionName,
+          footer: null,
+          maskTransitionName: maskTransitionName,
+          mask: mask,
+          maskClosable: maskClosable,
+          maskStyle: maskStyle,
+          width: width,
+          zIndex: zIndex,
+          afterClose: afterClose,
+          keyboard: keyboard,
+          centered: centered,
+          getContainer: getContainer
+        },
+        'class': classString,
+        on: {
+          'cancel': function cancel(e) {
+            onClose && onClose()
+            return close({ triggerCancel: true }, e);
+          }
+        },
+        style: style,
+      },
+      [h(
+        'div',
+        { 'class': contentPrefixCls + '-content' },
+        [typeof props.content === 'function' ? props.content(h) : props.content]
+      )]
+    );
+  }
+};
+
+

plugins/dialog/index.js

@@ -0,0 +1,20 @@
+import modalConfirm from "./confirm";
+import _extends from 'babel-runtime/helpers/extends';
+import Vue from "vue";
+
+var confirm = function confirmFn(props) {
+  var config = _extends({
+    type: '',
+    okCancel: false,
+    footer: null
+  }, props);
+  return modalConfirm(config);
+};
+
+Vue.prototype.$open = function (vNode, props, dialogProps) {
+  return confirm({
+    prefixCls: 'visual-dialog ant-modal',
+    content: (h) => h(vNode, { props }),
+    ...dialogProps
+  })
+}