fix：dialog关闭时实例销毁

src/packages/dialog/demo.vue

@@ -2,37 +2,37 @@
   <div class="demo-list">
     <h4>基本用法</h4>
     <div>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog1">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog1">
         <span slot="title">
           <label>自定义标题和内容</label>
         </span>
       </nut-cell>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog2">
+      <nut-cell :isLink="true" :show-icon="false" @click.native="showDialog2">
         <span slot="title">
           <label>只有标题</label>
         </span>
       </nut-cell>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog3">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog3">
         <span slot="title">
           <label>只有内容</label>
         </span>
       </nut-cell>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog4">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog4">
         <span slot="title">
           <label>移除按钮栏</label>
         </span>
       </nut-cell>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog5">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog5">
         <span slot="title">
           <label>事件</label>
         </span>
       </nut-cell>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog6">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog6">
         <span slot="title">
-          <label>无弹出动效</label>
+          <label>无弹出动效且关闭时不销毁dislog实例</label>
         </span>
       </nut-cell>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog7">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog7">
         <span slot="title">
           <label>遮罩层透明</label>
         </span>
@@ -41,7 +41,7 @@
     <h4>图片弹窗</h4>
     <p>type值为“image”时为图片弹窗，需要配置一张图片，可带链接（非必须）。默认展示关闭按钮。点击图片触发onClickImageLink事件，返回false可阻止默认的跳转链接行为。</p>
     <div>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showImageDialog">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showImageDialog">
         <span slot="title">
           <label>图片弹窗</label>
         </span>
@@ -50,12 +50,12 @@
     <h4>背景滚动锁定</h4>
     <p>lockBgScroll值设为true时，可在弹窗出现时锁定页面滚动，且不影响窗体内部滚动。</p>
     <div>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog8">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog8">
         <span slot="title">
           <label>背景滚动锁定</label>
         </span>
       </nut-cell>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog9">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog9">
         <span slot="title">
           <label>窗体内部滚动不影响页面滚动</label>
         </span>
@@ -64,14 +64,14 @@
     <h4>高级用法</h4>
     <p>如果Dialog内容有复杂交互，可使用Dialog的标签式用法。</p>
     <div>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="dialogShow=true">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="dialogShow=true">
         <span slot="title">
           <label>以标签形式调用Dialog</label>
         </span>
       </nut-cell>
     </div>
     <!-- 以标签形式调用Dialog -->
-    <nut-dialog title="标签形式调用" :visible="dialogShow" :cancelAutoClose="false" @ok-btn-click="dialogShow=false" @cancel-btn-click="dialogShow=false" @close="dialogShow=false">
+    <nut-dialog title="标签形式调用" :visible="dialogShow" :cancel-auto-close="false" @ok-btn-click="dialogShow=false" @cancel-btn-click="dialogShow=false" @close="dialogShow=false">
       
       <a href="javascript:;" @click="dialogShow=false" :noCancelBtn="true">点我可以直接关闭对话框</a>
     </nut-dialog>
