From 61919d0becfa05307cd1577b86882df1d8d149e0 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 2 Jun 2020 22:37:09 +0800 Subject: [PATCH] docs(Toast): update description (#6443) --- src/toast/README.md | 6 +++--- src/toast/README.zh-CN.md | 24 +++++++++++++++++------- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/toast/README.md b/src/toast/README.md index 8cd70a816..3f96a7459 100644 --- a/src/toast/README.md +++ b/src/toast/README.md @@ -75,9 +75,9 @@ const timer = setInterval(() => { }, 1000); ``` -### \$toast Method +### Global Method -After import the Toast component, the \$toast method is automatically mounted on Vue.prototype, making it easy to call within a vue component. +After import the Toast component, the `$toast` method is automatically mounted on Vue.prototype, making it easy to call within a vue component. ```js export default { @@ -89,7 +89,7 @@ export default { ### Singleton -Toast use singleton mode by default, if you need to pop multiple Toast at the same time, you can refer to the following example +Toast use singleton mode by default, if you need to pop multiple Toast at the same time, you can refer to the following example: ```js Toast.allowMultiple(); diff --git a/src/toast/README.zh-CN.md b/src/toast/README.zh-CN.md index e3abff0fb..402d12ad3 100644 --- a/src/toast/README.zh-CN.md +++ b/src/toast/README.zh-CN.md @@ -1,5 +1,9 @@ # Toast 轻提示 +### 介绍 + +在页面中间弹出黑色半透明提示,用于消息通知、加载提示、操作结果提示等场景。 + ### 引入 ```js @@ -19,7 +23,7 @@ Toast('提示内容'); ### 加载提示 -使用`Toast.loading`方法展示加载提示,通过`forbidClick`属性可以禁用背景点击,通过`loadingType`属性可以自定义加载图标类型。 +使用 `Toast.loading` 方法展示加载提示,通过 `forbidClick` 属性可以禁用背景点击,通过`loadingType` 属性可以自定义加载图标类型。 ```js Toast.loading({ @@ -37,6 +41,8 @@ Toast.loading({ ### 成功/失败提示 +使用 `Toast.success` 方法展示成功提示,使用 `Toast.fail` 方法展示失败提示。 + ```js Toast.success('成功文案'); Toast.fail('失败文案'); @@ -44,6 +50,8 @@ Toast.fail('失败文案'); ### 自定义图标 +通过 `icon` 选项可以自定义图标,支持传入[图标名称](#/zh-CN/icon)或图片链接。 + ```js Toast({ message: '自定义图标', @@ -58,6 +66,8 @@ Toast({ ### 动态更新提示 +执行 Toast 方法时会返回对应的 Toast 实例,通过修改实例上的 message 属性可以实现动态更新提示的效果。 + ```js const toast = Toast.loading({ duration: 0, // 持续展示 toast @@ -78,9 +88,9 @@ const timer = setInterval(() => { }, 1000); ``` -### 组件内调用 +### 全局方法 -引入 Toast 组件后,会自动在 Vue 的 prototype 上挂载 \$toast 方法,便于在组件内调用。 +引入 Toast 组件后,会自动在 Vue 的 prototype 上挂载 `$toast` 方法,便于在组件内调用。 ```js export default { @@ -92,7 +102,7 @@ export default { ### 单例模式 -Toast 默认采用单例模式,即同一时间只会存在一个 Toast,如果需要在同一时间弹出多个 Toast,可以参考下面的示例 +Toast 默认采用单例模式,即同一时间只会存在一个 Toast,如果需要在同一时间弹出多个 Toast,可以参考下面的示例: ```js Toast.allowMultiple(); @@ -106,19 +116,19 @@ toast2.clear(); ### 修改默认配置 -通过`Toast.setDefaultOptions`函数可以全局修改 Toast 的默认配置 +通过`Toast.setDefaultOptions`函数可以全局修改 Toast 的默认配置。 ```js // 将所有 Toast 的展示时长设置为 2000 毫秒 Toast.setDefaultOptions({ duration: 2000 }); -// 将所有 loading Toast 设置为背景不可点击 (2.2.10 版本开始支持) +// 将所有 loading Toast 设置为背景不可点击 Toast.setDefaultOptions('loading', { forbidClick: true }); // 重置所有 Toast 的默认配置 Toast.resetDefaultOptions(); -// 重置 loading Toast 的默认配置 (2.2.10 版本开始支持) +// 重置 loading Toast 的默认配置 Toast.resetDefaultOptions('loading'); ```