mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(ActionSheet): improve demo
This commit is contained in:
chenjiahan
neverland
parent
31acd1dde1
commit
52dbc7563c
@ -16,6 +16,7 @@ Vue.use(ActionSheet);
|
||||
Use `actions` prop to set options of action-sheet.
|
||||
|
||||
```html
|
||||
<van-cell is-link title="Basic Usage" @click="show = true" />
|
||||
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
|
||||
```
|
||||
|
||||
@ -27,9 +28,9 @@ export default {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Option' },
|
||||
{ name: 'Option' },
|
||||
{ name: 'Option', subname: 'Description' },
|
||||
{ name: 'Option 1' },
|
||||
{ name: 'Option 2' },
|
||||
{ name: 'Option 3' },
|
||||
],
|
||||
};
|
||||
},
|
||||
@ -49,6 +50,7 @@ export default {
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="Cancel"
|
||||
close-on-click-action
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
```
|
||||
@ -60,11 +62,15 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Option 1' },
|
||||
{ name: 'Option 2' },
|
||||
{ name: 'Option 3' },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onCancel() {
|
||||
this.show = false;
|
||||
Toast('cancel');
|
||||
},
|
||||
},
|
||||
@ -73,18 +79,13 @@ export default {
|
||||
|
||||
### Show Description
|
||||
|
||||
```html
|
||||
<van-action-sheet v-model="show" :actions="actions" description="Description" />
|
||||
```
|
||||
|
||||
### Option Status
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="Cancel"
|
||||
@cancel="onCancel"
|
||||
description="Description"
|
||||
close-on-click-action
|
||||
/>
|
||||
```
|
||||
|
||||
@ -94,9 +95,35 @@ export default {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Option', color: '#07c160' },
|
||||
{ loading: true },
|
||||
{ name: 'Option 1' },
|
||||
{ name: 'Option 2' },
|
||||
{ name: 'Option 3', subname: 'Description' },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Option Status
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="Cancel"
|
||||
close-on-click-action
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Colored Option', color: '#07c160' },
|
||||
{ name: 'Disabled Option', disabled: true },
|
||||
{ name: 'Loading Option', loading: true },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
@ -17,9 +17,10 @@ Vue.use(ActionSheet);
|
||||
|
||||
### 基础用法
|
||||
|
||||
动作面板通过`actions`属性来定义选项，数组的每一项是一个对象，对象格式见文档下方表格。
|
||||
动作面板通过 `actions` 属性来定义选项，`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象格式见文档下方表格。
|
||||
|
||||
```html
|
||||
<van-cell is-link title="基础用法" @click="show = true" />
|
||||
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
|
||||
```
|
||||
|
||||
@ -30,11 +31,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: '选项' },
|
||||
{ name: '选项' },
|
||||
{ name: '选项', subname: '描述信息' },
|
||||
],
|
||||
actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -50,13 +47,14 @@ export default {
|
||||
|
||||
### 展示取消按钮
|
||||
|
||||
设置`cancel-text`属性后，会在底部展示取消按钮，点击后关闭当前面板
|
||||
设置 `cancel-text` 属性后，会在底部展示取消按钮，点击后关闭当前面板并触发 `cancel` 事件。
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="取消"
|
||||
close-on-click-action
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
```
|
||||
@ -68,12 +66,12 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onCancel() {
|
||||
this.show = false;
|
||||
Toast('cancel');
|
||||
Toast('取消');
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -81,26 +79,15 @@ export default {
|
||||
|
||||
### 展示描述信息
|
||||
|
||||
设置`description`属性后，会在选项上方显示描述信息
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
description="这是一段描述信息"
|
||||
/>
|
||||
```
|
||||
|
||||
### 选项状态
|
||||
|
||||
可以将选项设置为加载状态或禁用状态，或者通过`color`设置选项颜色
|
||||
通过 `description` 可以在菜单顶部显示描述信息，通过选项的 `subname` 属性可以在选项文字的右侧展示描述信息。
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="取消"
|
||||
@cancel="onCancel"
|
||||
description="这是一段描述信息"
|
||||
close-on-click-action
|
||||
/>
|
||||
```
|
||||
|
||||
@ -110,9 +97,37 @@ export default {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: '选项', color: '#07c160' },
|
||||
{ loading: true },
|
||||
{ name: '选项一' },
|
||||
{ name: '选项二' },
|
||||
{ name: '选项三', subname: '描述信息' },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 选项状态
|
||||
|
||||
可以通过 `loading` 和 `disabled` 将选项设置为加载状态或禁用状态，或者通过`color`设置选项的颜色
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="取消"
|
||||
close-on-click-action
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: '着色选项', color: '#07c160' },
|
||||
{ name: '禁用选项', disabled: true },
|
||||
{ name: '加载选项', loading: true },
|
||||
],
|
||||
};
|
||||
},
|
||||
@ -160,7 +175,7 @@ export default {
|
||||
|
||||
### Action 数据结构
|
||||
|
||||
`actions`属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：
|
||||
`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：
|
||||
|
||||
| 键名 | 说明 | 类型 |
|
||||
| --------- | ------------------------ | --------- |
|
||||
|
||||
@ -28,13 +28,6 @@
|
||||
@select="onSelect"
|
||||
/>
|
||||
|
||||
<van-action-sheet
|
||||
v-model="show.status"
|
||||
close-on-click-action
|
||||
:actions="statusActions"
|
||||
:cancel-text="t('cancel')"
|
||||
/>
|
||||
|
||||
<van-action-sheet
|
||||
v-model="show.cancel"
|
||||
:actions="simpleActions"
|
||||
@ -45,11 +38,19 @@
|
||||
|
||||
<van-action-sheet
|
||||
v-model="show.description"
|
||||
:actions="simpleActions"
|
||||
:actions="actionsWithDescription"
|
||||
close-on-click-action
|
||||
:cancel-text="t('cancel')"
|
||||
:description="t('description')"
|
||||
/>
|
||||
|
||||
<van-action-sheet
|
||||
v-model="show.status"
|
||||
close-on-click-action
|
||||
:actions="statusActions"
|
||||
:cancel-text="t('cancel')"
|
||||
/>
|
||||
|
||||
<van-action-sheet v-model="show.title" :title="t('title')">
|
||||
<div class="demo-action-sheet-content">{{ t('content') }}</div>
|
||||
</van-action-sheet>
|
||||
@ -62,22 +63,30 @@ import { GREEN } from '../../utils/constant';
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
subname: '副文本',
|
||||
option1: '选项一',
|
||||
option2: '选项二',
|
||||
option3: '选项三',
|
||||
subname: '描述信息',
|
||||
showCancel: '展示取消按钮',
|
||||
buttonText: '弹出菜单',
|
||||
customPanel: '自定义面板',
|
||||
description: '这是一段描述信息',
|
||||
optionStatus: '选项状态',
|
||||
coloredOption: '着色选项',
|
||||
disabledOption: '禁用选项',
|
||||
showDescription: '展示描述信息',
|
||||
},
|
||||
'en-US': {
|
||||
subname: 'Subname',
|
||||
option1: 'Option 1',
|
||||
option2: 'Option 2',
|
||||
option3: 'Option 3',
|
||||
subname: 'Description',
|
||||
showCancel: 'Show Cancel Button',
|
||||
buttonText: 'Show ActionSheet',
|
||||
customPanel: 'Custom Panel',
|
||||
description: 'Description',
|
||||
optionStatus: 'Option Status',
|
||||
coloredOption: 'Colored Option',
|
||||
disabledOption: 'Disabled Option',
|
||||
showDescription: 'Show Description',
|
||||
},
|
||||
@ -98,17 +107,25 @@ export default {
|
||||
computed: {
|
||||
simpleActions() {
|
||||
return [
|
||||
{ name: this.t('option') },
|
||||
{ name: this.t('option') },
|
||||
{ name: this.t('option'), subname: this.t('subname') },
|
||||
{ name: this.t('option1') },
|
||||
{ name: this.t('option2') },
|
||||
{ name: this.t('option3') },
|
||||
];
|
||||
},
|
||||
|
||||
actionsWithDescription() {
|
||||
return [
|
||||
{ name: this.t('option1') },
|
||||
{ name: this.t('option2') },
|
||||
{ name: this.t('option3'), subname: this.t('subname') },
|
||||
];
|
||||
},
|
||||
|
||||
statusActions() {
|
||||
return [
|
||||
{ name: this.t('option'), color: GREEN },
|
||||
{ loading: true },
|
||||
{ name: this.t('coloredOption'), color: GREEN },
|
||||
{ name: this.t('disabledOption'), disabled: true },
|
||||
{ loading: true },
|
||||
];
|
||||
},
|
||||
},
|
||||
@ -120,7 +137,7 @@ export default {
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
this.$toast('cancel');
|
||||
this.$toast(this.t('cancel'));
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user