mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(ActionSheet): update demo and documents
This commit is contained in:
陈嘉涵
parent
4b54ec6a18
commit
6418e97fc8
@ -42,28 +42,7 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Status
|
||||
|
||||
```html
|
||||
<van-action-sheet v-model="show" :actions="actions" />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Option', color: '#07c160' },
|
||||
{ loading: true },
|
||||
{ name: 'Disabled Option', disabled: true }
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### ActionSheet with cancel button
|
||||
### Show Cancel Button
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
@ -98,12 +77,44 @@ export default {
|
||||
<van-action-sheet v-model="show" :actions="actions" description="Description" />
|
||||
```
|
||||
|
||||
### ActionSheet with title
|
||||
### Option Status
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="Cancel"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Option', color: '#07c160' },
|
||||
{ loading: true },
|
||||
{ name: 'Disabled Option', disabled: true }
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Custom Panel
|
||||
|
||||
```html
|
||||
<van-action-sheet v-model="show" title="Title">
|
||||
<p>Content</p>
|
||||
<div class="content">Content</div>
|
||||
</van-action-sheet>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
padding: 16px 16px 160px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## API
|
||||
@ -111,26 +122,37 @@ export default {
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| ---------------------- | --------------------------------------------- | ------------------------- | ------- |
|
||||
|------|------|------|------|
|
||||
| actions | Options | _Action[]_ | `[]` |
|
||||
| title | Title | _string_ | - |
|
||||
| cancel-text | Text of cancel button | _string_ | - |
|
||||
| description `v2.2.8` | Description above the options | _string_ | - |
|
||||
| overlay | Whether to show overlay | _boolean_ | `true` |
|
||||
| round `v2.0.9` | Whether to show round corner | _boolean_ | `true` |
|
||||
| close-icon `v2.2.13` | Close icon name | _string_ | `cross` |
|
||||
| duration `v2.0.3` | Transition duration, unit second | _number_ | `0.3` |
|
||||
| round `v2.0.9` | Whether to show round corner | _boolean_ | `true` |
|
||||
| overlay | Whether to show overlay | _boolean_ | `true` |
|
||||
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
|
||||
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
|
||||
| close-on-click-action | Whether to close when click action | _boolean_ | `false` |
|
||||
| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` |
|
||||
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
|
||||
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
|
||||
| duration `v2.0.3` | Transition duration, unit second | _number_ | `0.3` |
|
||||
| get-container | Return the mount node for action-sheet | _string \| () => Element_ | - |
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
|
||||
| get-container | Return the mount node for action-sheet | _string \| () => Element_ | - |
|
||||
|
||||
### Data Structure of Action
|
||||
|
||||
| Key | Description | Type |
|
||||
|------|------|------|
|
||||
| name | Title | _string_ |
|
||||
| subname | Subtitle | _string_ |
|
||||
| color | Text color | _string_ |
|
||||
| className | className for the option | _any_ |
|
||||
| loading | Whether to be loading status | _boolean_ |
|
||||
| disabled | Whether to be disabled | _boolean_ |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
| ------------- | --------------------------------- | ----------- |
|
||||
|------|------|------|
|
||||
| select | Triggered when click option | item, index |
|
||||
| cancel | Triggered when cancel click | - |
|
||||
| click-overlay | Triggered when click overlay | - |
|
||||
@ -138,14 +160,3 @@ export default {
|
||||
| opened | Triggered when opened ActionSheet | - |
|
||||
| close | Triggered when close ActionSheet | - |
|
||||
| closed | Triggered when closed ActionSheet | - |
|
||||
|
||||
### Data Structure of Action
|
||||
|
||||
| Key | Description | Type |
|
||||
| --------- | ---------------------------- | --------- |
|
||||
| name | Title | _string_ |
|
||||
| subname | Subtitle | _string_ |
|
||||
| color | Text color | _string_ |
|
||||
| className | className for the option | _any_ |
|
||||
| loading | Whether to be loading status | _boolean_ |
|
||||
| disabled | Whether to be disabled | _boolean_ |
|
||||
|
||||
@ -35,8 +35,8 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
onSelect(item) {
|
||||
// 默认情况下，点击选项时不会自动关闭菜单
|
||||
// 可以通过 close-on-click-action 属性开启自动关闭
|
||||
// 默认情况下点击选项时不会自动收起
|
||||
// 可以通过 close-on-click-action 属性开启自动收起
|
||||
this.show = false;
|
||||
Toast(item.name);
|
||||
}
|
||||
@ -44,29 +44,6 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
### 选项状态
|
||||
|
||||
选项可以设置为加载状态或禁用状态，也可以通过`color`设置选项颜色
|
||||
|
||||
```html
|
||||
<van-action-sheet v-model="show" :actions="actions" />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: '选项', color: '#07c160' },
|
||||
{ loading: true },
|
||||
{ name: '禁用选项', disabled: true }
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 展示取消按钮
|
||||
|
||||
设置`cancel-text`属性后，会在底部展示取消按钮，点击后关闭当前菜单
|
||||
@ -110,14 +87,48 @@ export default {
|
||||
/>
|
||||
```
|
||||
|
||||
### 展示标题栏
|
||||
### 选项状态
|
||||
|
||||
通过设置`title`属性展示标题栏，同时可以使用插槽自定义菜单内容
|
||||
可以将选项设置为加载状态或禁用状态，或者通过`color`设置选项颜色
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="取消"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: '选项', color: '#07c160' },
|
||||
{ loading: true },
|
||||
{ name: '禁用选项', disabled: true }
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 自定义面板
|
||||
|
||||
通过插槽可以自定义菜单的展示内容，同时可以使用`title`属性展示标题栏
|
||||
|
||||
```html
|
||||
<van-action-sheet v-model="show" title="标题">
|
||||
<p>内容</p>
|
||||
<div class="content">内容</div>
|
||||
</van-action-sheet>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
padding: 16px 16px 160px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## API
|
||||
@ -130,28 +141,16 @@ export default {
|
||||
| title | 顶部标题 | *string* | - |
|
||||
| cancel-text | 取消按钮文字 | *string* | - |
|
||||
| description `v2.2.8` | 选项上方的描述信息 | *string* | - |
|
||||
| overlay | 是否显示遮罩层 | *boolean* | `true` |
|
||||
| close-icon `v2.2.13` | 关闭图标名称或图片链接，可选值见 [Icon 组件](#/zh-CN/icon) | *string* | `cross` |
|
||||
| duration `v2.0.3` | 动画时长，单位秒 | *number* | `0.3` |
|
||||
| round `v2.0.9` | 是否显示圆角 | *boolean* | `true` |
|
||||
| close-icon `v2.2.13` | 关闭图标名称或图片链接 | *string* | `cross` |
|
||||
| overlay | 是否显示遮罩层 | *boolean* | `true` |
|
||||
| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` |
|
||||
| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` |
|
||||
| close-on-click-action | 是否在点击选项后关闭 | *boolean* | `false` |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |
|
||||
| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` |
|
||||
| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` |
|
||||
| duration `v2.0.3` | 动画时长，单位秒 | *number* | `0.3` |
|
||||
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - |
|
||||
| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| select | 选中选项时触发，禁用或加载状态下不会触发 | item: 选项对应的对象, index: 选择对应的索引 |
|
||||
| cancel | 取消按钮点击时触发 | - |
|
||||
| click-overlay | 点击遮罩层时触发 | - |
|
||||
| open | 打开菜单时触发 | - |
|
||||
| opened | 打开菜单且动画结束后触发 | - |
|
||||
| close | 关闭菜单时触发 | - |
|
||||
| closed | 关闭菜单且动画结束后触发 | - |
|
||||
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - |
|
||||
|
||||
### Action 数据结构
|
||||
|
||||
@ -166,6 +165,18 @@ export default {
|
||||
| loading | 是否为加载状态 | *boolean* |
|
||||
| disabled | 是否为禁用状态 | *boolean* |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| select | 选中选项时触发，禁用或加载状态下不会触发 | item: 选项对应的对象, index: 选择对应的索引 |
|
||||
| cancel | 取消按钮点击时触发 | - |
|
||||
| click-overlay | 点击遮罩层时触发 | - |
|
||||
| open | 打开菜单时触发 | - |
|
||||
| opened | 打开菜单且动画结束后触发 | - |
|
||||
| close | 关闭菜单时触发 | - |
|
||||
| closed | 关闭菜单且动画结束后触发 | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 引入时提示 dependencies not found？
|
||||
|
||||
@ -1,60 +1,58 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-button type="primary" @click="show1 = true">
|
||||
{{ $t('buttonText') }}
|
||||
</van-button>
|
||||
<van-cell is-link :title="$t('basicUsage')" @click="show.basic = true" />
|
||||
<van-cell is-link :title="$t('showCancel')" @click="show.cancel = true" />
|
||||
<van-cell
|
||||
is-link
|
||||
:title="$t('showDescription')"
|
||||
@click="show.description = true"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('optionStatus')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="$t('optionStatus')"
|
||||
@click="show.status = true"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customPanel')">
|
||||
<van-cell is-link :title="$t('customPanel')" @click="show.title = true" />
|
||||
</demo-block>
|
||||
|
||||
<van-action-sheet
|
||||
v-model="show1"
|
||||
v-model="show.basic"
|
||||
:actions="simpleActions"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('status')">
|
||||
<van-button type="primary" @click="show2 = true">
|
||||
{{ $t('buttonText') }}
|
||||
</van-button>
|
||||
<van-action-sheet
|
||||
v-model="show2"
|
||||
v-model="show.status"
|
||||
close-on-click-action
|
||||
:actions="statusActions"
|
||||
:cancel-text="$t('cancel')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('showCancel')">
|
||||
<van-button type="primary" @click="show3 = true">
|
||||
{{ $t('buttonText') }}
|
||||
</van-button>
|
||||
<van-action-sheet
|
||||
v-model="show3"
|
||||
v-model="show.cancel"
|
||||
:actions="simpleActions"
|
||||
close-on-click-action
|
||||
:cancel-text="$t('cancel')"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('showDescription')">
|
||||
<van-button type="primary" @click="show4 = true">
|
||||
{{ $t('buttonText') }}
|
||||
</van-button>
|
||||
<van-action-sheet
|
||||
v-model="show4"
|
||||
v-model="show.description"
|
||||
:actions="simpleActions"
|
||||
close-on-click-action
|
||||
:description="$t('description')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('showTitle')">
|
||||
<van-button type="primary" @click="show5 = true">
|
||||
{{ $t('buttonText') }}
|
||||
</van-button>
|
||||
<van-action-sheet v-model="show5" :title="$t('title')">
|
||||
<p>{{ $t('content') }}</p>
|
||||
<van-action-sheet v-model="show.title" :title="$t('title')">
|
||||
<div class="demo-action-sheet-content">{{ $t('content') }}</div>
|
||||
</van-action-sheet>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -64,34 +62,36 @@ import { GREEN } from '../../utils/constant';
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
buttonText: '弹出菜单',
|
||||
status: '选项状态',
|
||||
subname: '副文本',
|
||||
disabledOption: '禁用选项',
|
||||
showTitle: '展示标题栏',
|
||||
showCancel: '展示取消按钮',
|
||||
showDescription: '展示描述信息',
|
||||
buttonText: '弹出菜单',
|
||||
customPanel: '自定义面板',
|
||||
description: '这是一段描述信息',
|
||||
optionStatus: '选项状态',
|
||||
disabledOption: '禁用选项',
|
||||
showDescription: '展示描述信息',
|
||||
},
|
||||
'en-US': {
|
||||
buttonText: 'Show ActionSheet',
|
||||
status: 'Status',
|
||||
subname: 'Subname',
|
||||
disabledOption: 'Disabled Option',
|
||||
showTitle: 'ActionSheet with title',
|
||||
showCancel: 'ActionSheet with cancel button',
|
||||
showDescription: 'ActionSheet with description',
|
||||
showCancel: 'Show Cancel Button',
|
||||
buttonText: 'Show ActionSheet',
|
||||
customPanel: 'Custom Panel',
|
||||
description: 'Description',
|
||||
optionStatus: 'Option Status',
|
||||
disabledOption: 'Disabled Option',
|
||||
showDescription: 'Show Description',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false,
|
||||
show5: false,
|
||||
show: {
|
||||
basic: false,
|
||||
cancel: false,
|
||||
title: false,
|
||||
status: false,
|
||||
description: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
@ -115,7 +115,7 @@ export default {
|
||||
|
||||
methods: {
|
||||
onSelect(item) {
|
||||
this.show1 = false;
|
||||
this.show.basic = false;
|
||||
this.$toast(item.name);
|
||||
},
|
||||
|
||||
@ -130,13 +130,7 @@ export default {
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-action-sheet {
|
||||
background-color: @white;
|
||||
|
||||
.van-button {
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
|
||||
p {
|
||||
&-content {
|
||||
padding: @padding-md @padding-md @padding-md * 10;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,30 +2,36 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
弹出菜单
|
||||
</span></button>
|
||||
<!---->
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>基础用法</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
弹出菜单
|
||||
</span></button>
|
||||
<!---->
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>展示取消按钮</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
弹出菜单
|
||||
</span></button>
|
||||
<!---->
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>展示描述信息</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
弹出菜单
|
||||
</span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
弹出菜单
|
||||
</span></button>
|
||||
<!---->
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>选项状态</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>自定义面板</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user