From 882bfb39248187f1d74d734720d3c1f32de471b7 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Thu, 20 Oct 2022 22:33:37 +0800
Subject: [PATCH] docs(Toast): add word-break demo (#11156)

---
 packages/vant/src/toast/README.md             | 20 +++++++++++++-
 packages/vant/src/toast/README.zh-CN.md       | 22 ++++++++++++++-
 packages/vant/src/toast/Toast.tsx             |  6 ++++-
 packages/vant/src/toast/demo/index.vue        | 27 +++++++++++++++++++
 packages/vant/src/toast/index.less            |  5 ----
 packages/vant/src/toast/index.ts              |  1 +
 .../test/__snapshots__/demo.spec.ts.snap      | 26 ++++++++++++++++++
 packages/vant/src/toast/types.ts              |  2 +-
 8 files changed, 100 insertions(+), 9 deletions(-)

diff --git a/packages/vant/src/toast/README.md b/packages/vant/src/toast/README.md
index 0cbaded42..14abb9c16 100644
--- a/packages/vant/src/toast/README.md
+++ b/packages/vant/src/toast/README.md
@@ -96,6 +96,24 @@ showToast({
 });
 ```
 
+### Word Break
+
+Using `wordBreak` option to set whether line breaks appear wherever the text would otherwise overflow its content box. The default value is `break-all`, and can be set to `break-word` or `normal`.
+
+```js
+import { showToast } from 'vant';
+
+showToast({
+  message: 'This message will contain a incomprehensibilities long word.',
+  wordBreak: 'break-all',
+});
+
+showToast({
+  message: 'This message will contain a incomprehensibilities long word.',
+  wordBreak: 'break-word',
+});
+```
+
 ### Update Message
 
 ```js
@@ -199,7 +217,7 @@ Vant exports following Toast utility functions:
 | type | Can be set to `loading` `success` `fail` `html` | _ToastType_ | `text` |
 | position | Can be set to `top` `middle` `bottom` | _ToastPosition_ | `middle` |
 | message | Message | _string_ | `''` |
-| wordBreak | Can be set to `break-normal` `break-all` `break-word` | _ToastWordBreak_ | `''` |
+| wordBreak | Can be set to `normal` `break-all` `break-word` | _ToastWordBreak_ | `'break-all'` |
 | icon | Custom icon | _string_ | - |
 | iconSize | Custom icon size | _number \| string_ | `36px` |
 | iconPrefix | Icon className prefix | _string_ | `van-icon` |
diff --git a/packages/vant/src/toast/README.zh-CN.md b/packages/vant/src/toast/README.zh-CN.md
index 465f3b1de..68e61f0bd 100644
--- a/packages/vant/src/toast/README.zh-CN.md
+++ b/packages/vant/src/toast/README.zh-CN.md
@@ -110,6 +110,26 @@ showToast({
 });
 ```
 
+### 文字换行方式
+
+通过 `wordBreak` 选择可以控制 Toast 中的文字过长时的截断方式，默认值为 `break-all`，可选值为 `break-word` 和 `normal`。
+
+```js
+import { showToast } from 'vant';
+
+// 换行时截断单词
+showToast({
+  message: 'This message will contain a incomprehensibilities long word.',
+  wordBreak: 'break-all',
+});
+
+// 换行时不截断单词
+showToast({
+  message: 'This message will contain a incomprehensibilities long word.',
+  wordBreak: 'break-word',
+});
+```
+
 ### 动态更新提示
 
 执行 Toast 方法时会返回对应的 Toast 实例，通过修改实例上的 `message` 属性可以实现动态更新提示的效果。
@@ -216,7 +236,7 @@ Vant 中导出了以下 Toast 相关的辅助函数：
 | type | 提示类型，可选值为 `loading` `success`<br>`fail` `html` | _ToastType_ | `text` |
 | position | 位置，可选值为 `top` `bottom` | _ToastPosition_ | `middle` |
 | message | 文本内容，支持通过`\n`换行 | _string_ | `''` |
-| wordBreak | 文本内容的换行方式，可选值为 `break-normal` `break-all` `break-word` | _ToastWordBreak_ | `''` |
+| wordBreak | 文本内容的换行方式，可选值为 `normal` `break-all` `break-word` | _ToastWordBreak_ | `'break-all'` |
 | icon | 自定义图标，支持传入图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
 | iconSize | 图标大小，如 `20px` `2em`，默认单位为 `px` | _number \| string_ | `36px` |
 | iconPrefix | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
diff --git a/packages/vant/src/toast/Toast.tsx b/packages/vant/src/toast/Toast.tsx
index 98da6b022..bce0d2673 100644
--- a/packages/vant/src/toast/Toast.tsx
+++ b/packages/vant/src/toast/Toast.tsx
@@ -152,7 +152,11 @@ export default defineComponent({
     return () => (
       <Popup
         class={[
-          bem([props.position, props.wordBreak, { [props.type]: !props.icon }]),
+          bem([
+            props.position,
+            props.wordBreak === 'normal' ? 'break-normal' : props.wordBreak,
+            { [props.type]: !props.icon },
+          ]),
           props.className,
         ]}
         lockScroll={false}
diff --git a/packages/vant/src/toast/demo/index.vue b/packages/vant/src/toast/demo/index.vue
index 6e7a48d7d..a189666de 100644
--- a/packages/vant/src/toast/demo/index.vue
+++ b/packages/vant/src/toast/demo/index.vue
@@ -11,6 +11,7 @@ import VanToast, {
   showLoadingToast,
 } from '..';
 import type { LoadingType } from '../../loading';
+import type { ToastWordBreak } from '../types';
 
 const t = useTranslate({
   'zh-CN': {
@@ -23,6 +24,9 @@ const t = useTranslate({
     title2: '加载提示',
     title3: '成功/失败提示',
     success: '成功提示',
+    breakAll: '换行时截断单词',
+    breakWord: '换行时不截断单词',
+    wordBreak: '文字换行方式',
     customIcon: '自定义图标',
     customImage: '自定义图片',
     loadingType: '自定义加载图标',
@@ -42,6 +46,9 @@ const t = useTranslate({
     title2: 'Loading',
     title3: 'Success/Fail',
     success: 'Success',
+    wordBreak: 'Word Break',
+    breakAll: 'Break All',
+    breakWord: 'Break Word',
     customIcon: 'Custom Icon',
     customImage: 'Custom Image',
     loadingType: 'Loading Type',
@@ -108,6 +115,13 @@ const showCustomToast = () => {
   }, 1000);
 };
 
+const showWordBreakToast = (wordBreak: ToastWordBreak) => {
+  showToast({
+    message: 'This message will contain a incomprehensibilities long word.',
+    wordBreak,
+  });
+};
+
 const show = ref(false);
 const image = cdnURL('cat.jpeg');
 </script>
@@ -143,6 +157,19 @@ const image = cdnURL('cat.jpeg');
     <van-cell is-link :title="t('positionBottom')" @click="showBottomToast" />
   </demo-block>
 
+  <demo-block card :title="t('wordBreak')">
+    <van-cell
+      is-link
+      :title="t('breakAll')"
+      @click="showWordBreakToast('break-all')"
+    />
+    <van-cell
+      is-link
+      :title="t('breakWord')"
+      @click="showWordBreakToast('break-word')"
+    />
+  </demo-block>
+
   <demo-block card :title="t('updateMessage')">
     <van-cell is-link :title="t('updateMessage')" @click="showCustomToast" />
   </demo-block>
diff --git a/packages/vant/src/toast/index.less b/packages/vant/src/toast/index.less
index d665845de..5dffdd564 100644
--- a/packages/vant/src/toast/index.less
+++ b/packages/vant/src/toast/index.less
@@ -46,11 +46,6 @@
       word-wrap: normal;
     }
 
-    &-all {
-      word-wrap: normal;
-      word-break: break-all;
-    }
-
     &-word {
       word-break: normal;
       word-wrap: break-word;
diff --git a/packages/vant/src/toast/index.ts b/packages/vant/src/toast/index.ts
index e66f83ca5..edd4a73fa 100644
--- a/packages/vant/src/toast/index.ts
+++ b/packages/vant/src/toast/index.ts
@@ -21,6 +21,7 @@ export type {
   ToastOptions,
   ToastPosition,
   ToastThemeVars,
+  ToastWordBreak,
 } from './types';
 
 declare module 'vue' {
diff --git a/packages/vant/src/toast/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/toast/test/__snapshots__/demo.spec.ts.snap
index f11efc1e7..121fe8928 100644
--- a/packages/vant/src/toast/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/toast/test/__snapshots__/demo.spec.ts.snap
@@ -115,6 +115,32 @@ exports[`should render demo and match snapshot 1`] = `
     </i>
   </div>
 </div>
+<div>
+  <div class="van-cell van-cell--clickable"
+       role="button"
+       tabindex="0"
+  >
+    <div class="van-cell__title">
+      <span>
+        Break All
+      </span>
+    </div>
+    <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+    </i>
+  </div>
+  <div class="van-cell van-cell--clickable"
+       role="button"
+       tabindex="0"
+  >
+    <div class="van-cell__title">
+      <span>
+        Break Word
+      </span>
+    </div>
+    <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+    </i>
+  </div>
+</div>
 <div>
   <div class="van-cell van-cell--clickable"
        role="button"
diff --git a/packages/vant/src/toast/types.ts b/packages/vant/src/toast/types.ts
index a445a3b68..53e477dc9 100644
--- a/packages/vant/src/toast/types.ts
+++ b/packages/vant/src/toast/types.ts
@@ -4,7 +4,7 @@ import type { Numeric } from '../utils';
 
 export type ToastType = 'text' | 'loading' | 'success' | 'fail' | 'html';
 export type ToastPosition = 'top' | 'middle' | 'bottom';
-export type ToastWordBreak = 'break-all' | 'break-word' | 'break-normal';
+export type ToastWordBreak = 'break-all' | 'break-word' | 'normal';
 
 export type ToastOptions = {
   icon?: string;