弹窗封装

+import Vue from 'vue'
+import Popup from './index.vue'
+
+const PopupBox = Vue.extend(Popup)
+Popup.install = function (data) {
+  console.log(data)
+  let instance = new PopupBox({
+    data
+  }).$mount()
+
+  document.body.appendChild(instance.$el)
+
+  Vue.nextTick(() => {
+    instance.isShow = true
+  })
+}
+
+export default Popup
\ No newline at end of file

+<template>
+    <transition name="fade" mode="out-in" v-if="isShow">
+      <div class="ls-mask" v-loading="loading">
+        <div class="ls-mask-window" :style="{'width':width,'height':height}">
+          <div :style="{'text-align':titleStyle}"><b >{{title}}</b></div>
+          <i class="el-icon-close" @click="onCancel" ></i>
+          <div class="ls-mask-content">
+            <component :is="editItem" ref='childRef' @loading='loadingFn' />
+          </div>
+          <div class="ls-mask-footer">
+            <el-button type="primary" @click="onConfirm">{{confirmText}}</el-button>
+            <el-button @click="onCancel">{{cancelText}}</el-button>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </template>
+  <script>
+    export default {
+      name: 'index',
+      data () {
+        return {
+          title: '提示',
+          cancelText: '取消',
+          confirmText: '确认',
+          isSync: false,
+          isShow: false,
+          editItem:"",
+          titleStyle:'',
+          width:"75%",
+          height:"500px",
+        }
+      },
+      props:{
+        loading: { type: Boolean, default: false },
+      },
+      watch:{
+          isShow(a,b){
+              this.editItem = this.loadViewFn(this.editItem)
+          },
+      },
+      methods: {
+        onCancel () {
+            this.isShow = false
+        },
+        onConfirm () {
+            this.loading = true  
+            this.$refs.childRef.childFn()
+        },
+        loadingFn(e){ //加载状态
+            this.loading = e
+        },
+        loadViewFn (view) {
+         return (r) =>
+          require.ensure([], () =>
+          r(require(`@/views/${view}.vue`))
+        );
+    },
+      }
+    }
+  </script>
+  <style scoped>
+    #app{
+      overflow: hidden;
+    }
+    .ls-mask{
+      width: 100%;
+      height: 100%;
+      z-index: 2001;
+      position: fixed;
+      left: 0;
+      top: 0;
+      background: rgba(0,0,0,0.3);
+    }
+    .ls-mask-window{
+      padding-top: 20px;
+      background: white;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+    }
+    .ls-mask-window b{
+      padding-left: 12px;
+    }
+    .ls-mask-content{
+      padding: 20px;
+      text-align: center;
+    }
+    .ls-mask-footer{
+      height: 45px;
+      border-top: 1px solid #f0f0f0;
+      display: flex;
+      justify-content: end;
+      padding: 2px;
+      position: absolute;
+        width: 98%;
+        bottom: 10px;
+        right: 12px;
+    }
+  /deep/.el-icon-close{
+    position: absolute;
+    top: 20px;
+    right: 12px;
+    font-size: 20px;
+    cursor: pointer;
+  }
+  /deep/.el-loading-mask{
+      background: none;
+  }
+  </style>
+  
\ No newline at end of file

@@ -14,6 +14,8 @@ import rules from './utils/rule.js'
 // 全局方法挂载
 Vue.prototype.$rules = rules
 
+import Popup from './components/tanchuang/index'
+Vue.prototype.$popup = Popup.install
 
 import { theme } from "@/directive/theme.js"
 Vue.directive("theme", theme)