dialog add delay param

leyap · leyap · commit d2c3aba48dbd · 2020-06-12T15:11:11.000+08:00
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-dialog-loading",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "description": "A light vue dialog plugin with loading animation and image preview",
   "private": false,
   "main": "./dist/index.js",
diff --git a/src/App.vue b/src/App.vue
@@ -3,6 +3,7 @@
         <button @click="openDialog">Dialog</button>
         <button @click="openDialog1">Dialog1</button>
         <button @click="openBusyDialog">Loading</button>
+        <button @click="openDelayDialog">DelayDialog</button>
         <img class="img" :src="imgUrl" @click="preview(imgUrl)"/>
         <LoadingCom/>
     </div>
@@ -70,6 +71,19 @@
                     ],
                 })
             },
+            openDelayDialog () {
+                this.$dialog({
+                    content: 'dialog with delay 3s',
+                    // background: '#00f',
+                    delay: 3000,
+                    btns: [
+                        {
+                            label: 'OK',
+                            color: '#09f',
+                        }
+                    ],
+                })
+            },
             openBusyDialog () {
                 this.$loading.show({delay: 0})   //delay default is 300ms
                 // this.$loading.show({delay: 0, background: 'rgba(0,0,0,0.5)'})   //delay default is 300ms
diff --git a/src/component/Dialog.vue b/src/component/Dialog.vue
@@ -28,6 +28,7 @@
                 onOk: null,
                 onCancel: null,
                 background: null,
+                delay: 0,
                 btns: []
             }
         },
@@ -46,22 +47,32 @@
                 this.visible = false
                 setTimeout(() => {
                     this.$destroy(true)
-                    this.$el.parentNode.removeChild(this.$el)
+                    if (this.$el.parentNode) {
+                        this.$el.parentNode.removeChild(this.$el)
+                    }
                 }, 330)
             },
-            handleBgClose (e) {
+            handleBgClose(e) {
                 if (this.visible && this.bgClose && !document.querySelector('.dialog').contains(e.target)) {
                     this.close()
                 }
             }
         },
-        created () {
+        created() {
         },
-        mounted () {
+        mounted() {
+
+        },
+        updated() {
+            if (this.delay > 0) {
+                window.setTimeout(() => {
+                    this.close()
+                }, this.delay)
+            }
         },
-        beforeDestroy () {
+        beforeDestroy() {
         },
-        destroyed () {
+        destroyed() {
         }
 
     }
diff --git a/src/component/index.js b/src/component/index.js
@@ -25,7 +25,7 @@ const dialog = (params) => {
     // instance.id = id
     instance.vm = instance.$mount()
 
-    let {title, content, btns, bgClose, background} = params || {}
+    let {title, content, btns, bgClose, background, delay} = params || {}
     if (!background) {
         background = options.background;
     }
@@ -52,8 +52,18 @@ const dialog = (params) => {
         })
     }
 
+    if (Number.isInteger(delay)) {
+        if (delay > 30000) {
+            delay = 30000
+        }
+        if (delay < 20) {
+            delay = 20
+        }
+        instance.delay = delay
+    }
+
     document.body.appendChild(instance.$el)
-    return instance.el
+    return instance.$el
 }
 
 export {Dialog, Loading, ImagePreview}
@@ -79,7 +89,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-    version: '0.4.7',
+    version: '0.5.0',
     install,
     Dialog,
     Loading,

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-dialog-loading",`
`3`		`- "version": "0.4.7",`
	`3`	`+ "version": "0.5.0",`
`4`	`4`	`"description": "A light vue dialog plugin with loading animation and image preview",`
`5`	`5`	`"private": false,`
`6`	`6`	`"main": "./dist/index.js",`