mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Dialog): add jsx faq (#8624)
This commit is contained in:
parent
0e1609f017
commit
324fd08f3d
@ -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']} />;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
@ -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']} />;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
Loading…
x
Reference in New Issue
Block a user