fix: 完善toast 相关问题

src/packages/toast/_toast.js

@@ -5,6 +5,7 @@ let ToastConstructor = Vue.extend(settings);
 let instance;
 let instanceArr = [];
 let defaultOptionsMap = {};
+const id = '0';
 const defaultOptions = {
   msg: '',
   visible: false,
@@ -39,10 +40,8 @@ function _showToast() {
 }
  
 function _getInstance(obj) {
-  let opt = {id: '0'};
+  let opt = {id};
   Object.assign(opt,currentOptions,defaultOptionsMap[obj.type],obj)
- 
-
   //有相同id者共用一个实例，否则新增实例
   if (opt['id'] && instanceArr[opt['id']]) {
     instance = instanceArr[opt['id']];
@@ -84,7 +83,7 @@ let Toast = {
     return _getInstance({ ...obj, msg, type: 'warn' });
   },
   loading(msg, obj = {}) {
-    obj = { ...obj, id: obj.id || 'loading', msg, type: 'loading' };
+    obj = { ...obj, id: obj.id|| id , msg, type: 'loading' };
     obj.cover = typeof obj.cover !== 'undefined' ? obj.cover : true; //loading类型默认打开遮罩层
     obj.duration = obj.duration || 0; //loading类型默认不自动关闭
     return _getInstance(obj);

src/packages/toast/demo.vue

@@ -26,8 +26,8 @@
     <h4>共享实例</h4>
 
     <div class="demo-content">
-      <nut-button size="middle" @click.native="idToast1('我设置了id为123')">我设置了id为123</nut-button>
-      <nut-button size="middle" @click.native="idToast2('我设置了id为321')">我设置了id为321</nut-button>
+      <nut-button size="middle" @click.native="idToast1('我设置了id为1')">我设置了id为1</nut-button>
+      <nut-button size="middle" @click.native="idToast2('我设置了id为2')">我设置了id为2</nut-button>
     </div>
 
     <h4>更改默认配置</h4>
@@ -101,10 +101,10 @@ export default {
       });
     },
     idToast1(msg) {
-      this.$toast.success(msg, { id: 123 });
+      this.$toast.success(msg, { id: 1 ,center:false,bottom:450});
     },
     idToast2(msg) {
-      this.$toast.text(msg, { id: 321, duration: 4000 });
+      this.$toast.fail(msg, { id: 2,center:false,bottom:300 });
     },
     setDefaultOptions() {
       this.$toast.setDefaultOptions({

src/packages/toast/doc.md

@@ -90,14 +90,11 @@ this.$toast.text('自定义Icon',{
 
 ```javascript
 //二者id不同，不会共享一个实例
-this.$toast.success(msg,{
-    id:123
-});
-
-this.$toast.text(msg,{
-    id:321,
-    duration:4000
-});
+ 
+this.$toast.success(msg, { id: 1 ,center:false,bottom:450});
+ 
+this.$toast.fail(msg, { id: 2,center:false,bottom:300 });
+ 
 ```
 
 ## 支持在JS模块中导入使用

src/packages/toast/toast.scss

@@ -2,6 +2,16 @@
 .nut-toast{
   width: 100%;
   text-align: center;
+  &.popup-box{
+    background-color: transparent;
+  }
+  
+  &.nut-toast-buttom {
+    bottom: 150px;
+    top: auto;
+    left: 0;
+    transform: initial;
+  }
 }
   .nut-toast-small {
     .nut-toast-inner {
@@ -70,10 +80,7 @@
       }
     }
   }
-  .nut-toast-center {
-    top: 50%;
-    transform: translateY(-50%);
-  }
+  
   .nut-loading {
     .nut-toast-inner {
       padding: 25px;

src/packages/toast/toast.vue

@@ -4,9 +4,11 @@
       :overlay='cover'
       :class="toastClass"
       v-model="visible"
+      :closeOnClickOverlay='closeOnClickOverlay'
       :overlayStyle='{backgroundColor:coverColor}'
       class="nut-toast"
-      :style="{backgroundColor:'transparent'}"
+      :style="{ bottom: center?'auto':bottom + 'px'}"
+      @click="clickCover"
     >
       <div
         class="nut-toast-inner"
@@ -40,7 +42,7 @@ export default {
       center: true,
       type: '',
       customClass: '',
-      bottom: 30,
+      bottom: '',
       size: 'base',
       icon: null,
       textAlignCenter: true,
@@ -54,6 +56,7 @@ export default {
       closeOnClickOverlay: false
     };
   },
+  
   watch: {
     visible(val) {
       if (val) {
@@ -68,7 +71,7 @@ export default {
     toastClass() {
       return [
         'nut-toast',
-        { 'nut-toast-center': this.center },
+        { 'nut-toast-buttom': !this.center },
         { 'nut-toast-has-icon': this.hasIcon }, 
         { 'nut-loading': this.type == 'loading' },
         this.customClass,
@@ -112,7 +115,11 @@ export default {
         this.timer = null;
       }
     },
-    
+    clickCover() {
+      if (this.closeOnClickOverlay) {
+        this.hide();
+      }
+    }
   },
   destroyed() {
     this.textTimer = null;