fix: dialog 支持回退关闭，支持close方法

src/packages/dialog/_dialog.js

@@ -6,40 +6,44 @@ let DialogConstructor = Vue.extend(settings);
 let inst;
 
 let Dialog = function(options) {
-  options.id = options.id || 'nut-dialog-default-id';
-  if (options.type === 'image' && typeof options.closeBtn === 'undefined') {
-    options.closeBtn = true;
-  }
-
-  inst = new DialogConstructor({
-    propsData: options
-  });
-
-  inst.vm = inst.$mount();
-
-  let dialogDom = document.querySelector('#' + options.id);
-  if (options.id && dialogDom) {
-    dialogDom.parentNode.replaceChild(inst.$el, dialogDom);
-  } else {
-    document.body.appendChild(inst.$el);
-  }
-
-  // setTimeout(() => {
-  //     //  设置z-index保证最新的弹窗再最上面
-  //     let dialogThis = document.querySelector('#'+options.id);
-  //     var nutDialogWrapper = document.getElementsByClassName('nut-dialog-wrapper');
-  //     var zIndexNum = 100 + (10 * (nutDialogWrapper.length));
-  //     dialogThis.style.zIndex = zIndexNum;
-  //     setTimeout(function() {
-  //         for(var i = 0;i < nutDialogWrapper.length;i++) {
-  //             nutDialogWrapper[i].style.zIndex = zIndexNum - 1 - i;
-  //         }
-  //     }, 0);
-  // }, 10);
-
-  Vue.nextTick(() => {
-    inst.visible = true;
-  });
+    options.id = options.id || 'nut-dialog-default-id';
+    if (options.type === 'image' && typeof options.closeBtn === 'undefined') {
+        options.closeBtn = true;
+    }
+
+    inst = new DialogConstructor({
+        propsData: options
+    });
+
+    inst.vm = inst.$mount();
+
+    let dialogDom = document.querySelector('#' + options.id);
+    if (options.id && dialogDom) {
+        dialogDom.parentNode.replaceChild(inst.$el, dialogDom);
+    } else {
+        document.body.appendChild(inst.$el);
+    }
+
+    // setTimeout(() => {
+    //     //  设置z-index保证最新的弹窗再最上面
+    //     let dialogThis = document.querySelector('#'+options.id);
+    //     var nutDialogWrapper = document.getElementsByClassName('nut-dialog-wrapper');
+    //     var zIndexNum = 100 + (10 * (nutDialogWrapper.length));
+    //     dialogThis.style.zIndex = zIndexNum;
+    //     setTimeout(function() {
+    //         for(var i = 0;i < nutDialogWrapper.length;i++) {
+    //             nutDialogWrapper[i].style.zIndex = zIndexNum - 1 - i;
+    //         }
+    //     }, 0);
+    // }, 10);
+
+    Vue.nextTick(() => {
+        inst.visible = true;
+    });
 };
-
-export default Dialog;
+Dialog.closed = function() {
+    if (inst) {
+        console.log(inst.close())
+    }
+}
+export default Dialog;

src/packages/dialog/demo.vue

@@ -2,7 +2,7 @@
   <div class="demo-list">
     <h4>基本用法</h4>
     <div>
-      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog1">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog1" >
         <span slot="title">
           <label>自定义标题和内容</label>
         </span>
@@ -103,7 +103,8 @@ export default {
     showDialog1: function() {
       const options = {
         title: '确定删除此订单？',
-        content: '删除后将从你的记录里消失，无法找回'
+        content: '删除后将从你的记录里消失，无法找回',
+        closeOnPopstate:true
       };
 
       this.$dialog(options);

src/packages/dialog/dialog.scss

@@ -160,7 +160,7 @@ body.dialog-open {
         border-radius: 0 0 5px 5px;
         background: transparent;
         color: $primary-color;
-        border-top: 1px solid #aca9a9;
+        border-top: 1px solid $light-color;
     }
 }
 

src/packages/dialog/dialog.vue

@@ -170,6 +170,10 @@ export default {
     customClass: {
       type: String,
       default: ''
+    },
+    closeOnPopstate:{
+      type:Boolean,
+      default:false
     }
   },
   data() {
@@ -181,6 +185,15 @@ export default {
   created() {
     this.destroy = true;
   },
+  mounted(){
+    var that=this;
+    if(that.closeOnPopstate){
+        window.addEventListener("popstate",function(){
+          that.close();
+        })
+    }
+  
+  },
   methods: {
     modalClick() {
       if (!this.closeOnClickModal) {

src/packages/dialog/doc.md

@@ -10,6 +10,10 @@ this.$dialog({
   content: "删除后将从你的记录里消失，无法找回"
 });
 ```
+## 直接关闭当前dialog
+```javascript
+this.$dialog.closed()  //可以直接关闭当前dialog
+```
 
 ## ID
 
@@ -107,7 +111,7 @@ export default {
 }
 ```
 
-## API
+## prop
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
@@ -125,14 +129,23 @@ export default {
 | okBtnDisabled | 禁用确定按钮 | Boolean | false
 | cancelAutoClose | 取消按钮是否默认关闭弹窗 | Boolean | true
 | textAlign | 文字对齐方向，可选值同css的text-align | String | "center"
-| onOkBtn | 确定按钮回调 | Function | -
-| onCancelBtn | 取消按钮回调 | Function | -
-| onCloseBtn | 关闭按钮回调 | Function | -
-| closeCallback | 关闭回调，任何情况关闭弹窗都会触发 | Function | -
-| onClickImageLink | 图片链接点击回调，仅对图片类型弹窗有效 | Function | -
 | maskBgStyle | 遮罩层样式（颜色、透明度） | String | -
 | customClass | 增加一个自定义class | String | -
 | link | 点击图片跳转的Url，仅对图片类型弹窗有效 | String | -
 | imgSrc | 图片Url，仅对图片类型弹窗有效 | String | -
 | animation | 是否开启默认动效 | Boolean | true
+| closeOnPopstate | 是否在页面回退时自动关闭 | Boolean | false
 | lockBgScroll | 锁定遮罩层滚动，不影响弹窗内部滚动（实验性质）会给body添加posotion:fix属性，注意 | Boolean | false
+
+
+## 事件
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+
+| onOkBtn | 确定按钮回调 | Function | -
+| onCancelBtn | 取消按钮回调 | Function | -
+| onCloseBtn | 关闭按钮回调 | Function | -
+| closeCallback | 关闭回调，任何情况关闭弹窗都会触发 | Function | -
+| onClickImageLink | 图片链接点击回调，仅对图片类型弹窗有效 | Function | -
+| closed | 关闭dialog | Function | -