Skip to content

Commit 663ad17

Browse files
DrjingfuboDrjingfubo
authored
fix(actionsheet): add new props (#1194)
1 parent e3c76e7 commit 663ad17

File tree

7 files changed

+161
-90
lines changed

7 files changed

+161
-90
lines changed

‎src/packages/__VUE/actionsheet/__test__/__snapshots__/index.spec.ts.snap

+8-4
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,16 @@ exports[`should render sure actionsheet when use custom props 1`] = `
1010
<view class=\\"nut-popup round popup-bottom popclass\\" style=\\"z-index: 2000; animation-duration: 0.3s;\\">
1111
<view class=\\"nut-actionsheet-panel\\">
1212
<!--v-if-->
13-
<!--v-if-->
14-
<view class=\\"nut-actionsheet-menu\\">
15-
<view class=\\"nut-actionsheet-item\\" style=\\"color: rgb(26, 26, 26);\\">选项一<view class=\\"subdesc\\">描述信息</view>
13+
<view>
14+
<!--v-if-->
15+
<view class=\\"nut-actionsheet-menu\\">
16+
<view class=\\"nut-actionsheet-item\\">
17+
<view>选项一</view>
18+
<view class=\\"subdesc\\">描述信息</view>
19+
</view>
1620
</view>
21+
<!--v-if-->
1722
</view>
18-
<!--v-if-->
1923
</view>
2024
<!--v-if-->
2125
</view>

‎src/packages/__VUE/actionsheet/demo.vue

+28-4
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,20 @@
2020
<div class="selected-option" v-html="state.val4"></div>
2121
</nut-cell>
2222

23+
<h2>自定义</h2>
24+
25+
<nut-cell :isLink="true" @click="switchActionSheet('isVisible5')">
26+
<span><label>自定义内容</label></span>
27+
<div class="selected-option"></div>
28+
</nut-cell>
29+
2330
<!-- demo 基础用法 -->
24-
<nut-actionsheet v-model:visible="state.isVisible1" :menu-items="menuItemsOne" @choose="chooseItem">
31+
<nut-actionsheet
32+
:safe-area-inset-bottom="true"
33+
v-model:visible="state.isVisible1"
34+
:menu-items="menuItemsOne"
35+
@choose="chooseItem"
36+
>
2537
</nut-actionsheet>
2638
<!-- demo(带取消按钮） -->
2739
<nut-actionsheet
@@ -34,6 +46,7 @@
3446
<!-- 展示描述信息 -->
3547
<nut-actionsheet
3648
v-model:visible="state.isVisible3"
49+
title="标题"
3750
:description="state.desc"
3851
:menu-items="menuItemsTwo"
3952
@choose="chooseItemThree"
@@ -48,6 +61,10 @@
4861
@choose="chooseItemFour"
4962
:choose-tag-value="state.chooseTagValue"
5063
></nut-actionsheet>
64+
<!-- 自定义面板-->
65+
<nut-actionsheet v-model:visible="state.isVisible5" title="标题">
66+
<div class="custom-content">自定义内容</div>
67+
</nut-actionsheet>
5168
</div>
5269
</template>
5370

@@ -56,7 +73,9 @@ import { reactive } from 'vue';
5673
interface Item {
5774
name: string;
5875
subname?: string;
76+
color?: string;
5977
disable?: boolean;
78+
loading?: boolean;
6079
}
6180
export default {
6281
props: {},
@@ -72,7 +91,7 @@ export default {
7291
val3: '',
7392
val4: '',
7493
desc: '这是一段描述信息',
75-
chooseTagValue: '着色选项'
94+
chooseTagValue: '选中选项'
7695
});
7796
const menuItemsOne: Item[] = [
7897
{
@@ -94,16 +113,21 @@ export default {
94113
},
95114
{
96115
name: '选项三',
116+
color: 'red',
97117
subname: '描述信息'
98118
}
99119
];
100120
const menuItemsThree: Item[] = [
101121
{
102-
name: '着色选项'
122+
name: '选中选项'
103123
},
104124
{
105125
name: '禁用选项',
106126
disable: true
127+
},
128+
{
129+
name: '加载选项',
130+
loading: true
107131
}
108132
];
109133
const switchActionSheet = (param: 'isVisible1' | 'isVisible2' | 'isVisible3' | 'isVisible4') => {
@@ -148,7 +172,7 @@ export default {
148172
.nut-cell {
149173
justify-content: space-between;
150174
}
151-
.myContent {
175+
.custom-content {
152176
padding: 10px 10px 160px;
153177
}
154178
</style>

‎src/packages/__VUE/actionsheet/doc.md

+17-6
Original file line numberDiff line numberDiff line change
@@ -265,21 +265,32 @@ export default {
265265

266266
| 字段 | 说明 | 类型 | 默认值 |
267267
|------------------|----------------------------------------|---------|-----------|
268-
| cancel-txt | 取消文案 | String | '取消' |
268+
| v-model:visible | 遮罩层可见 | Boolean | false|
269269
| menu-items | 列表项 | Array | [ ] |
270-
| option-tag | 设置列表项展示使用参数 | String | 'name' |
271-
| v-model:visible | 遮罩层可见 | Boolean | false |
272-
| option-sub-tag | 设置列表项描述展示使用参数 | String | 'subname' |
270+
| option-tag | 设置列表项标题展示使用参数 | String | 'name' |
271+
| option-sub-tag | 设置列表项二级标题展示使用参数 | String | 'subname' |
273272
| choose-tag-value | 设置选中项的值，和'option-tag'的值对应 | String | '' |
273+
| color | 选中项颜色，当 choose-tag-value == option-tag的值 生效 | String | '#ee0a24' |
274274
| title | 设置列表项标题 | String | '' |
275275
| description | 设置列表项副标题/描述 | String | '' |
276-
| color | 高亮颜色 | String | '#ee0a24' |
276+
| cancel-txt | 取消文案 | String | '取消' |
277277
| close-abled | 遮罩层是否可关闭 | Boolean | true |
278+
|safe-area-inset-bottom |是否开启iphone系列全面屏底部安全区适配| Boolean |false
278279

280+
## menu-items数据结构
281+
282+
| 字段 | 说明 | 类型 |
283+
|--------|--------------------|-----------------------------------|
284+
| name | 标题 | String |
285+
| subname | 二级标题 | String |
286+
| color | 选项字体颜色（选中项颜色层级>选项字体颜色） | String |
287+
| loading | 是否为loading状态 | Boolean |
288+
| disable | 是否为禁用状态 | Boolean |
279289

280290
## Event
281291

282292
| 字段 | 说明 | 回调参数 |
283293
|--------|--------------------|-----------------------------------|
284294
| choose | 选择之后触发 | 选中列表项item, 选中的索引值index |
285-
| cancel | 点击取消文案时触发 | 无 |
295+
| cancel | 点击取消文案时触发 | 无 |
296+
| close | 点击遮罩层时触发 | event: Event |

‎src/packages/__VUE/actionsheet/index.scss

+8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
.nut-actionsheet-panel {
22
display: block;
3+
&.nut-actionsheet-safebottom {
4+
margin-bottom: constant(safe-area-inset-bottom);
5+
margin-bottom: env(safe-area-inset-bottom);
6+
}
37
.nut-actionsheet-title {
48
display: block;
59
padding: 10px;
@@ -49,6 +53,7 @@
4953
.desc {
5054
font-size: $actionsheet-item-font-size;
5155
color: #999;
56+
cursor: default;
5257
}
5358

5459
.subdesc {
@@ -61,6 +66,9 @@
6166
color: #e1e1e1 !important;
6267
cursor: not-allowed;
6368
}
69+
.nut-actionsheet-item-loading {
70+
cursor: default;
71+
}
6472

6573
.nut-actionsheet-cancel {
6674
margin-top: 5px;

‎src/packages/__VUE/actionsheet/index.taro.vue

+36-40
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,36 @@
11
<template>
22
<view :class="classes">
3-
<nut-popup
4-
pop-class="popclass"
5-
:visible="visible"
6-
position="bottom"
7-
round
8-
@click-overlay="close"
9-
>
10-
<view class="nut-actionsheet-panel">
3+
<nut-popup pop-class="popclass" :visible="visible" position="bottom" round @click-overlay="close">
4+
<view class="nut-actionsheet-panel" :class="{ 'nut-actionsheet-safebottom': safeAreaInsetBottom }">
115
<view v-if="title" class="nut-actionsheet-title">{{ title }}</view>
12-
<view class="nut-actionsheet-item desc" v-if="description">{{
13-
description
14-
}}</view>
15-
<view class="nut-actionsheet-menu" v-if="menuItems.length">
16-
<view
17-
v-for="(item, index) of menuItems"
18-
class="nut-actionsheet-item"
19-
:class="{ 'nut-actionsheet-item-disabled': item.disable }"
20-
:style="{ color: isHighlight(item) }"
21-
:key="index"
22-
@click="chooseItem(item, index)"
23-
>{{ item[optionTag]
24-
}}<view class="subdesc">{{ item[optionSubTag] }}</view>
6+
<slot></slot>
7+
<view v-if="!slotDefault">
8+
<view class="nut-actionsheet-item desc" v-if="description">{{ description }}</view>
9+
<view class="nut-actionsheet-menu" v-if="menuItems.length">
10+
<view
11+
v-for="(item, index) of menuItems"
12+
class="nut-actionsheet-item"
13+
:class="{ 'nut-actionsheet-item-disabled': item.disable, 'nut-actionsheet-item-loading': item.loading }"
14+
:style="{ color: isHighlight(item) || item.color }"
15+
:key="index"
16+
@click="chooseItem(item, index)"
17+
>
18+
<nut-icon v-if="item.loading" name="loading"> </nut-icon>
19+
<view v-else> {{ item[optionTag] }}</view>
20+
<view class="subdesc">{{ item[optionSubTag] }}</view>
21+
</view>
22+
</view>
23+
<view class="nut-actionsheet-cancel" v-if="cancelTxt" @click="cancelActionSheet">
24+
{{ cancelTxt }}
2525
</view>
26-
</view>
27-
<view
28-
class="nut-actionsheet-cancel"
29-
v-if="cancelTxt"
30-
@click="cancelActionSheet"
31-
>
32-
{{ cancelTxt }}
3326
</view>
3427
</view>
3528
</nut-popup>
3629
</view>
3730
</template>
38-
<script>
31+
<script lang="ts">
3932
import { createComponent } from '../../utils/create';
40-
import { computed } from 'vue';
33+
import { computed, useSlots } from 'vue';
4134
const { componentName, create } = createComponent('actionsheet');
4235
import { popupProps } from '../popup/index.vue';
4336
export default create({
@@ -74,43 +67,46 @@ export default create({
7467
menuItems: {
7568
type: Array,
7669
default: () => []
70+
},
71+
safeAreaInsetBottom: {
72+
type: Boolean,
73+
default: false
7774
}
7875
},
79-
emits: ['cancel', 'choose', 'update:visible'],
76+
emits: ['cancel', 'choose', 'update:visible', 'close'],
8077
8178
setup(props, { emit }) {
79+
const slotDefault = !!useSlots().default;
8280
const classes = computed(() => {
8381
const prefixCls = componentName;
8482
return {
8583
[prefixCls]: true
8684
};
8785
});
8886
89-
const isHighlight = (item) => {
90-
return props.chooseTagValue &&
91-
props.chooseTagValue === item[props.optionTag]
92-
? props.color
93-
: '#1a1a1a';
87+
const isHighlight = (item: { [x: string]: string }) => {
88+
return props.chooseTagValue && props.chooseTagValue === item[props.optionTag] ? props.color : '';
9489
};
9590
9691
const cancelActionSheet = () => {
9792
emit('cancel');
9893
emit('update:visible', false);
9994
};
10095
101-
const chooseItem = (item, index) => {
102-
if (!item.disable) {
96+
const chooseItem = (item: { disable: boolean; loading: boolean }, index: any) => {
97+
if (!item.disable && !item.loading) {
10398
emit('choose', item, index);
10499
emit('update:visible', false);
105100
}
106101
};
107102
108-
const close = () => {
109-
emit('close');
103+
const close = (e: Event) => {
104+
emit('close', e);
110105
emit('update:visible', false);
111106
};
112107
113108
return {
109+
slotDefault,
114110
isHighlight,
115111
cancelActionSheet,
116112
chooseItem,

0 commit comments

Comments
 (0)