Skip to content

Commit ab96145

Browse files
bxb0911bxb0911
committed
[feat]add maxdisplay props to actionsheet
1 parent 4cd4efc commit ab96145

File tree

5 files changed

+65
-24
lines changed

5 files changed

+65
-24
lines changed

‎docs/zh-cn/ActionSheet.md

+27-23
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ ActionSheet({
6969
title: '请选择排序方式',
7070
content: {
7171
type: 'radio',
72+
maxDisplay: 5,
7273
items: [
7374
{ title: '名称字母排序' },
7475
{ title: '总交易额' },
@@ -117,29 +118,32 @@ ActionSheet({
117118

118119
## 配置项
119120

120-
| 参数 | 描述 | 类型 | 默认值 | 备注 |
121-
|--------------------- |---------------------------- |---------- |---------- |--------------------------------------------------------------------------------- |
122-
| title | 标题文字 | String | / | |
123-
| isShowTitle | 是否展示标题 | Boolean | true | |
124-
| textAlign | 对齐方式 | String | left | 单选/多选时必须为left |
125-
| content | 正文显示配置 | Object | / | content 配置项见下表 |
126-
| confirmText | 主操作文字 | String | 确定 | |
127-
| cancelText | 辅操作文字 | String | 取消 | |
128-
| isShowConfirmButton | 是否展示主操作按钮 | Boolean | true | 无确定按钮,则选择后自动关闭操作表。单列建议不显示(因为没有选项标记)多选必须存在 |
129-
| maskColor | 蒙版颜色 | String | #000 | |
130-
| maskOpacity | 蒙版透明度 | Number | 0.5 | |
131-
| transition | 设置弹出与关闭时的动画效果 | String | fade | 可选值：fade |
132-
| onItemClick | 执行点击操作项的回调函数 | Function | 关闭窗体 | 传入参数：instance(实例) 和 data(选择项数据) |
133-
| onConfirm | 确认选择时的回调函数 | Function | 关闭窗体 | 传入参数：instance(实例) 和 data(选择项数据) |
134-
| onCancel | 执行辅操作时的回调函数 | Function | 关闭窗体 | |
135-
| onShow | 窗体出现后的回调函数 | Function | | |
136-
| onHide | 窗体隐藏后的回调函数 | Function | | |
137-
| onMaskClick | 点击 Mask 时的回调函数 | Function | | |
121+
| 参数 | 描述 | 类型 | 默认值 | 备注 |
122+
| ------------------- | -------------- | -------- | ---- | ---------------------------------------- |
123+
| title | 标题文字 | String | / | |
124+
| isShowTitle | 是否展示标题 | Boolean | true | |
125+
| textAlign | 对齐方式 | String | left | 单选/多选时必须为left |
126+
| content | 正文显示配置 | Object | / | content 配置项见下表 |
127+
| maxDisplay | 最大显示条数 | Number | 7 | |
128+
| confirmText | 主操作文字 | String | 确定 | |
129+
| cancelText | 辅操作文字 | String | 取消 | |
130+
| isShowConfirmButton | 是否展示主操作按钮 | Boolean | true | 无确定按钮,则选择后自动关闭操作表。单列建议不显示(因为没有选项标记)多选必须存在 |
131+
| maskColor | 蒙版颜色 | String | #000 | |
132+
| maskOpacity | 蒙版透明度 | Number | 0.5 | |
133+
| transition | 设置弹出与关闭时的动画效果 | String | fade | 可选值：fade |
134+
| onItemClick | 执行点击操作项的回调函数 | Function | 关闭窗体 | 传入参数：instance(实例) 和 data(选择项数据) |
135+
| onConfirm | 确认选择时的回调函数 | Function | 关闭窗体 | 传入参数：instance(实例) 和 data(选择项数据) |
136+
| onCancel | 执行辅操作时的回调函数 | Function | 关闭窗体 | |
137+
| onShow | 窗体出现后的回调函数 | Function | | |
138+
| onHide | 窗体隐藏后的回调函数 | Function | | |
139+
| onMaskClick | 点击 Mask 时的回调函数 | Function | | |
140+
141+
138142

139143
## content 配置项
140144

141-
| 参数 | 描述 | 类型 | 默认值 | 备注 |
142-
|-------------- |--------------------------- |-------- |-------- |----------------------------------------------------------------------------------------------------- |
143-
| type | 类型 | String | single | 可选值: radio/checklist |
144-
| items | 操作项名称 | Array | / | 单列: 按此形式传入数据, [{'title':''},...]双列: 按此形式传入数据, [{'title':'','subtitle':''},...] |
145-
| defaultValue | 单选/多选默认选中项的下标 | Array | / | 每次加载组件前修改该值即可改变默认选中项,若不改变则以首次传入值为准(每次选中项的下标会以_index返回) |
145+
| 参数 | 描述 | 类型 | 默认值 | 备注 |
146+
| ------------ | ------------- | ------ | ------ | ---------------------------------------- |
147+
| type | 类型 | String | single | 可选值: radio/checklist |
148+
| items | 操作项名称 | Array | / | 单列: 按此形式传入数据, [{'title':''},...]双列: 按此形式传入数据, [{'title':'','subtitle':''},...] |
149+
| defaultValue | 单选/多选默认选中项的下标 | Array | / | 每次加载组件前修改该值即可改变默认选中项,若不改变则以首次传入值为准(每次选中项的下标会以_index返回) |

‎example/components/Example/ActionSheet.vue

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export default {
4343
showActionSheet2: function() {
4444
this.$ActionSheet({
4545
title: '请选择排序方式',
46+
maxDisplay: 5,
4647
content: {
4748
type: 'radio',
4849
items: [

‎packages/ActionSheet/src/ActionSheet.js

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const init = (propsData) => {
1010
const ActionSheet = (options = {}) => {
1111
const instance = init({
1212
title: options.title,
13+
maxDisplay: options.maxDisplay,
1314
isShowTitle: options.isShowTitle,
1415
content: options.content,
1516
textAlign: options.textAlign,

‎packages/ActionSheet/src/ActionSheet.vue

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<transition :name="actionsheetTransition" @after-enter="onShow()" @after-leave="onHide()">
33
<div :class="{'wd-actionsheet-theme-left': textAlign === 'left','wd-actionsheet-theme-center': textAlign === 'center'}" class="wd-actionsheet" ref="popup" v-if="visible" :style="{'z-index': zIndex}">
44
<header v-if="isShowTitle" class="wd-actionsheet-header">{{ title }}</header>
5-
<div class="wd-actionsheet-content">
5+
<div class="wd-actionsheet-content" ref="asItems" :style="`max-height: ${maxDisplay * 105}px;`">
66
<wd-actionsheet-slot @getData="getData" :items="content.items" :type="content.type" :defaultValue="content.defaultValue"></wd-actionsheet-slot>
77
</div>
88
<footer class="wd-actionsheet-footer">
@@ -31,6 +31,10 @@
3131
type: [String, Number],
3232
default: ''
3333
},
34+
maxDisplay: {
35+
type: Number,
36+
default: 7
37+
},
3438
isShowTitle: {
3539
type: Boolean,
3640
default: true
@@ -142,6 +146,7 @@
142146
}
143147
.wd-actionsheet-content {
144148
padding: 0 0 0 40px;
149+
overflow-y: auto;
145150
}
146151
.wd-actionsheet-footer {
147152
display: flex;

‎test/unit/ActionSheet.spec.js

+30
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,36 @@ describe('ActionSheet', () => {
6666
})
6767
})
6868

69+
it('actionsheet maxDisplay 最大显示条数', done => {
70+
vm = ActionSheet({
71+
title: '测试标题',
72+
isShowTitle: false,
73+
maxDisplay: 5,
74+
content: {
75+
items: [
76+
{title: '测试正文条目1'},
77+
{title: '测试正文条目2'},
78+
{title: '测试正文条目3'},
79+
{title: '测试正文条目4'},
80+
{title: '测试正文条目5'},
81+
{title: '测试正文条目6'},
82+
{title: '测试正文条目7'},
83+
{title: '测试正文条目8'}
84+
]
85+
}
86+
})
87+
Vue.nextTick(() => {
88+
const $listHeight = document.querySelector('.wd-actionsheet-list').offsetHeight
89+
const $itemHeight = document.querySelector('.wd-actionsheet-listitem').offsetHeight
90+
expect(vm.maxDisplay).to.equal(5)
91+
expect($itemHeight * 5).to.equal($listHeight)
92+
vm.value = false
93+
setTimeout(() => {
94+
done()
95+
}, 500)
96+
})
97+
})
98+
6999
it('actionsheet textAlign 对齐方式', done => {
70100
vm = ActionSheet({
71101
title: '测试标题',

0 commit comments

Comments
 (0)