mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 05:42:44 +08:00
docs: improve use component guide (#11020)
This commit is contained in:
neverland
GitHub
parent
5d8282ddae
commit
9418fe371d
@ -104,9 +104,9 @@ showConfirmDialog({
|
||||
});
|
||||
```
|
||||
|
||||
### Advanced Usage
|
||||
### Use Dialog Component
|
||||
|
||||
If you need to render vue components within a dialog, you can use dialog component.
|
||||
If you need to render Vue components within a Dialog, you can use the Dialog component.
|
||||
|
||||
```html
|
||||
<van-dialog v-model:show="show" title="Title" show-cancel-button>
|
||||
@ -129,6 +129,8 @@ export default {
|
||||
|
||||
### Methods
|
||||
|
||||
Vant exports following Dialog utility functions:
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| --- | --- | --- | --- |
|
||||
| showDialog | Show dialog | _options: DialogOptions_ | `Promise<void>` |
|
||||
|
||||
@ -121,9 +121,9 @@ showConfirmDialog({
|
||||
});
|
||||
```
|
||||
|
||||
### 组件调用
|
||||
### 使用 Dialog 组件
|
||||
|
||||
如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。
|
||||
如果需要在 Dialog 内嵌入组件或其他自定义内容，可以直接使用 Dialog 组件，并使用默认插槽进行定制。使用前需要通过 `app.use` 等方式注册组件。
|
||||
|
||||
```html
|
||||
<van-dialog v-model:show="show" title="标题" show-cancel-button>
|
||||
@ -146,6 +146,8 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
Vant 中导出了以下 Dialog 相关的辅助函数：
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
| showDialog | 展示弹窗 | _options: DialogOptions_ | `Promise<void>` |
|
||||
@ -156,7 +158,7 @@ export default {
|
||||
|
||||
### DialogOptions
|
||||
|
||||
通过函数调用 `Dialog` 时，支持传入以下选项：
|
||||
调用 `showDialog` 等方法时，支持传入以下选项：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -17,7 +17,7 @@ const t = useTranslate({
|
||||
'如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
|
||||
beforeClose: '异步关闭',
|
||||
roundButton: '圆角按钮样式',
|
||||
componentCall: '组件调用',
|
||||
useComponent: '使用 Dialog 组件',
|
||||
},
|
||||
'en-US': {
|
||||
title: 'Title',
|
||||
@ -29,7 +29,7 @@ const t = useTranslate({
|
||||
content3: 'Content',
|
||||
beforeClose: 'Before Close',
|
||||
roundButton: 'Round Button Style',
|
||||
componentCall: 'Component Call',
|
||||
useComponent: 'Use Dialog Component',
|
||||
},
|
||||
});
|
||||
|
||||
@ -101,8 +101,8 @@ const onClickBeforeClose = () => {
|
||||
<van-cell is-link :title="t('beforeClose')" @click="onClickBeforeClose" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block card :title="t('componentCall')">
|
||||
<van-cell is-link :title="t('componentCall')" @click="show = true" />
|
||||
<demo-block card :title="t('useComponent')">
|
||||
<van-cell is-link :title="t('useComponent')" @click="show = true" />
|
||||
<van-dialog
|
||||
v-model:show="show"
|
||||
:title="t('title')"
|
||||
|
||||
@ -86,7 +86,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Component Call
|
||||
Use Dialog Component
|
||||
</span>
|
||||
</div>
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||
|
||||
@ -105,7 +105,7 @@ setTimeout(() => {
|
||||
}, 2000);
|
||||
```
|
||||
|
||||
### Component Call
|
||||
### Use ImagePreview Component
|
||||
|
||||
```html
|
||||
<van-image-preview v-model:show="show" :images="images" @change="onChange">
|
||||
@ -140,7 +140,15 @@ export default {
|
||||
|
||||
## API
|
||||
|
||||
### Options
|
||||
### Methods
|
||||
|
||||
Vant exports following ImagePreview utility functions:
|
||||
|
||||
| Methods | Description | Attribute | Return value |
|
||||
| ---------------- | ------------------ | --------- | -------------------- | --------------------- |
|
||||
| showImagePreview | Show image preview | `string[] | ImagePreviewOptions` | imagePreview Instance |
|
||||
|
||||
### ImagePreviewOptions
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -114,9 +114,9 @@ setTimeout(() => {
|
||||
}, 2000);
|
||||
```
|
||||
|
||||
### 组件调用
|
||||
### 使用 ImagePreview 组件
|
||||
|
||||
如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `app.use` 注册组件。
|
||||
如果需要在 ImagePreview 内嵌入组件或其他自定义内容，可以直接使用 ImagePreview 组件，并使用 `index` 插槽进行定制。使用前需要通过 `app.use` 等方式注册组件。
|
||||
|
||||
```html
|
||||
<van-image-preview v-model:show="show" :images="images" @change="onChange">
|
||||
@ -151,9 +151,17 @@ export default {
|
||||
|
||||
## API
|
||||
|
||||
### Options
|
||||
### 方法
|
||||
|
||||
通过函数调用 `showImagePreview` 时，支持传入以下选项：
|
||||
Vant 中导出了以下 ImagePreview 相关的辅助函数：
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| ---------------- | ------------ | --------- | -------------------- | ----------------- |
|
||||
| showImagePreview | 展示图片预览 | `string[] | ImagePreviewOptions` | imagePreview 实例 |
|
||||
|
||||
### ImagePreviewOptions
|
||||
|
||||
调用 `showImagePreview` 方法时，支持传入以下选项：
|
||||
|
||||
| 参数名 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -18,7 +18,7 @@ const t = useTranslate({
|
||||
closeEvent: '监听关闭事件',
|
||||
customConfig: '传入配置项',
|
||||
startPosition: '指定初始位置',
|
||||
componentCall: '组件调用',
|
||||
useComponent: '使用 ImagePreview 组件',
|
||||
index: (index: number) => `第${index + 1}页`,
|
||||
},
|
||||
'en-US': {
|
||||
@ -29,7 +29,7 @@ const t = useTranslate({
|
||||
closeEvent: 'Close Event',
|
||||
customConfig: 'Custom Config',
|
||||
startPosition: 'Set Start Position',
|
||||
componentCall: 'Component Call',
|
||||
useComponent: 'Use ImagePreview Component',
|
||||
index: (index: number) => `Page: ${index}`,
|
||||
},
|
||||
});
|
||||
@ -106,8 +106,8 @@ const showFunctionCall = (options: Partial<ImagePreviewOptions> = {}) => {
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block card :title="t('componentCall')">
|
||||
<van-cell is-link :title="t('componentCall')" @click="showComponentCall" />
|
||||
<demo-block card :title="t('useComponent')">
|
||||
<van-cell is-link :title="t('useComponent')" @click="showComponentCall" />
|
||||
<van-image-preview v-model:show="show" :images="images" @change="onChange">
|
||||
<template #index>{{ t('index', index) }}</template>
|
||||
</van-image-preview>
|
||||
|
||||
@ -75,10 +75,10 @@ showNotify({
|
||||
});
|
||||
```
|
||||
|
||||
### Component Call
|
||||
### Use Notify Component
|
||||
|
||||
```html
|
||||
<van-button type="primary" text="Component Call" @click="showNotify" />
|
||||
<van-button type="primary" text="Use Notify Component" @click="showNotify" />
|
||||
<van-notify v-model:show="show" type="success">
|
||||
<van-icon name="bell" style="margin-right: 4px;" />
|
||||
<span>Content</span>
|
||||
@ -111,14 +111,16 @@ export default {
|
||||
|
||||
### Methods
|
||||
|
||||
| Methods | Attribute | Return value | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| showNotify | `options \| message` | notify instance | Show notify |
|
||||
| closeNotify | - | `void` | Close notify |
|
||||
| setNotifyDefaultOptions | `options` | `void` | Set default options of all notifies |
|
||||
| resetNotifyDefaultOptions | - | `void` | Reset default options of all notifies |
|
||||
Vant exports following Notify utility functions:
|
||||
|
||||
### Options
|
||||
| Methods | Description | Attribute | Return value |
|
||||
| --- | --- | --- | --- |
|
||||
| showNotify | Show notify | `NotifyOptions \| string` | notify instance |
|
||||
| closeNotify | Close notify | - | `void` |
|
||||
| setNotifyDefaultOptions | Set default options of all notifies | `NotifyOptions` | `void` |
|
||||
| resetNotifyDefaultOptions | Reset default options of all notifies | - | `void` |
|
||||
|
||||
### NotifyOptions
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -86,9 +86,9 @@ showNotify({
|
||||
});
|
||||
```
|
||||
|
||||
### 组件调用
|
||||
### 使用 Notify 组件
|
||||
|
||||
如果需要在 Notify 内嵌入组件或其他自定义内容，可以使用组件调用的方式。
|
||||
如果需要在 Notify 内嵌入组件或其他自定义内容，可以直接使用 Notify 组件，并使用默认插槽进行定制。使用前需要通过 `app.use` 等方式注册组件。
|
||||
|
||||
```html
|
||||
<van-button type="primary" text="组件调用" @click="showNotify" />
|
||||
@ -124,14 +124,18 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
Vant 中导出了以下 Notify 相关的辅助函数：
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
| showNotify | 展示提示 | `options \| message` | notify 实例 |
|
||||
| showNotify | 展示提示 | `NotifyOptions \| string` | notify 实例 |
|
||||
| closeNotify | 关闭提示 | - | `void` |
|
||||
| setNotifyDefaultOptions | 修改默认配置，影响所有的 `showNotify` 调用 | `options` | `void` |
|
||||
| setNotifyDefaultOptions | 修改默认配置，影响所有的 `showNotify` 调用 | `NotifyOptions` | `void` |
|
||||
| resetNotifyDefaultOptions | 重置默认配置，影响所有的 `showNotify` 调用 | - | `void` |
|
||||
|
||||
### Options
|
||||
### NotifyOptions
|
||||
|
||||
调用 `showNotify` 等方法时，支持传入以下选项：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -15,7 +15,7 @@ const t = useTranslate({
|
||||
notifyType: '通知类型',
|
||||
customColor: '自定义颜色',
|
||||
customNotify: '自定义配置',
|
||||
componentCall: '组件调用',
|
||||
useComponent: '使用 Notify 组件',
|
||||
customDuration: '自定义时长',
|
||||
customPosition: '自定义位置',
|
||||
},
|
||||
@ -28,7 +28,7 @@ const t = useTranslate({
|
||||
notifyType: 'Notify Type',
|
||||
customColor: 'Custom Color',
|
||||
customNotify: 'Custom Notify',
|
||||
componentCall: 'Component Call',
|
||||
useComponent: 'Use Notify Component',
|
||||
customDuration: 'Custom Duration',
|
||||
customPosition: 'Custom Position',
|
||||
},
|
||||
@ -103,8 +103,8 @@ const showComponentCall = () => {
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block card :title="t('componentCall')">
|
||||
<van-cell is-link :title="t('componentCall')" @click="showComponentCall" />
|
||||
<demo-block card :title="t('useComponent')">
|
||||
<van-cell is-link :title="t('useComponent')" @click="showComponentCall" />
|
||||
|
||||
<van-notify v-model:show="show" type="success">
|
||||
<van-icon name="bell" style="margin-right: 4px" />
|
||||
|
||||
@ -110,7 +110,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Component Call
|
||||
Use Notify Component
|
||||
</span>
|
||||
</div>
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||
|
||||
@ -179,7 +179,7 @@ export default {
|
||||
|
||||
### Methods
|
||||
|
||||
Vant export following utility functions:
|
||||
Vant exports following Toast utility functions:
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -169,7 +169,7 @@ resetToastDefaultOptions('loading');
|
||||
|
||||
### 使用 Toast 组件
|
||||
|
||||
如果需要在 Toast 内嵌入组件或其他自定义内容，可以直接使用 Toast 组件，并使用 message 插槽进行定制。
|
||||
如果需要在 Toast 内嵌入组件或其他自定义内容，可以直接使用 Toast 组件，并使用 message 插槽进行定制。使用前需要通过 `app.use` 等方式注册组件。
|
||||
|
||||
```html
|
||||
<van-toast v-model:show="show" style="padding: 0">
|
||||
@ -194,7 +194,7 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
Vant 中导出了以下 Toast 辅助函数：
|
||||
Vant 中导出了以下 Toast 相关的辅助函数：
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
@ -209,6 +209,8 @@ Vant 中导出了以下 Toast 辅助函数：
|
||||
|
||||
### ToastOptions 数据结构
|
||||
|
||||
调用 `showToast` 等方法时，支持传入以下选项：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| type | 提示类型，可选值为 `loading` `success`<br>`fail` `html` | _ToastType_ | `text` |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user