docs(Dialog): add jsx faq (#8624)

src/dialog/README.md

@@ -164,7 +164,7 @@ export default {
 | lockScroll | Whether to lock body scroll | _boolean_ | `true` |
 | allowHtml | Whether to allow HTML rendering in message | _boolean_ | `false` |
 | beforeClose | Callback function before close | _(action) => boolean \| Promise_ | - |
-| transition | Transition, equivalent to `name` prop of [transtion](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - |
+| transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - |
 | teleport | Return the mount node for Dialog | _string \| Element_ | `body` |
 
 ### Props
@@ -192,7 +192,7 @@ export default {
 | lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
 | allow-html | Whether to allow HTML rendering in message | _boolean_ | `false` |
 | before-close | Callback function before close | _(action) => boolean \| Promise_ | - |
-| transition | Transition, equivalent to `name` prop of [transtion](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - |
+| transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - |
 | teleport | Return the mount node for Dialog | _string \| Element_ | - |
 
 ### Events

src/dialog/README.zh-CN.md

@@ -6,7 +6,7 @@
 
 ### 函数调用
 
-Dialog 是一个函数，调用后会直接在页面中弹出相应的模态框。
+`Dialog` 是一个函数，调用后会直接在页面中弹出相应的模态框。
 
 ```js
 import { Dialog } from 'vant';
@@ -191,7 +191,7 @@ export default {
 | lockScroll | 是否锁定背景滚动 | _boolean_ | `true` |
 | allowHtml | 是否允许 message 内容中渲染 HTML | _boolean_ | `false` |
 | beforeClose | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(action) => boolean \| Promise_ | - |
-| transition | 动画类名，等价于 [transtion](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | - |
+| transition | 动画类名，等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | - |
 | teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | `body` |
 
 ### Props
@@ -221,7 +221,7 @@ export default {
 | lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
 | allow-html | 是否允许 message 内容中渲染 HTML | _boolean_ | `false` |
 | before-close | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(action) => boolean \| Promise_ | - |
-| transition | 动画类名，等价于 [transtion](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | - |
+| transition | 动画类名，等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | - |
 | teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | - |
 
 ### Events
@@ -288,3 +288,16 @@ Dialog.alert({
   // on close
 });
 ```
+
+### 在 JSX 中渲染 Dialog 组件无法展示？
+
+请注意 `Dialog` 是一个函数，`Dialog.Component` 才是 Dialog 对应的组件。JSX 调用弹窗的正确姿势如下：
+
+```jsx
+export default {
+  setup() {
+    const show = ref(false);
+    return () => <Dialog.Component v-model={[show, 'show']} />;
+  },
+};
+```

src/image-preview/README.md

@@ -145,7 +145,7 @@ export default {
 | closeable | Whether to show close icon | _boolean_ | `false` |
 | closeIcon | Close icon name | _string_ | `clear` |
 | closeIconPosition | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
-| transition `v3.0.8` | Transition, equivalent to `name` prop of [transtion](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` |
+| transition `v3.0.8` | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` |
 | overlay-style `v3.0.8` | Custom overlay style | _object_ | - |
 | teleport | Return the mount node for ImagePreview | _string \| Element_ | - |
 
@@ -167,7 +167,7 @@ export default {
 | closeable | Whether to show close icon | _boolean_ | `false` |
 | close-icon | Close icon name | _string_ | `clear` |
 | close-icon-position | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
-| transition `v3.0.8` | Transition, equivalent to `name` prop of [transtion](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` |
+| transition `v3.0.8` | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` |
 | overlay-style `v3.0.8` | Custom overlay style | _object_ | - |
 | teleport | Return the mount node for ImagePreview | _string \| Element_ | - |
 

src/image-preview/README.zh-CN.md

@@ -6,7 +6,7 @@
 
 ### 函数调用
 
-ImagePreview 是一个函数，调用函数后会直接在页面中展示图片预览界面。
+`ImagePreview` 是一个函数，调用函数后会直接在页面中展示图片预览界面。
 
 ```js
 import { ImagePreview } from 'vant';
@@ -16,7 +16,7 @@ ImagePreview(['https://img.yzcdn.cn/vant/apple-1.jpg']);
 
 ### 组件调用
 
-通过组件调用 ImagePreview 时，可以通过下面的方式进行注册。
+通过组件调用 `ImagePreview` 时，可以通过下面的方式进行注册。
 
 ```js
 import { createApp } from 'vue';
@@ -49,7 +49,7 @@ ImagePreview([
 
 ### 指定初始位置
 
-ImagePreview 支持传入配置对象，并通过 `startPosition` 选项指定图片的初始位置（索引值）。
+`ImagePreview` 支持传入配置对象，并通过 `startPosition` 选项指定图片的初始位置（索引值）。
 
 ```js
 ImagePreview({
@@ -176,7 +176,7 @@ export default {
 | closeable | 是否显示关闭图标 | _boolean_ | `false` |
 | closeIcon | 关闭图标名称或图片链接 | _string_ | `clear` |
 | closeIconPosition | 关闭图标位置，可选值为 `top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
-| transition `v3.0.8` | 动画类名，等价于 [transtion](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | `van-fade` |
+| transition `v3.0.8` | 动画类名，等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | `van-fade` |
 | overlay-style `v3.0.8` | 自定义遮罩层样式 | _object_ | - |
 | teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | - |
 
@@ -200,7 +200,7 @@ export default {
 | closeable | 是否显示关闭图标 | _boolean_ | `false` |
 | close-icon | 关闭图标名称或图片链接 | _string_ | `clear` |
 | close-icon-position | 关闭图标位置，可选值为 `top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
-| transition `v3.0.8` | 动画类名，等价于 [transtion](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | `van-fade` |
+| transition `v3.0.8` | 动画类名，等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | `van-fade` |
 | overlay-style `v3.0.8` | 自定义遮罩层样式 | _object_ | - |
 | teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | - |
 
@@ -268,3 +268,16 @@ export default {
 ### 在桌面端无法操作组件？
 
 参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。
+
+### 在 JSX 中渲染 ImagePreview 组件无法展示？
+
+请注意 `ImagePreview` 是一个函数，`ImagePreview.Component` 才是 ImagePreview 对应的组件。JSX 调用图片预览的正确姿势如下：
+
+```jsx
+export default {
+  setup() {
+    const show = ref(false);
+    return () => <ImagePreview.Component v-model={[show, 'show']} />;
+  },
+};
+```

src/popup/README.md

@@ -136,7 +136,7 @@ export default {
 | closeable | Whether to show close icon | _boolean_ | `false` |
 | close-icon | Close icon name | _string_ | `cross` |
 | close-icon-position | Close Icon Position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
-| transition | Transition, equivalent to `name` prop of [transtion](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - |
+| transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - |
 | transition-appear | Whether to apply transition on initial render | _boolean_ | `false` |
 | teleport | Return the mount node for Popup | _string \| Element_ | - |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `false` |

src/popup/README.zh-CN.md

@@ -140,7 +140,7 @@ export default {
 | closeable | 是否显示关闭图标 | _boolean_ | `false` |
 | close-icon | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
 | close-icon-position | 关闭图标位置，可选值为 `top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
-| transition | 动画类名，等价于 [transtion](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | - |
+| transition | 动画类名，等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | - |
 | transition-appear | 是否在初始渲染时启用过渡动画 | _boolean_ | `false` |
 | teleport | 指定挂载的节点 | _string \| Element_ | - |
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` |

src/stepper/Stepper.tsx

@@ -193,13 +193,13 @@ export default defineComponent({
         input.value = formatted;
       }
 
-      // perfer number type
+      // prefer number type
       const isNumeric = formatted === String(+formatted);
       setValue(isNumeric ? +formatted : formatted);
     };
 
     const onFocus = (event: Event) => {
-      // readonly not work in lagacy mobile safari
+      // readonly not work in legacy mobile safari
       if (props.disableInput) {
         inputRef.value?.blur();
       } else {
@@ -317,7 +317,7 @@ export default defineComponent({
           style={inputStyle.value}
           disabled={props.disabled}
           readonly={props.disableInput}
-          // set keyboard in mordern browers
+          // set keyboard in modern browsers
           inputmode={props.integer ? 'numeric' : 'decimal'}
           placeholder={props.placeholder}
           aria-valuemax={+props.max}

src/toast/README.md

@@ -172,7 +172,7 @@ Toast.resetDefaultOptions('loading');
 | overlayStyle `v3.0.4` | Custom overlay style | _object_ | - |
 | onOpened | Callback function after opened | _Function_ | - |
 | onClose | Callback function after close | _Function_ | - |
-| transition | Transition, equivalent to `name` prop of [transtion](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` |
+| transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` |
 | teleport | Return the mount node for Toast | _string \| Element_ | `body` |
 
 ### Less Variables

src/toast/README.zh-CN.md

@@ -181,7 +181,7 @@ Toast.resetDefaultOptions('loading');
 | overlayStyle `v3.0.4` | 自定义遮罩层样式 | _object_ | - |
 | onOpened | 完全展示后的回调函数 | _Function_ | - |
 | onClose | 关闭时的回调函数 | _Function_ | - |
-| transition | 动画类名，等价于 [transtion](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的`name`属性 | _string_ | `van-fade` |
+| transition | 动画类名，等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的`name`属性 | _string_ | `van-fade` |
 | teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | `body` |
 
 ### 样式变量