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

This commit is contained in:
neverland 2021-04-26 20:57:08 +08:00 committed by GitHub
parent 0e1609f017
commit 324fd08f3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 4 deletions

View File

@ -6,7 +6,7 @@
### 函数调用 ### 函数调用
Dialog 是一个函数,调用后会直接在页面中弹出相应的模态框。 `Dialog` 是一个函数,调用后会直接在页面中弹出相应的模态框。
```js ```js
import { Dialog } from 'vant'; import { Dialog } from 'vant';
@ -288,3 +288,16 @@ Dialog.alert({
// on close // on close
}); });
``` ```
### 在 JSX 中渲染 Dialog 组件无法展示?
请注意 `Dialog` 是一个函数,`Dialog.Component` 才是 Dialog 对应的组件。JSX 调用弹窗的正确姿势如下:
```jsx
export default {
setup() {
const show = ref(false);
return () => <Dialog.Component v-model={[show, 'show']} />;
},
};
```

View File

@ -6,7 +6,7 @@
### 函数调用 ### 函数调用
ImagePreview 是一个函数,调用函数后会直接在页面中展示图片预览界面。 `ImagePreview` 是一个函数,调用函数后会直接在页面中展示图片预览界面。
```js ```js
import { ImagePreview } from 'vant'; import { ImagePreview } from 'vant';
@ -16,7 +16,7 @@ ImagePreview(['https://img.yzcdn.cn/vant/apple-1.jpg']);
### 组件调用 ### 组件调用
通过组件调用 ImagePreview 时,可以通过下面的方式进行注册。 通过组件调用 `ImagePreview` 时,可以通过下面的方式进行注册。
```js ```js
import { createApp } from 'vue'; import { createApp } from 'vue';
@ -49,7 +49,7 @@ ImagePreview([
### 指定初始位置 ### 指定初始位置
ImagePreview 支持传入配置对象,并通过 `startPosition` 选项指定图片的初始位置(索引值)。 `ImagePreview` 支持传入配置对象,并通过 `startPosition` 选项指定图片的初始位置(索引值)。
```js ```js
ImagePreview({ ImagePreview({
@ -268,3 +268,16 @@ export default {
### 在桌面端无法操作组件? ### 在桌面端无法操作组件?
参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。 参见[桌面端适配](#/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']} />;
},
};
```