feat:toast新增支持遮罩层

src/packages/scroller/demo.vue

@@ -4,7 +4,8 @@
             :closeMode="true"
             v-if="!isMobile"
         >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大，建议在 Android 或 iOS 设备上体验。</nut-noticebar>
-        <h4>横向使用</h4>
+        <h4>横向滑动</h4>
+        <p>支持惯性和吸边回弹，支持滑动到底跳转链接。</p>
         <div class="hor-panel">
             <nut-scroller @jump="jump()">
                 <div slot="list" class="nut-hor-list-item" v-for="(item, index) of listData" :key="index">
@@ -28,7 +29,7 @@
                 <slot slot="more" ><div class="nut-hor-jump-more">查看更多</div></slot>
             </nut-scroller>
         </div>
-        <h4>纵向使用</h4>
+        <h4>纵向滑动</h4>
         <p>支持下拉刷新、上拉加载更多。</p>
         <div class="vert-panel">
             <nut-scroller

src/packages/scroller/doc.md

@@ -1,10 +1,10 @@
 # Scroller 滚动
 
-局部滚动组件，纵向可支持下拉刷新和上拉加载，横向可支持滚动末尾跳转。
+局部滚动组件，支持惯性、吸边回弹。纵向可支持下拉刷新和上拉加载，横向可支持滚动末尾跳转。
 
 ## 基本用法
 
-横向用法
+横向使用，支持惯性、吸边回弹，支持滚动末尾跳转。
 
 ```html
 <nut-scroller @jump="jump()">
@@ -32,7 +32,7 @@
     </nut-scroller>
 </div>
 ```
-纵向用法
+纵向使用，支持下拉刷新和上拉加载更多。
 
 ```html
 <nut-scroller
@@ -53,7 +53,7 @@
 </nut-scroller>
 ```
 
-纵向不满一屏用法
+纵向不满一屏
 
 ```html
 <nut-scroller

src/packages/toast/_toast.js

@@ -31,6 +31,7 @@ function _getInstance(obj) {
         bgColor: "rgba(36, 36, 36, 0.8)",
         onClose:null,
         textTimer: null,
+        cover:false,  //透明遮罩层
         timeStamp:null
       };
   
@@ -97,6 +98,7 @@ let Toast = {
     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);
   }

src/packages/toast/demo.vue

@@ -38,19 +38,19 @@
         <span slot="title">
           <label>Loading</label>
         </span>
-        <span slot="desc">默认不自动消失</span>
+        <span slot="desc">带文案+带透明遮罩（默认）+自动消失</span>
       </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="hideLoading()">
+      <nut-cell :showIcon="true" :isLink="true" @click.native="showLoading2()">
         <span slot="title">
-          <label>隐藏Loading</label>
+          <label>Loading</label>
         </span>
-        <span slot="desc">点击手动隐藏上面的Loading</span>
+        <span slot="desc">不自动消失+不带遮罩</span>
       </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="showLoading2()">
+      <nut-cell :showIcon="true" :isLink="true" @click.native="hideLoading()">
         <span slot="title">
-          <label>Loading</label>
+          <label>隐藏Loading</label>
         </span>
-        <span slot="desc">带文案+自动消失</span>
+        <span slot="desc">点击手动隐藏上面的Loading</span>
       </nut-cell>
     </div>
     <h4>自定义样式</h4>
@@ -118,16 +118,16 @@ export default {
       this.$toast.warn(msg);
     },
     showLoading() {
+      this.$toast.loading("加载中...", { duration: 3000 });
+    },
+    showLoading2() {
       if (this.loading) return;
-      this.loading = this.$toast.loading();
+      this.loading = this.$toast.loading("", { cover: false });
     },
     hideLoading() {
       this.loading && this.loading.hide();
       this.loading = null;
     },
-    showLoading2() {
-      this.loading2 = this.$toast.loading("加载中...", { duration: 3000 });
-    },
     cusBgToast(msg) {
       this.$toast.text(msg, { bgColor: "rgba(50, 50, 50, 0.6)" });
     },

src/packages/toast/doc.md

@@ -64,15 +64,16 @@ export default {
 ## 加载提示
 
 ```javascript
-//Loading类型，默认不会自动消失
+//Loading类型，默认不会自动消失，带透明遮罩
 this.loading = this.$toast.loading();
 
 //手动关闭上面的Loading
 this.loading.hide();
 
-//带文字，自动消失
+//带文字，自动消失，不要遮罩
 this.$toast.loading('加载中...',{ 
-    duration:3000
+    duration:3000,
+    cover:false
 });
 ```
 
@@ -132,5 +133,6 @@ this.$toast.loading(msg,{icon:"data:image/svg+xml,%3Csvg fill="#FFFFFF" xmlns='h
 | option.customClass | 增加自定义class | String | ""
 | option.icon | 自定义图标，Data URI格式 | String | ""
 | option.size | 尺寸，small/base/large三选一 | String | "base"
+| option.cover | 透明遮罩，loading类型默认打开 | Boolean | loading类型true/其他false
 | option.loadingRotate | loading图标是否旋转，仅对loading类型生效 | Boolean | true
 | option.onClose | 关闭时触发的事件 | function | null

src/packages/toast/toast.scss

@@ -18,6 +18,13 @@
             font-size: $font-size-large;
         }
     }
+    &.nut-toast-cover {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: auto;
+        height: 100%;
+    }
     .nut-toast-inner {
         position: relative;
         display: inline-block;

src/packages/toast/toast.vue

@@ -1,7 +1,7 @@
 <template>
   <transition name="toastfade">
     <div :id="id"
-      :class="['nut-toast',{'nut-toast-center':center},{'nut-toast-has-icon':type},{'nut-loading':type=='loading'},customClass,'nut-toast-'+size]"
+      :class="['nut-toast',{'nut-toast-center':center},{'nut-toast-has-icon':type},{'nut-toast-cover':cover},{'nut-loading':type=='loading'},customClass,'nut-toast-'+size]"
       v-show="visible"
       :style="{'bottom':center?'auto':bottom+'px'}"
     >
@@ -42,6 +42,7 @@ export default {
         bgColor: "rgba(46, 46, 46, 0.7)",
         onClose:null,
         textTimer: null,
+        cover:false,
         timeStamp:null
     };
   },