mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] ActionSheet: support use both title and actions
This commit is contained in:
陈嘉涵
parent
e83abd30fe
commit
3baca58f0d
@ -53,6 +53,10 @@
|
||||
|
||||
- 新增`Skeleton`骨架屏组件
|
||||
|
||||
### ActionSheet
|
||||
|
||||
- 支持同时使用`title`和`actions`属性
|
||||
|
||||
### Button
|
||||
|
||||
- 新增`loading-type`属性
|
||||
|
||||
@ -1,19 +1,28 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-button @click="show1 = true">{{ $t('button1') }}</van-button>
|
||||
<van-button @click="show1 = true">{{ $t('buttonText') }}</van-button>
|
||||
<van-action-sheet
|
||||
v-model="show1"
|
||||
:actions="actions"
|
||||
:actions="simpleActions"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('status')">
|
||||
<van-button @click="show2 = true">{{ $t('buttonText') }}</van-button>
|
||||
<van-action-sheet
|
||||
v-model="show2"
|
||||
:actions="statusActions"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-button @click="show2 = true">{{ $t('button2') }}</van-button>
|
||||
<van-button @click="show3 = true">{{ $t('buttonText') }}</van-button>
|
||||
<van-action-sheet
|
||||
v-model="show2"
|
||||
:actions="actions"
|
||||
v-model="show3"
|
||||
:actions="simpleActions"
|
||||
:cancel-text="$t('cancel')"
|
||||
@cancel="onCancel"
|
||||
@select="onSelect"
|
||||
@ -21,9 +30,9 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-button @click="show3 = true">{{ $t('button3') }}</van-button>
|
||||
<van-button @click="show4 = true">{{ $t('buttonText') }}</van-button>
|
||||
<van-action-sheet
|
||||
v-model="show3"
|
||||
v-model="show4"
|
||||
:title="$t('title')"
|
||||
>
|
||||
<p>{{ $t('content') }}</p>
|
||||
@ -36,20 +45,18 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
button1: '弹出 ActionSheet',
|
||||
button2: '弹出带取消按钮的 ActionSheet',
|
||||
button3: '弹出带标题的 ActionSheet',
|
||||
title2: '带取消按钮的 ActionSheet',
|
||||
title3: '带标题的 ActionSheet',
|
||||
buttonText: '弹出菜单',
|
||||
title2: '展示取消按钮',
|
||||
title3: '展示标题栏',
|
||||
status: '选项状态',
|
||||
description: '描述信息',
|
||||
disabledOption: '禁用选项'
|
||||
},
|
||||
'en-US': {
|
||||
button1: 'Show ActionSheet',
|
||||
button2: 'Show ActionSheet with cancel button',
|
||||
button3: 'Show ActionSheet with title',
|
||||
buttonText: 'Show ActionSheet',
|
||||
title2: 'ActionSheet with cancel button',
|
||||
title3: 'ActionSheet with title',
|
||||
status: 'Status',
|
||||
description: 'Description',
|
||||
disabledOption: 'Disabled Option'
|
||||
}
|
||||
@ -59,15 +66,23 @@ export default {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false
|
||||
show3: false,
|
||||
show4: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
actions() {
|
||||
simpleActions() {
|
||||
return [
|
||||
{ name: this.$t('option') },
|
||||
{ name: this.$t('option') },
|
||||
{ name: this.$t('option'), subname: this.$t('description') }
|
||||
];
|
||||
},
|
||||
|
||||
statusActions() {
|
||||
return [
|
||||
{ name: this.$t('option') },
|
||||
{ name: this.$t('option'), subname: this.$t('description') },
|
||||
{ loading: true },
|
||||
{ name: this.$t('disabledOption'), disabled: true }
|
||||
];
|
||||
|
||||
@ -10,6 +10,7 @@ Vue.use(ActionSheet);
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
Use `actions` prop to set options of action-sheet.
|
||||
|
||||
```html
|
||||
@ -26,20 +27,9 @@ export default {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{
|
||||
name: 'Option'
|
||||
},
|
||||
{
|
||||
name: 'Option',
|
||||
description: 'Description'
|
||||
},
|
||||
{
|
||||
loading: true
|
||||
},
|
||||
{
|
||||
name: 'Disabled Option',
|
||||
disabled: true
|
||||
}
|
||||
{ name: 'Option' },
|
||||
{ name: 'Option' },
|
||||
{ name: 'Option', subname: 'Description' }
|
||||
]
|
||||
};
|
||||
},
|
||||
@ -53,6 +43,30 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
#### Status
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Option' },
|
||||
{ loading: true },
|
||||
{ name: 'Disabled Option', disabled: true }
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### ActionSheet with cancel button
|
||||
|
||||
```html
|
||||
@ -66,7 +80,6 @@ export default {
|
||||
```
|
||||
|
||||
#### ActionSheet with title
|
||||
ActionSheet will get another style if there is a `title` prop.
|
||||
|
||||
```html
|
||||
<van-action-sheet v-model="show" title="Title">
|
||||
|
||||
@ -36,17 +36,21 @@ function ActionSheet(
|
||||
) {
|
||||
const { title, cancelText } = props;
|
||||
|
||||
const onCancel = () => {
|
||||
function onCancel() {
|
||||
emit(ctx, 'input', false);
|
||||
emit(ctx, 'cancel');
|
||||
};
|
||||
}
|
||||
|
||||
const Header = () => (
|
||||
<div class={[bem('header'), 'van-hairline--top-bottom']}>
|
||||
{title}
|
||||
<Icon name="close" class={bem('close')} onClick={onCancel} />
|
||||
</div>
|
||||
);
|
||||
function Header() {
|
||||
if (title) {
|
||||
return (
|
||||
<div class={[bem('header'), 'van-hairline--top-bottom']}>
|
||||
{title}
|
||||
<Icon name="close" class={bem('close')} onClick={onCancel} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const Option = (item: ActionSheetItem, index: number) => (
|
||||
<div
|
||||
@ -92,7 +96,8 @@ function ActionSheet(
|
||||
}}
|
||||
{...inherit(ctx)}
|
||||
>
|
||||
{title ? Header() : props.actions.map(Option)}
|
||||
{Header()}
|
||||
{props.actions.map(Option)}
|
||||
{slots.default && <div class={bem('content')}>{slots.default()}</div>}
|
||||
{cancelText && (
|
||||
<div class={bem('cancel')} onClick={onCancel}>
|
||||
|
||||
@ -11,7 +11,7 @@ Vue.use(ActionSheet);
|
||||
|
||||
#### 基础用法
|
||||
|
||||
需要传入一个`actions`的数组，数组的每一项是一个对象，对象属性见文档下方表格。
|
||||
`ActionSheet`通过`actions`数组来定义展示的选项，数组的每一项是一个对象，对象属性见文档下方表格。
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
@ -27,20 +27,9 @@ export default {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{
|
||||
name: '选项'
|
||||
},
|
||||
{
|
||||
name: '选项',
|
||||
subname: '描述信息'
|
||||
},
|
||||
{
|
||||
loading: true
|
||||
},
|
||||
{
|
||||
name: '禁用选项',
|
||||
disabled: true
|
||||
}
|
||||
{ name: '选项' },
|
||||
{ name: '选项' },
|
||||
{ name: '选项', subname: '描述信息' }
|
||||
]
|
||||
};
|
||||
},
|
||||
@ -55,9 +44,35 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
#### 带取消按钮的 ActionSheet
|
||||
#### 选项状态
|
||||
|
||||
如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`ActionSheet`关闭。
|
||||
选项可以设置为加载状态或禁用状态
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: '选项' },
|
||||
{ name: '选项', loading: true },
|
||||
{ name: '禁用选项', disabled: true }
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 展示取消按钮
|
||||
|
||||
设置`cancelText`属性后，会在底部展示取消按钮，点击后关闭当前菜单
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
@ -69,13 +84,13 @@ export default {
|
||||
/>
|
||||
```
|
||||
|
||||
#### 带标题的 ActionSheet
|
||||
#### 展示标题栏
|
||||
|
||||
如果传入了`title`属性，且不为空，则另外一种样式的`ActionSheet`，里面内容需要自定义。
|
||||
通过设置`title`属性展示标题栏，同时可以使用插槽自定义菜单内容
|
||||
|
||||
```html
|
||||
<van-action-sheet v-model="show" title="支持以下配送方式">
|
||||
<p>一些内容</p>
|
||||
<van-action-sheet v-model="show" title="标题">
|
||||
<p>内容</p>
|
||||
</van-action-sheet>
|
||||
```
|
||||
|
||||
@ -85,7 +100,7 @@ export default {
|
||||
|------|------|------|------|------|
|
||||
| actions | 菜单选项 | `Array` | `[]` | - |
|
||||
| title | 标题 | `String` | - | - |
|
||||
| cancel-text | 取消按钮文字，为空时不展示取消按钮 | `String` | - | - |
|
||||
| cancel-text | 取消按钮文字 | `String` | - | - |
|
||||
| overlay | 是否显示遮罩层 | `Boolean` | `true` | - |
|
||||
| close-on-click-overlay | 是否在点击蒙层后关闭 | `Boolean` | `true` | - |
|
||||
| lazy-render | 是否在显示弹层时才渲染节点 | `Boolean` | `true` | 1.1.11 |
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
## AddressEdit
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { AddressEdit } from 'vant';
|
||||
|
||||
@ -11,7 +12,6 @@ Vue.use(AddressEdit);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
|
||||
```html
|
||||
<van-address-edit
|
||||
:area-list="areaList"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user