@@ -98,7 +98,7 @@ export default {
     showDialog1: function() {
       const options = {
         title: "确定删除此订单？",
-        content: "删除后将从你的记录里消失，无法找回"
+        content: "删除后将从你的记录里消失，无法找回"     
       };
 
       this.$dialog(options);
@@ -161,6 +161,7 @@ export default {
       this.$dialog({
         animation: false, //禁用弹出动效
         title: "注册说明",
+        canDestroy:false,
         content:
           "原账号为您本人所有，建议直接登录或找回密码。原账号内的订单资产可能丢失，可联系京东客服找回。"
       });

src/packages/dialog/dialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <div
+  <div  v-if="destroy"
     :class="['nut-dialog-wrapper',customClass,{'nut-dialog-image-wrapper':type==='image'}]"
     :id="id"
   >
@@ -155,29 +155,33 @@ export default {
       default: 'center'
     },
     onOkBtn: {
-      type: Object,
+      type: Function,
       default: null
     },
     onCloseBtn: {
-      type: Object,
+      type: Function,
       default: null
     },
     onCancelBtn: {
-      type: Object,
+      type: Function,
       default: null
     },
     closeCallback: {
-      type: Object,
+      type: Function,
       default: null
     },
     onClickImageLink: {
-      type: Object,
+      type: Function,
       default: null
     },
     maskBgStyle: {
       type: String,
       default: ''
     },
+    canDestroy:{
+      type: Boolean,
+      default: true
+    },
     customClass: {
       type: String,
       default: ''
@@ -185,17 +189,25 @@ export default {
   },
   data() {
     return {
-      curVisible: false
+      curVisible: false,
+      destroy:false
     };
   },
+  created(){
+    this.destroy=true
+  },
   methods: {
     modalClick() {
       if (!this.closeOnClickModal) {return};
       this.close('modal');
     },
+    todestroy(){
+      this.canDestroy? this.destroy=false:"";
+    },
     close(target) {
       this.$emit('close', target);
       this.$emit('close-callback', target);
+      this.todestroy();
       if (
         typeof this.closeCallback === 'function' &&
         this.closeCallback(target) === false

src/packages/dialog/doc.md

@@ -48,7 +48,17 @@ this.$dialog({
 });
         
 ```
-
+## 关闭dialog不销毁实例
+```javascript
+ this.$dialog({
+        animation: false, //禁用弹出动效
+        title: "注册说明",
+        canDestroy:false,
+        content:
+          "原账号为您本人所有，建议直接登录或找回密码。原账号内的订单资产可能丢失，可联系京东客服找回。"
+      });
+        
+```
 ## 页面滚动锁定
 
 **lockBgScroll** 值设为 **true** 时，可在弹窗出现时锁定页面滚动，且不影响窗体内部滚动。
@@ -79,7 +89,7 @@ this.$dialog({
 
 ## 标签式写法
 
-如果Dialog内容有复杂交互，可使用Dialog的标签式用法。
+如果Dialog内容有复杂交互，可使用Dialog的标签式用法。注意标签使用的时候，属性不建议使用驼峰，推荐使用如下写法
 
 ```html
 <nut-dialog title="标签形式调用" :visible="dialogShow" @ok-btn-click="dialogShow=false" @cancel-btn-click="dialogShow=false" @close="dialogShow=false">
@@ -101,7 +111,8 @@ export default {
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| id | 标识符，相同者共享一个实例 | String/Number | -
+| id | 标识符，相同者共享一个实例 | String/Number | nut-dialog-default-id
+| canDestroy | 是否关闭弹窗时销毁实例 | Beelean | true
 | title | 标题 | String | -
 | content | 内容，支持HTML | String | -
 | type | 弹窗类型，值为**image**时为图片弹窗 | String | -

src/packages/toast/_toast.js

@@ -6,16 +6,16 @@ let instance;
 let instanceArr = [];
 
 function _showToast() {
-  instance.vm = instance.$mount();
-  document.body.appendChild(instance.$el);
-  Vue.nextTick(() => {
-    instance.visible = true;
-  });
+    instance.vm = instance.$mount();
+    document.body.appendChild(instance.$el);
+    Vue.nextTick(() => {
+        instance.visible = true;
+    });
 }
 
 function _getInstance(obj) {
-  let opt = {
-        id:new Date().getTime(),
+    let opt = {
+        id: "nut-toast-default-id",
         msg: "",
         visible: false,
         duration: 2000, //显示时间(毫秒)
@@ -24,84 +24,84 @@ function _getInstance(obj) {
         type: "",
         customClass: "",
         bottom: 30,
-        size:"base",
-        icon:null,
+        size: "base",
+        icon: null,
         textAlignCenter: true,
-        loadingRotate:true,
+        loadingRotate: true,
         bgColor: "rgba(36, 36, 36, 0.8)",
-        onClose:null,
+        onClose: null,
         textTimer: null,
-        cover:false,  //透明遮罩层
-        timeStamp:null
-      };
-  
-  opt = Object.assign(opt, obj);
+        cover: false, //透明遮罩层
+        timeStamp: null
+    };
 
-  //有相同id者共用一个实例，否则新增实例
-  if (opt['id'] && instanceArr[opt['id']]) {
-    instance = instanceArr[opt['id']];
-    instance.hide(true);
-    instance = Object.assign(instance, opt);
-  } else {
-    instance = new ToastConstructor({
-      data: Object.assign(opt, obj)
-    });
-    opt['id'] && (instanceArr[opt['id']] = instance);
-  }
+    opt = Object.assign(opt, obj);
+
+    //有相同id者共用一个实例，否则新增实例
+    if (opt['id'] && instanceArr[opt['id']]) {
+        instance = instanceArr[opt['id']];
+        instance.hide(true);
+        instance = Object.assign(instance, opt);
+    } else {
+        instance = new ToastConstructor({
+            data: Object.assign(opt, obj)
+        });
+        opt['id'] && (instanceArr[opt['id']] = instance);
+    }
 
-  _showToast();
-  return instance;
+    _showToast();
+    return instance;
 }
 
 let Toast = {
-  text(msg, obj) {
-    if (!msg) {
-      console.warn('[NutUI Toast]: msg不能为空');
-      return;
-    }
-    obj = obj || {};
-    obj.msg = msg;
-    return _getInstance(obj);
-  },
-  success(msg, obj) {
-    if (!msg) {
-      console.warn('[NutUI Toast]: msg不能为空');
-      return;
-    }
-    obj = obj || {};
-    obj.msg = msg;
-    obj.type = 'success';
-    return _getInstance(obj);
-  },
-  fail(msg, obj) {
-    if (!msg) {
-      console.warn('[NutUI Toast]: msg不能为空');
-      return;
-    }
-    obj = obj || {};
-    obj.msg = msg;
-    obj.type = 'fail';
-    return _getInstance(obj);
-  },
-  warn(msg, obj) {
-    if (!msg) {
-      console.warn('[NutUI Toast]: msg不能为空');
-      return;
+    text(msg, obj) {
+        if (!msg) {
+            console.warn('[NutUI Toast]: msg不能为空');
+            return;
+        }
+        obj = obj || {};
+        obj.msg = msg;
+        return _getInstance(obj);
+    },
+    success(msg, obj) {
+        if (!msg) {
+            console.warn('[NutUI Toast]: msg不能为空');
+            return;
+        }
+        obj = obj || {};
+        obj.msg = msg;
+        obj.type = 'success';
+        return _getInstance(obj);
+    },
+    fail(msg, obj) {
+        if (!msg) {
+            console.warn('[NutUI Toast]: msg不能为空');
+            return;
+        }
+        obj = obj || {};
+        obj.msg = msg;
+        obj.type = 'fail';
+        return _getInstance(obj);
+    },
+    warn(msg, obj) {
+        if (!msg) {
+            console.warn('[NutUI Toast]: msg不能为空');
+            return;
+        }
+        obj = obj || {};
+        obj.msg = msg;
+        obj.type = 'warn';
+        return _getInstance(obj);
+    },
+    loading(msg, obj) {
+        obj = obj || {};
+        obj.id = obj.id || 'loading';
+        obj.msg = msg;
+        obj.type = 'loading';
+        obj.cover = typeof(obj.cover) !== 'undefined' ? obj.cover : true; //loading类型默认打开遮罩层
+        obj.duration = obj.duration || 0;
+        return _getInstance(obj);
     }
-    obj = obj || {};
-    obj.msg = msg;
-    obj.type = 'warn';
-    return _getInstance(obj);
-  },
-  loading(msg,obj) {
-    obj = obj || {};
-    obj.id = obj.id || 'loading';
-    obj.msg = msg;
-    obj.type = 'loading';
-    obj.cover = typeof(obj.cover)!=='undefined'?obj.cover:true; //loading类型默认打开遮罩层
-    obj.duration = obj.duration || 0;
-    return _getInstance(obj);
-  }
 };
 
 export default Toast;