From c98f3e19c938e7fb0ba376722de8d1470418569f Mon Sep 17 00:00:00 2001
From: Gavin <19986739+wjw-gavin@users.noreply.github.com>
Date: Wed, 19 Oct 2022 10:08:57 +0800
Subject: [PATCH] feat(Toast): add wordBreak prop (#11147)

---
 packages/vant/src/toast/README.md       |  9 ++++++++-
 packages/vant/src/toast/README.zh-CN.md |  9 ++++++++-
 packages/vant/src/toast/Toast.tsx       |  5 +++--
 packages/vant/src/toast/index.less      | 20 ++++++++++++++++++--
 packages/vant/src/toast/types.ts        |  2 ++
 5 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/packages/vant/src/toast/README.md b/packages/vant/src/toast/README.md
index d65983e51..0cbaded42 100644
--- a/packages/vant/src/toast/README.md
+++ b/packages/vant/src/toast/README.md
@@ -199,6 +199,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_ | `''` |
 | icon | Custom icon | _string_ | - |
 | iconSize | Custom icon size | _number \| string_ | `36px` |
 | iconPrefix | Icon className prefix | _string_ | `van-icon` |
@@ -229,7 +230,13 @@ You can use following slots when using `Toast` component:
 The component exports the following type definitions:
 
 ```ts
-import type { ToastType, ToastProps, ToastOptions, ToastPosition } from 'vant';
+import type {
+  ToastType,
+  ToastProps,
+  ToastOptions,
+  ToastPosition,
+  ToastWordBreak,
+} from 'vant';
 ```
 
 ## Theming
diff --git a/packages/vant/src/toast/README.zh-CN.md b/packages/vant/src/toast/README.zh-CN.md
index b793b3005..465f3b1de 100644
--- a/packages/vant/src/toast/README.zh-CN.md
+++ b/packages/vant/src/toast/README.zh-CN.md
@@ -216,6 +216,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_ | `''` |
 | 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` |
@@ -246,7 +247,13 @@ Vant 中导出了以下 Toast 相关的辅助函数：
 组件导出以下类型定义：
 
 ```ts
-import type { ToastType, ToastProps, ToastOptions, ToastPosition } from 'vant';
+import type {
+  ToastType,
+  ToastProps,
+  ToastOptions,
+  ToastPosition,
+  ToastWordBreak,
+} from 'vant';
 ```
 
 ## 主题定制
diff --git a/packages/vant/src/toast/Toast.tsx b/packages/vant/src/toast/Toast.tsx
index 940b15238..98da6b022 100644
--- a/packages/vant/src/toast/Toast.tsx
+++ b/packages/vant/src/toast/Toast.tsx
@@ -27,7 +27,7 @@ import { Popup } from '../popup';
 import { Loading, LoadingType } from '../loading';
 
 // Types
-import type { ToastType, ToastPosition } from './types';
+import type { ToastType, ToastPosition, ToastWordBreak } from './types';
 
 const [name, bem] = createNamespace('toast');
 
@@ -51,6 +51,7 @@ export const toastProps = {
   duration: makeNumberProp(2000),
   position: makeStringProp<ToastPosition>('middle'),
   teleport: [String, Object] as PropType<TeleportProps['to']>,
+  wordBreak: String as PropType<ToastWordBreak>,
   className: unknownProp,
   iconPrefix: String,
   transition: makeStringProp('van-fade'),
@@ -151,7 +152,7 @@ export default defineComponent({
     return () => (
       <Popup
         class={[
-          bem([props.position, { [props.type]: !props.icon }]),
+          bem([props.position, props.wordBreak, { [props.type]: !props.icon }]),
           props.className,
         ]}
         lockScroll={false}
diff --git a/packages/vant/src/toast/index.less b/packages/vant/src/toast/index.less
index 1caf17eed..d665845de 100644
--- a/packages/vant/src/toast/index.less
+++ b/packages/vant/src/toast/index.less
@@ -35,12 +35,28 @@
 
   // allow newline character
   white-space: pre-wrap;
-  text-align: center;
-  // https://github.com/vant-ui/vant/issues/8959
   word-break: break-all;
+  text-align: center;
   background: var(--van-toast-background);
   border-radius: var(--van-toast-radius);
 
+  &--break {
+    &-normal {
+      word-break: normal;
+      word-wrap: normal;
+    }
+
+    &-all {
+      word-wrap: normal;
+      word-break: break-all;
+    }
+
+    &-word {
+      word-break: normal;
+      word-wrap: break-word;
+    }
+  }
+
   &--unclickable {
     // lock scroll
     overflow: hidden;
diff --git a/packages/vant/src/toast/types.ts b/packages/vant/src/toast/types.ts
index 603e64d35..a445a3b68 100644
--- a/packages/vant/src/toast/types.ts
+++ b/packages/vant/src/toast/types.ts
@@ -4,6 +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 ToastOptions = {
   icon?: string;
@@ -20,6 +21,7 @@ export type ToastOptions = {
   className?: unknown;
   transition?: string;
   iconPrefix?: string;
+  wordBreak?: ToastWordBreak;
   loadingType?: LoadingType;
   forbidClick?: boolean;
   closeOnClick?: boolean;