blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(ActionSheet): add description prop (#4691)

Browse Source
This commit is contained in:
neverland 2019-10-11 15:28:52 +08:00 committed by GitHub
parent 79322ea892
commit 9f523682e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 133 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/action-sheet/README.md
View File

@ -16,11 +16,7 @@ Vue.use(ActionSheet);
Use `actions` prop to set options of action-sheet.
```html
<van-action-sheet
v-model="show"
:actions="actions"
@select="onSelect"
/>
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
```
```javascript
@ -48,10 +44,7 @@ export default {
### Status
```html
<van-action-sheet
v-model="show"
:actions="actions"
/>
<van-action-sheet v-model="show" :actions="actions" />
```
```javascript
@ -76,11 +69,37 @@ export default {
v-model="show"
:actions="actions"
cancel-text="Cancel"
@select="onSelect"
@cancel="onCancel"
/>
```
```js
export default {
data() {
return {
show: false
};
},
methods: {
onCancel() {
this.show = false;
Toast('cancel');
}
}
}
```
### Show Description
```html
<van-action-sheet
v-model="show"
:actions="actions"
description="Description"
/>
```
### ActionSheet with title
```html
@ -98,6 +117,7 @@ export default {
| actions | Options | *Action[]* | `[]` | - |
| title | Title | *string* | - | - |
| cancel-text | Text of cancel button | *string* | - | - |
| description | Description above the options | *string* | - | 2.2.8 |
| overlay | Whether to show overlay | *boolean* | `true` | - |
| round | Whether to show round corner | *boolean* | `true` | 2.0.9 |
| close-on-click-action | Whether to close when click action | *boolean* | `false` | - |

49
src/action-sheet/README.zh-CN.md
View File

@ -16,11 +16,7 @@ Vue.use(ActionSheet);
`ActionSheet`通过`actions`数组来定义展示的选项，数组的每一项是一个对象，对象属性见文档下方表格。
```html
<van-action-sheet
v-model="show"
:actions="actions"
@select="onSelect"
/>
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
```
```javascript
@ -38,7 +34,8 @@ export default {
methods: {
onSelect(item) {
// 点击选项时默认不会关闭菜单，可以手动关闭
// 默认情况下，点击选项时不会自动关闭菜单
// 可以通过 close-on-click-action 属性开启自动关闭
this.show = false;
Toast(item.name);
}
@ -48,13 +45,10 @@ export default {
### 选项状态
选项可以设置为加载状态或禁用状态
选项可以设置为加载状态或禁用状态，也可以通过`color`设置选项颜色
```html
<van-action-sheet
v-model="show"
:actions="actions"
/>
<van-action-sheet v-model="show" :actions="actions" />
```
```javascript
@ -81,11 +75,39 @@ export default {
v-model="show"
:actions="actions"
cancel-text="取消"
@select="onSelect"
@cancel="onCancel"
/>
```
```js
export default {
data() {
return {
show: false
};
},
methods: {
onCancel() {
this.show = false;
Toast('cancel');
}
}
}
```
### 展示描述信息
设置`description`属性后，会在选项上方显示描述信息
```html
<van-action-sheet
v-model="show"
:actions="actions"
description="这是一段描述信息"
/>
```
### 展示标题栏
通过设置`title`属性展示标题栏，同时可以使用插槽自定义菜单内容
@ -110,8 +132,9 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| actions | 菜单选项 | *Action[]* | `[]` | - |
| title | 标题 | *string* | - | - |
| title | 顶部标题 | *string* | - | - |
| cancel-text | 取消按钮文字 | *string* | - | - |
| description | 选项上方的描述信息 | *string* | - | 2.2.8 |
| overlay | 是否显示遮罩层 | *boolean* | `true` | - |
| round | 是否显示圆角 | *boolean* | `true` | 2.0.9 |
| close-on-click-action | 是否在点击选项后关闭 | *boolean* | `false` | - |

41
src/action-sheet/demo/index.vue
View File

@ -10,7 +10,7 @@
<van-action-sheet v-model="show2" close-on-click-action :actions="statusActions" />
</demo-block>
<demo-block :title="$t('title2')">
<demo-block :title="$t('showCancel')">
<van-button type="primary" @click="show3 = true">{{ $t('buttonText') }}</van-button>
<van-action-sheet
v-model="show3"
@ -21,9 +21,19 @@
/>
</demo-block>
<demo-block :title="$t('title3')">
<demo-block :title="$t('showDescription')">
<van-button type="primary" @click="show4 = true">{{ $t('buttonText') }}</van-button>
<van-action-sheet v-model="show4" :title="$t('title')">
<van-action-sheet
v-model="show4"
: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>
</demo-block>
@ -37,19 +47,23 @@ export default {
i18n: {
'zh-CN': {
buttonText: '弹出菜单',
title2: '展示取消按钮',
title3: '展示标题栏',
status: '选项状态',
description: '描述信息',
disabledOption: '禁用选项'
subname: '副文本',
disabledOption: '禁用选项',
showTitle: '展示标题栏',
showCancel: '展示取消按钮',
showDescription: '展示描述信息',
description: '这是一段描述信息'
},
'en-US': {
buttonText: 'Show ActionSheet',
title2: 'ActionSheet with cancel button',
title3: 'ActionSheet with title',
status: 'Status',
description: 'Description',
disabledOption: 'Disabled Option'
subname: 'Subname',
disabledOption: 'Disabled Option',
showTitle: 'ActionSheet with title',
showCancel: 'ActionSheet with cancel button',
showDescription: 'ActionSheet with description',
description: 'Description'
}
},
@ -58,7 +72,8 @@ export default {
show1: false,
show2: false,
show3: false,
show4: false
show4: false,
show5: false
};
},
@ -67,7 +82,7 @@ export default {
return [
{ name: this.$t('option') },
{ name: this.$t('option') },
{ name: this.$t('option'), subname: this.$t('description') }
{ name: this.$t('option'), subname: this.$t('subname') }
];
},

8
src/action-sheet/index.less
View File

@ -51,6 +51,14 @@
text-align: center;
}
&__description {
padding: @padding-md;
color: @action-sheet-description-color;
font-size: @action-sheet-description-font-size;
line-height: @action-sheet-description-line-height;
text-align: center;
}
&__close {
position: absolute;
top: 0;

7
src/action-sheet/index.tsx
View File

@ -27,6 +27,7 @@ export type ActionSheetProps = PopupMixinProps & {
actions?: ActionSheetItem[];
duration: number;
cancelText?: string;
description?: string;
closeOnClickAction?: boolean;
safeAreaInsetBottom?: boolean;
};
@ -116,6 +117,10 @@ function ActionSheet(
}
}
const Description = props.description && (
<div class={bem('description')}>{props.description}</div>
);
return (
<Popup
class={bem()}
@ -132,6 +137,7 @@ function ActionSheet(
{...inherit(ctx, true)}
>
{Header()}
{Description}
{props.actions && props.actions.map(Option)}
{Content()}
{CancelText()}
@ -145,6 +151,7 @@ ActionSheet.props = {
actions: Array,
duration: Number,
cancelText: String,
description: String,
getContainer: [String, Function],
closeOnClickAction: Boolean,
round: {

3
src/action-sheet/test/__snapshots__/demo.spec.js.snap
View File

@ -14,5 +14,8 @@ exports[`renders demo correctly 1`] = `
<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>
`;

6
src/action-sheet/test/__snapshots__/index.spec.js.snap
View File

@ -8,6 +8,12 @@ exports[`callback events 1`] = `
exports[`color option 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
exports[`description prop 1`] = `
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
<div class="van-action-sheet__description">This is a description</div><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button>
</div>
`;
exports[`disable lazy-render 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__cancel">Cancel</button></div>`;
exports[`render title and default slot 1`] = ``;

12
src/action-sheet/test/index.spec.js
View File

@ -162,3 +162,15 @@ test('color option', () => {
expect(wrapper).toMatchSnapshot();
});
test('description prop', () => {
const wrapper = mount(ActionSheet, {
propsData: {
value: true,
description: 'This is a description',
actions: [{ name: 'Option' }]
}
});
expect(wrapper).toMatchSnapshot();
});

3
src/style/var.less
View File

@ -49,6 +49,9 @@
@action-sheet-max-height: 90%;
@action-sheet-header-height: 44px;
@action-sheet-header-font-size: @font-size-lg;
@action-sheet-description-color: @gray-darker;
@action-sheet-description-font-size: @font-size-md;
@action-sheet-description-line-height: 20px;
@action-sheet-item-height: 50px;
@action-sheet-item-background: @white;
@action-sheet-item-font-size: @font-size-lg;