函数式弹窗

src/components/MxDialog/DispatchMaster.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-dialog
+    title="提示"
+    :visible.sync="show"
+    width="30%"
+  >
+    <div class="block">
+      <el-date-picker
+        v-model="value"
+        type="date"
+        placeholder="选择日期">
+      </el-date-picker>
+    </div>
+    <span slot="footer" class="dialog-footer">
+       <el-button @click="show = false">取 消</el-button>
+       <el-button type="primary" @click="onConfirm">确 定</el-button>
+     </span>
+  </el-dialog>
+</template>
+<script>
+  export default {
+    data(){
+      return {
+        show:false,
+        value: ''
+      }
+    },
+    methods: {
+      init() {
+        console.log('dialog---init', this)
+      },
+      onConfirm() {
+        this.show = false
+        this.success(this.value)
+      }
+    }
+  }
+</script>
+<style>
+
+</style>

src/components/MxDialog/index.js

@@ -0,0 +1,43 @@
+import Vue from 'vue';
+import DispatchMaster from './DispatchMaster';  // 引入组件
+
+const DispatchMasterController = Vue.extend(DispatchMaster);  // 发送班主任分班
+
+let instance;
+
+function initInstance(type) {
+  switch (type) {
+    case 'Test':
+      instance = new DispatchMasterController({
+        el: document.createElement('div'),
+      })
+      break
+  }
+  // 标识已被挂载过一次
+  instance.constrctType = type
+}
+// 导出一个方法，接受配置参数
+export default (type,options,callback) => {
+  if (!instance || instance.constrctType !== type) {
+    // 未被挂载
+    console.log('挂载')
+    initInstance(type); // 挂载
+  }
+  Object.assign(instance, options);
+  // 实例化后newInstance就是一个对象了，所以data内的数据会
+  // 挂载到this下，传入一个对象与之合并
+  instance.show = true
+  if(instance.init) {
+    instance.init()
+  }
+
+  instance.success = (data) => {
+    callback(data)
+  }
+
+  document.body.appendChild(instance.$el)
+  // return instance.show(vm => {
+  //   instance = null;  // 将实例对象清空
+  // })
+}
+

src/main.js

@@ -40,6 +40,10 @@ import MxVideo from '@/components/MxVideo'
 import FileUpload from '@/components/FileUpload'
 import ImageUpload from '@/components/ImageUpload'
 
+// 用于静态弹窗 函数式调用
+import MxDialog from '@/components/MxDialog/index'
+
+Vue.prototype.$Dialog = MxDialog
 Vue.prototype.mxGlobal = globalVariable
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts

src/views/bigdatastudy/study/report.vue

@@ -124,6 +124,8 @@ export default {
   data() {
     return {}
   },
+  created() {
+  },
   methods:{
     goReportDemoOnline() {
       const path = 'https://online.fliphtml5.com/jkrou/ybov/'

src/views/elective/master/index.vue

@@ -144,11 +144,13 @@ export default {
       })
     },
     send() {
-      if (true) {
-        this.$message.warning('还有班级未分配新班主任和新班级号')
-        return
-      }
-
+      // if (true) {
+      //   this.$message.warning('还有班级未分配新班主任和新班级号')
+      //   return
+      // }
+      this.$Dialog('Test',{},(val) => {
+        console.log('success', val)
+      })
     },
     async cancel(row) {
       console.log(row)