Skip to content

Commit 9f52368

Browse files
chenjiahanchenjiahan
authored
feat(ActionSheet): add description prop (youzan#4691)
1 parent 79322ea commit 9f52368

9 files changed

Lines changed: 133 additions & 36 deletions

File tree

‎src/action-sheet/README.md‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,7 @@ Vue.use(ActionSheet);
1616
Use `actions` prop to set options of action-sheet.
1717

1818
```html
19-
<van-action-sheet
20-
v-model="show"
21-
:actions="actions"
22-
@select="onSelect"
23-
/>
19+
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
2420
```
2521

2622
```javascript
@@ -48,10 +44,7 @@ export default {
4844
### Status
4945

5046
```html
51-
<van-action-sheet
52-
v-model="show"
53-
:actions="actions"
54-
/>
47+
<van-action-sheet v-model="show" :actions="actions" />
5548
```
5649

5750
```javascript
@@ -76,11 +69,37 @@ export default {
7669
v-model="show"
7770
:actions="actions"
7871
cancel-text="Cancel"
79-
@select="onSelect"
8072
@cancel="onCancel"
8173
/>
8274
```
8375

76+
```js
77+
export default {
78+
data() {
79+
return {
80+
show: false
81+
};
82+
},
83+
84+
methods: {
85+
onCancel() {
86+
this.show = false;
87+
Toast('cancel');
88+
}
89+
}
90+
}
91+
```
92+
93+
### Show Description
94+
95+
```html
96+
<van-action-sheet
97+
v-model="show"
98+
:actions="actions"
99+
description="Description"
100+
/>
101+
```
102+
84103
### ActionSheet with title
85104

86105
```html
@@ -98,6 +117,7 @@ export default {
98117
| actions | Options | *Action[]* | `[]` | - |
99118
| title | Title | *string* | - | - |
100119
| cancel-text | Text of cancel button | *string* | - | - |
120+
| description | Description above the options | *string* | - | 2.2.8 |
101121
| overlay | Whether to show overlay | *boolean* | `true` | - |
102122
| round | Whether to show round corner | *boolean* | `true` | 2.0.9 |
103123
| close-on-click-action | Whether to close when click action | *boolean* | `false` | - |

‎src/action-sheet/README.zh-CN.md‎

Lines changed: 36 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,7 @@ Vue.use(ActionSheet);
1616
`ActionSheet`通过`actions`数组来定义展示的选项，数组的每一项是一个对象，对象属性见文档下方表格。
1717

1818
```html
19-
<van-action-sheet
20-
v-model="show"
21-
:actions="actions"
22-
@select="onSelect"
23-
/>
19+
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
2420
```
2521

2622
```javascript
@@ -38,7 +34,8 @@ export default {
3834

3935
methods: {
4036
onSelect(item) {
41-
// 点击选项时默认不会关闭菜单，可以手动关闭
37+
// 默认情况下，点击选项时不会自动关闭菜单
38+
// 可以通过 close-on-click-action 属性开启自动关闭
4239
this.show = false;
4340
Toast(item.name);
4441
}
@@ -48,13 +45,10 @@ export default {
4845

4946
### 选项状态
5047

51-
选项可以设置为加载状态或禁用状态
48+
选项可以设置为加载状态或禁用状态，也可以通过`color`设置选项颜色
5249

5350
```html
54-
<van-action-sheet
55-
v-model="show"
56-
:actions="actions"
57-
/>
51+
<van-action-sheet v-model="show" :actions="actions" />
5852
```
5953

6054
```javascript
@@ -81,11 +75,39 @@ export default {
8175
v-model="show"
8276
:actions="actions"
8377
cancel-text="取消"
84-
@select="onSelect"
8578
@cancel="onCancel"
8679
/>
8780
```
8881

82+
```js
83+
export default {
84+
data() {
85+
return {
86+
show: false
87+
};
88+
},
89+
90+
methods: {
91+
onCancel() {
92+
this.show = false;
93+
Toast('cancel');
94+
}
95+
}
96+
}
97+
```
98+
99+
### 展示描述信息
100+
101+
设置`description`属性后，会在选项上方显示描述信息
102+
103+
```html
104+
<van-action-sheet
105+
v-model="show"
106+
:actions="actions"
107+
description="这是一段描述信息"
108+
/>
109+
```
110+
89111
### 展示标题栏
90112

91113
通过设置`title`属性展示标题栏，同时可以使用插槽自定义菜单内容
@@ -110,8 +132,9 @@ export default {
110132
| 参数 | 说明 | 类型 | 默认值 | 版本 |
111133
|------|------|------|------|------|
112134
| actions | 菜单选项 | *Action[]* | `[]` | - |
113-
| title | 标题 | *string* | - | - |
135+
| title | 顶部标题 | *string* | - | - |
114136
| cancel-text | 取消按钮文字 | *string* | - | - |
137+
| description | 选项上方的描述信息 | *string* | - | 2.2.8 |
115138
| overlay | 是否显示遮罩层 | *boolean* | `true` | - |
116139
| round | 是否显示圆角 | *boolean* | `true` | 2.0.9 |
117140
| close-on-click-action | 是否在点击选项后关闭 | *boolean* | `false` | - |

‎src/action-sheet/demo/index.vue‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<van-action-sheet v-model="show2" close-on-click-action :actions="statusActions" />
1111
</demo-block>
1212

13-
<demo-block :title="$t('title2')">
13+
<demo-block :title="$t('showCancel')">
1414
<van-button type="primary" @click="show3 = true">{{ $t('buttonText') }}</van-button>
1515
<van-action-sheet
1616
v-model="show3"
@@ -21,9 +21,19 @@
2121
/>
2222
</demo-block>
2323

24-
<demo-block :title="$t('title3')">
24+
<demo-block :title="$t('showDescription')">
2525
<van-button type="primary" @click="show4 = true">{{ $t('buttonText') }}</van-button>
26-
<van-action-sheet v-model="show4" :title="$t('title')">
26+
<van-action-sheet
27+
v-model="show4"
28+
:actions="simpleActions"
29+
close-on-click-action
30+
:description="$t('description')"
31+
/>
32+
</demo-block>
33+
34+
<demo-block :title="$t('showTitle')">
35+
<van-button type="primary" @click="show5 = true">{{ $t('buttonText') }}</van-button>
36+
<van-action-sheet v-model="show5" :title="$t('title')">
2737
<p>{{ $t('content') }}</p>
2838
</van-action-sheet>
2939
</demo-block>
@@ -37,19 +47,23 @@ export default {
3747
i18n: {
3848
'zh-CN': {
3949
buttonText: '弹出菜单',
40-
title2: '展示取消按钮',
41-
title3: '展示标题栏',
4250
status: '选项状态',
43-
description: '描述信息',
44-
disabledOption: '禁用选项'
51+
subname: '副文本',
52+
disabledOption: '禁用选项',
53+
showTitle: '展示标题栏',
54+
showCancel: '展示取消按钮',
55+
showDescription: '展示描述信息',
56+
description: '这是一段描述信息'
4557
},
4658
'en-US': {
4759
buttonText: 'Show ActionSheet',
48-
title2: 'ActionSheet with cancel button',
49-
title3: 'ActionSheet with title',
5060
status: 'Status',
51-
description: 'Description',
52-
disabledOption: 'Disabled Option'
61+
subname: 'Subname',
62+
disabledOption: 'Disabled Option',
63+
showTitle: 'ActionSheet with title',
64+
showCancel: 'ActionSheet with cancel button',
65+
showDescription: 'ActionSheet with description',
66+
description: 'Description'
5367
}
5468
},
5569
@@ -58,7 +72,8 @@ export default {
5872
show1: false,
5973
show2: false,
6074
show3: false,
61-
show4: false
75+
show4: false,
76+
show5: false
6277
};
6378
},
6479
@@ -67,7 +82,7 @@ export default {
6782
return [
6883
{ name: this.$t('option') },
6984
{ name: this.$t('option') },
70-
{ name: this.$t('option'), subname: this.$t('description') }
85+
{ name: this.$t('option'), subname: this.$t('subname') }
7186
];
7287
},
7388

‎src/action-sheet/index.less‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,14 @@
5151
text-align: center;
5252
}
5353

54+
&__description {
55+
padding: @padding-md;
56+
color: @action-sheet-description-color;
57+
font-size: @action-sheet-description-font-size;
58+
line-height: @action-sheet-description-line-height;
59+
text-align: center;
60+
}
61+
5462
&__close {
5563
position: absolute;
5664
top: 0;

‎src/action-sheet/index.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export type ActionSheetProps = PopupMixinProps & {
2727
actions?: ActionSheetItem[];
2828
duration: number;
2929
cancelText?: string;
30+
description?: string;
3031
closeOnClickAction?: boolean;
3132
safeAreaInsetBottom?: boolean;
3233
};
@@ -116,6 +117,10 @@ function ActionSheet(
116117
}
117118
}
118119

120+
const Description = props.description && (
121+
<div class={bem('description')}>{props.description}</div>
122+
);
123+
119124
return (
120125
<Popup
121126
class={bem()}
@@ -132,6 +137,7 @@ function ActionSheet(
132137
{...inherit(ctx, true)}
133138
>
134139
{Header()}
140+
{Description}
135141
{props.actions && props.actions.map(Option)}
136142
{Content()}
137143
{CancelText()}
@@ -145,6 +151,7 @@ ActionSheet.props = {
145151
actions: Array,
146152
duration: Number,
147153
cancelText: String,
154+
description: String,
148155
getContainer: [String, Function],
149156
closeOnClickAction: Boolean,
150157
round: {

‎src/action-sheet/test/__snapshots__/demo.spec.js.snap‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,8 @@ exports[`renders demo correctly 1`] = `
1414
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
1515
<!---->
1616
</div>
17+
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
18+
<!---->
19+
</div>
1720
</div>
1821
`;

‎src/action-sheet/test/__snapshots__/index.spec.js.snap‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@ exports[`callback events 1`] = `
88

99
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>`;
1010

11+
exports[`description prop 1`] = `
12+
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
13+
<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>
14+
</div>
15+
`;
16+
1117
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>`;
1218

1319
exports[`render title and default slot 1`] = ``;

‎src/action-sheet/test/index.spec.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,3 +162,15 @@ test('color option', () => {
162162

163163
expect(wrapper).toMatchSnapshot();
164164
});
165+
166+
test('description prop', () => {
167+
const wrapper = mount(ActionSheet, {
168+
propsData: {
169+
value: true,
170+
description: 'This is a description',
171+
actions: [{ name: 'Option' }]
172+
}
173+
});
174+
175+
expect(wrapper).toMatchSnapshot();
176+
});

‎src/style/var.less‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@
4949
@action-sheet-max-height: 90%;
5050
@action-sheet-header-height: 44px;
5151
@action-sheet-header-font-size: @font-size-lg;
52+
@action-sheet-description-color: @gray-darker;
53+
@action-sheet-description-font-size: @font-size-md;
54+
@action-sheet-description-line-height: 20px;
5255
@action-sheet-item-height: 50px;
5356
@action-sheet-item-background: @white;
5457
@action-sheet-item-font-size: @font-size-lg;

0 commit comments

Comments
 (0)