Browse Source

fix(Toast) :文档及demo优化 (#616)

* fix(toast): 文档修复,demo完善
Drjingfubo 4 years ago
parent
commit
374040d6ac
2 changed files with 47 additions and 9 deletions
  1. 25 1
      src/packages/__VUE/toast/demo.vue
  2. 22 8
      src/packages/__VUE/toast/doc.md

+ 25 - 1
src/packages/__VUE/toast/demo.vue

@@ -26,6 +26,18 @@
       is-link
       @click="loadingToast('加载中')"
     ></nut-cell>
+    <h2>Toast不消失</h2>
+    <nut-cell
+      title="Toast 文字提示不消失"
+      is-link
+      @click="NoToast('Toast不消失~')"
+    ></nut-cell>
+    <h2>Loading带透明遮罩</h2>
+    <nut-cell
+      title="带文案+带透明遮罩+自动消失"
+      is-link
+      @click="NoLoading('加载中~')"
+    ></nut-cell>
   </div>
 </template>
 
@@ -50,12 +62,24 @@ export default createDemo({
     const loadingToast = (msg) => {
       Toast.loading(msg);
     };
+    const NoToast = (msg) => {
+      Toast.text(msg, {
+        duration: 0
+      });
+    };
+    const NoLoading = (msg) => {
+      Toast.loading(msg, {
+        cover: true
+      });
+    };
     return {
       textToast,
       successToast,
       errorToast,
       warningToast,
-      loadingToast
+      loadingToast,
+      NoToast,
+      NoLoading
     };
   }
 });

+ 22 - 8
src/packages/__VUE/toast/doc.md

@@ -49,6 +49,21 @@ Toast.warn('警告提示');
 Toast.loading('加载中');
 ```
 
+Toast不消失
+```javascript
+Toast.text(msg,{
+    duration:0
+});
+```
+
+Loading带透明罩
+```javascript
+ Toast.loading(msg,{
+     cover:true
+});
+```
+
+
 ##¥ 支持在JS模块中导入使用
 ```javascript
 import { Toast } from "@nutui/nutui";
@@ -62,20 +77,19 @@ toast.hide();
 ### API
 | 方法名                    | 说明                                                                    | 参数            | 返回值     |
 | ------------------------- | ----------------------------------------------------------------------- | --------------- | ---------- |
-| Toast.text                | 展示文字提示                                                            | options/message | toast 实例 |
-| Toast.success             | 展示成功提示                                                            | options/message | toast 实例 |
-| Toast.fail                | 展示失败提示                                                            | options/message | toast 实例 |
-| Toast.warn                | 展示警告提示                                                            | options/message | toast 实例 |
+| Toast.text                | 展示文字提示                                                            |  message| options | toast 实例(message支持传入HTML) |
+| Toast.success             | 展示成功提示                                                            | message options| toast 实例 |
+| Toast.fail                | 展示失败提示                                                            | message options| toast 实例 |
+| Toast.warn                | 展示警告提示                                                            | message| options | toast 实例 |
 | Toast.hide                | 关闭提示                                                                | force:boolean   | void       |
-| Toast.loading             | 展示加载提示                                                            | options/message | toast 实例 |
+| Toast.loading             | 展示加载提示                                                            | message| options | toast 实例 |
 
 ## Options
 
 | 字段                | 说明                                                                          | 类型          | 默认值                        |
 | ------------------- | ----------------------------------------------------------------------------- | ------------- | ----------------------------- |
-| msg                 | 消息文本内容,支持传入HTML                                                     | String/VNode  | ""                            |
 | id                  | 标识符,相同者共用一个实例<br>loading类型默认使用一个实例,其他类型默认不共用 | String/Number | -                             |
-| duration            | 展示时长(毫秒)<br>值为 0 时,toast 不会自动消失(loading类型默认为0)       | Number        | 2000                          |
+| duration            | 展示时长(毫秒)<br>值为 0 时,toast 不会自动消失      | Number        | 2000                          |
 | center              | 是否展示在页面中部(为false时展示在底部)                                     | Boolean       | true                          |
 | bottom              | 距页面底部的距离(像素),option.center为false时生效                          | Number       | 30                          |
 | text-align-center     | 多行文案是否居中                                                              | Boolean       | true                          |
@@ -83,7 +97,7 @@ toast.hide();
 | custom-class         | 自定义类名                                                                    | String        | ""                            |
 | icon                | 自定义图标,**支持图片链接或base64格式**                                        | String        | ""                            |
 | size                | 文案尺寸,**small**/**base**/**large**三选一                                                  | String        | "base"                        |
-| cover               | 是否显示遮罩层,loading类型默认显示                                           | Boolean       | loading类型true/其他类型false |
+| cover               | 是否显示遮罩层                                          | Boolean       | false |
 | cover-color          | 遮罩层颜色,默认透明                                                          | String        | "rgba(0,0,0,0)"               |
 | loading-rotate       | loading图标是否旋转,仅对loading类型生效                                      | Boolean       | true                          |
 | on-close             | 关闭时触发的事件                                                              | function      | null                          |