From 945d71b3bc4b42e28cdca08ce7acf59e45923308 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期五, 16 四月 2021 14:38:08 +0800
Subject: [PATCH] 弹框组件

---
 /dev/null                          |   73 --------------
 src/components/layer/src/layer.vue |  126 +++++++++++++++++++-----
 src/components/layer/src/layer.js  |   58 +++--------
 3 files changed, 114 insertions(+), 143 deletions(-)

diff --git a/src/components/layer/src/iframe.vue b/src/components/layer/src/iframe.vue
deleted file mode 100644
index 4b9d07f..0000000
--- a/src/components/layer/src/iframe.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <div class="public-bounced map-background" v-drag>
-    <div class="public-bounced-title panel-title" ref="publicBounced">
-      <span>{{options.title}}</span>
-      <i class="el-icon-circle-close" @click="close"></i>
-    </div>
-    <div class="public-bounced-content" :id="id">
-      {{options.content}}
-    </div>
-  </div>
-</template>
-
-<script>
-import helper from './helper/helper.js'
-
-export default {
-  data () {
-    return {
-      cls: {
-        'vl-notify-iframe': true
-      },
-      id: 'vlip' + new Date().getTime()
-    }
-  },
-  props: {
-    options: {
-      type: Object,
-      default: function () {
-        return {}
-      }
-    }
-  },
-  computed: {
-    contentStyle () {
-      return {
-        height: 'calc(100% - 50px)', // parseInt(this.options.area[1]) - 50 + "px",
-        minHeight: '20px',
-        overflow: 'auto'
-      }
-    }
-  },
-  async mounted () {
-    this.getContent()
-    helper.hiddenScrollBar(this.options)
-  },
-  methods: {
-    close () {
-
-    },
-    async getContent () {
-      await helper.sleep(10)
-      const propsData = helper.deepClone(this.options.content.data) || {}
-      propsData.layerid = this.options.id
-      propsData.lydata = this.options.content.data
-      propsData.lyoption = this.options
-      console.log(this.options.content.content)
-      const instance = new this.options.content.content({
-        // 鍏蜂綋鍙傛暟淇℃伅锛岃鍙傝�僾ue婧愮爜
-        parent: this.options.content.parent,
-        propsData: propsData
-      })
-      instance.vm = instance.$mount()
-      document.getElementById(this.id).appendChild(instance.vm.$el)
-      this.options.layer.instancesVue[this.options.id].iframe = instance.vm
-    },
-
-    btnyes (event) {
-      helper.btnyes(event, this.options)
-    },
-    btncancel (event) {
-      helper.btncancel(event, this.options)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .public-bounced {
-    z-index: 2000;
-    position: absolute;
-    top: 35%;
-    left: 20%;
-
-  .public-bounced-title {
-    cursor: move;
-    height: 0.1rem;
-    padding: 10px 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-  span {
-    color: #f4f7ff;
-    margin: 0 15px;
-    font-size: 14px;
-  }
-
-  i {
-    color: #C0C4CC;
-    margin: 0 15px;
-    font-size: 22px;
-    cursor: pointer;
-  }
-
-  i:hover {
-    color: #00fff6;
-  }
-  }
-
-  .public-bounced-content {
-    padding: 0.1rem;
-    display: flex;
-  //align-items: center;
-  //justify-content: space-around;
-
-  .public-bounced-content-left {
-  //width: 4.8rem;
-  }
-
-  .public-bounced-content-right {
-  //width: 3rem;
-    margin-left: 0.1rem;
-  }
-  }
-  }
-</style>
diff --git a/src/components/layer/src/layer.js b/src/components/layer/src/layer.js
index b42ef27..2d2db28 100644
--- a/src/components/layer/src/layer.js
+++ b/src/components/layer/src/layer.js
@@ -1,27 +1,12 @@
 import layerVue from './layer.vue'
-const Notification = function (Vue, globalOption = {
-  msgtime: 1.5 // msg娑堝け鏃堕棿
-}) {
-  const NotificationConstructor = Vue.extend(layerVue)
+const Layer = function (Vue) {
+  const LayerVueExtend = Vue.extend(layerVue)
   const self = {}
   const defOptions = {
     type: 0, // 0锛堜俊鎭锛岄粯璁わ級1锛堥〉闈㈠眰锛�2锛坕frame灞傦級3锛堝姞杞藉眰锛�4锛坱ips灞傦級,5msg,6prompt
     title: '淇℃伅',
     content: '',
-    area: 'auto',
-    offset: 'auto',
-    icon: -1,
-    btn: '纭畾',
-    time: 0,
-    maxmin: false, // 鏈�澶ф渶灏忓寲
-    shade: true,
-    yes: '',
-    cancel: '',
-    tips: [0, {}], // 鏀寔涓婂彸涓嬪乏鍥涗釜鏂瑰悜锛岄�氳繃1-4杩涜鏂瑰悜璁惧畾,鍙互璁惧畾tips: [1, '#c00']
-    tipsMore: false, // 鏄惁鍏佽澶氫釜tips
-    shadeClose: true,
-    scrollbar: true, // 鏄惁鍏佽娴忚鍣ㄥ嚭鐜版粴鍔ㄦ潯:榛樿鏄厑璁�
-    resize: false // 鏄惁鍏佽鎷変几锛岄粯璁ゆ槸涓嶅厑璁�
+    btn: '纭畾'
   }
   self.instances = {}
   self.instancesVue = []
@@ -34,17 +19,20 @@
    * @param  {[type]} options [description]
    * @return {[type]}         [description]
    */
-  self.open = function (options) {
-    options = mergeJson(options, defOptions)
+  self.open = function (opt) {
+    /* let option = {
+      type: 1,
+      content: opt.content,
+      area: opt.area
+    } */
+    var options = mergeJson(opt, defOptions)
     const id = `notification_${new Date().getTime()}_${seed++}`
     options.id = id
     options.layer = self
-    const instance = new NotificationConstructor({
+    options.content.content = Vue.extend(options.content.content)
+    const instance = new LayerVueExtend({
       data: options
     })
-    if (options.type === 1) {
-      options.content.content = Vue.extend(options.content.content)
-    }
     instance.id = id
     instance.vm = instance.$mount()
     self.instances[id] = {
@@ -52,6 +40,7 @@
       type: options.type
     }
     document.body.appendChild(instance.vm.$el)
+    instance.init()
     self.instancesVue[id] = {
       mask: '',
       main: instance.vm,
@@ -59,28 +48,15 @@
     }
     return id
   }
-  /**
-   * [description]
-   * @param  {[type]} options [description]
-   * @return {[type]}         [description]
-   */
-  self.iframe = function (opt) {
-    let option = {
-      type: 1,
-      content: opt.content,
-      area: opt.area
-    }
-    option = mergeJson(option, opt)
-    console.log(option)
-    return self.open(option)
-  }
+
   /**
    * 鍏抽棴涓�涓脊绐�
    * @param  {[type]} id [description]
    * @return {[type]}    [description]
    */
   self.close = function (id) {
-    const oElm = document.getElementById(id)
+    console.log(id)
+    const oElm = document.getElementById(id).parentElement
     if (oElm) {
       document.body.removeChild(oElm)
       delete self.instances[id]
@@ -192,4 +168,4 @@
 }
 
 // module.exports = Notification;
-export default Notification
+export default Layer
diff --git a/src/components/layer/src/layer.vue b/src/components/layer/src/layer.vue
index 1ef2000..b29753a 100644
--- a/src/components/layer/src/layer.vue
+++ b/src/components/layer/src/layer.vue
@@ -1,46 +1,114 @@
-<template lang="html">
-    <component :options="this.$data" :is="getActiveName"></component>
+<template>
+  <div class="public-bounced map-background" v-drag>
+    <div class="public-bounced-title panel-title" ref="publicBounced">
+      <span>{{title}}</span>
+      <i class="el-icon-circle-close" @click="close"></i>
+    </div>
+    <div class="public-bounced-content" :id="id">
+    </div>
+  </div>
 </template>
 
 <script>
-import pzpage from './page.vue'
-import pziframe from './iframe.vue'
+import helper from './helper/helper.js'
 
 export default {
   data () {
     return {
-      id: '',
-      type: 0, // 0锛坅lert榛樿锛�1锛堥〉闈㈠眰锛�2锛坕frame灞傦級3锛坙oading锛�4锛坱ips灞傦級,5(msg),6(prompt)
-      title: '淇℃伅',
-      content: '',
-      area: 'auto',
-      offset: 'auto',
-      icon: -1,
-      btn: '纭畾',
-      time: 0,
-      shade: true,
-      yes: '',
-      cancel: ''
+      cls: {
+        'vl-notify-iframe': true
+      },
+      id: 'vlip' + new Date().getTime()
+    }
+  },
+  props: {
+    options: {
+      type: Object,
+      default: function () {
+        return {}
+      }
     }
   },
   computed: {
-    getActiveName () {
-      const comps = [
-        'pzpage',
-        'pziframe'
-      ]
-      return comps[this.$data.type]
+    contentStyle () {
+      return {
+        height: 'calc(100% - 50px)', // parseInt(this.options.area[1]) - 50 + "px",
+        minHeight: '20px',
+        overflow: 'auto'
+      }
     }
   },
-  mounted () {},
-  methods: {},
-  watch: {},
-  components: {
-    pzpage,
-    pziframe
+  async mounted () {
+    helper.hiddenScrollBar(this.options)
+  },
+  methods: {
+    close () {
+      this.layer.close(this.id)
+    },
+    init () {
+      const propsData = helper.deepClone(this.content.content.data) || {}
+      propsData.layerid = this.id
+      propsData.lydata = this.content.data
+      propsData.lyoption = this.options
+      const instance = new this.content.content({
+        // 鍏蜂綋鍙傛暟淇℃伅锛岃鍙傝�僾ue婧愮爜
+        parent: this.content.parent,
+        propsData: propsData
+      })
+      instance.vm = instance.$mount()
+      document.getElementById(this.id).appendChild(instance.vm.$el)
+    }
   }
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
+  .public-bounced {
+    z-index: 2000;
+    position: absolute;
+    top: 35%;
+    left: 20%;
+
+  .public-bounced-title {
+    cursor: move;
+    height: 0.1rem;
+    padding: 10px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+  span {
+    color: #f4f7ff;
+    margin: 0 15px;
+    font-size: 14px;
+  }
+
+  i {
+    color: #C0C4CC;
+    margin: 0 15px;
+    font-size: 22px;
+    cursor: pointer;
+  }
+
+  i:hover {
+    color: #00fff6;
+  }
+  }
+
+  .public-bounced-content {
+    padding: 0.1rem;
+    display: flex;
+  //align-items: center;
+  //justify-content: space-around;
+
+  .public-bounced-content-left {
+  //width: 4.8rem;
+  }
+
+  .public-bounced-content-right {
+  //width: 3rem;
+    margin-left: 0.1rem;
+  }
+  }
+  }
 </style>
diff --git a/src/components/layer/src/page.vue b/src/components/layer/src/page.vue
deleted file mode 100644
index 153f993..0000000
--- a/src/components/layer/src/page.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template lang="html">
-    <div class="public-bounced map-background" v-drag v-show="flag">
-        <div class="public-bounced-title panel-title" ref="publicBounced">
-            <span>{{options.title}}</span>
-            <i class="el-icon-circle-close" @click="closePopup"></i>
-        </div>
-        <div class="public-bounced-content">
-            {{options.content}}
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      moveLeft: 0, // 宸︾Щ鐨勮窛绂�
-      moveTop: 0, // 涓婄Щ鐨勮窛绂�
-      ismove: false
-    }
-  },
-  props: {
-    options: {
-      type: Object,
-      default: function () {
-        return {}
-      }
-    }
-  },
-  computed: {},
-  mounted () { },
-  methods: {
-    close: function (event) {
-      const mask = event.target.getAttribute('class')
-      if (mask && mask.indexOf('notify-mask') > -1) {
-        this.options.layer.close(this.options.id)
-      }
-    },
-    moveStart: function (event) {
-      this.options.offset = this.options.offset === 'auto' ? [] : this.options.offset
-      if (this.options.offset.length === 0) {
-        this.options.offset.push(document.getElementById(this.options.id + '_alert').offsetLeft)
-        this.options.offset.push(document.getElementById(this.options.id + '_alert').offsetTop)
-        this.options.offset.push(0)
-      }
-      if (this.options.offset.length === 2) {
-        this.options.offset.push(0)
-      }
-      this.options.offset[0] = (document.getElementById(this.options.id + '_alert').offsetLeft)
-      this.options.offset[1] = (document.getElementById(this.options.id + '_alert').offsetTop)
-      this.moveLeft = event.clientX
-      this.moveTop = event.clientY
-      this.ismove = true
-    },
-    move: function (event) {
-      if (this.ismove) {
-        const o = document.getElementById(this.options.id + '_alert')
-        o.style.left = this.options.offset[0] + (event.clientX - this.moveLeft) + 'px'
-        o.style.top = this.options.offset[1] + (event.clientY - this.moveTop) + 'px'
-      }
-    },
-    moveEnd: function () {
-      this.ismove = false
-    }
-  },
-  watch: {
-
-  },
-  components: {
-
-  }
-}
-</script>

--
Gitblit v1.8.0