From 961f48d3affa0e1cec3f5b9217374f1b10032d7a Mon Sep 17 00:00:00 2001 From: QiuShuiBai <1125097005@qq.com> Date: Fri, 17 Jan 2025 16:42:11 +0800 Subject: [PATCH] feat: collapse --- example/app.mpx | 1 + example/common/config.ts | 4 +- example/pages/collapse/basic-collapse.mpx | 33 +++++++ example/pages/collapse/change-min-height.mpx | 51 ++++++++++ example/pages/collapse/change-position.mpx | 35 +++++++ example/pages/collapse/change-switch-text.mpx | 47 +++++++++ example/pages/collapse/index.mpx | 47 +++++++++ example/pages/collapse/slot-wx-model.mpx | 32 +++++++ example/static/wx/project.config.json | 2 +- .../src/components/collapse/index.mpx | 68 +++++++++++++ .../src/components/collapse/index.ts | 96 +++++++++++++++++++ 11 files changed, 414 insertions(+), 2 deletions(-) create mode 100644 example/pages/collapse/basic-collapse.mpx create mode 100644 example/pages/collapse/change-min-height.mpx create mode 100644 example/pages/collapse/change-position.mpx create mode 100644 example/pages/collapse/change-switch-text.mpx create mode 100644 example/pages/collapse/index.mpx create mode 100644 example/pages/collapse/slot-wx-model.mpx create mode 100644 packages/mpx-cube-ui/src/components/collapse/index.mpx create mode 100644 packages/mpx-cube-ui/src/components/collapse/index.ts diff --git a/example/app.mpx b/example/app.mpx index cf10bf5..b433329 100644 --- a/example/app.mpx +++ b/example/app.mpx @@ -15,6 +15,7 @@ "pages": [ "./pages/index", "./pages/button/index", + "./pages/collapse/index", "./pages/icon/index", "./pages/button-group/index", "./pages/divider/index", diff --git a/example/common/config.ts b/example/common/config.ts index b22eb4b..ac1a708 100644 --- a/example/common/config.ts +++ b/example/common/config.ts @@ -3,6 +3,7 @@ export default { 'default': [ 'button', 'button-group', + 'collapse', 'icon', 'radio', 'radio-group', @@ -40,7 +41,8 @@ export default { 'button-group', 'icon', 'divider', - 'float-ball' + 'float-ball', + 'collapse' ] }, { diff --git a/example/pages/collapse/basic-collapse.mpx b/example/pages/collapse/basic-collapse.mpx new file mode 100644 index 0000000..ece7c7b --- /dev/null +++ b/example/pages/collapse/basic-collapse.mpx @@ -0,0 +1,33 @@ + + + + + + + diff --git a/example/pages/collapse/change-min-height.mpx b/example/pages/collapse/change-min-height.mpx new file mode 100644 index 0000000..cc67132 --- /dev/null +++ b/example/pages/collapse/change-min-height.mpx @@ -0,0 +1,51 @@ + + + + + + + diff --git a/example/pages/collapse/change-position.mpx b/example/pages/collapse/change-position.mpx new file mode 100644 index 0000000..f93228c --- /dev/null +++ b/example/pages/collapse/change-position.mpx @@ -0,0 +1,35 @@ + + + + + + + diff --git a/example/pages/collapse/change-switch-text.mpx b/example/pages/collapse/change-switch-text.mpx new file mode 100644 index 0000000..e0513e5 --- /dev/null +++ b/example/pages/collapse/change-switch-text.mpx @@ -0,0 +1,47 @@ + + + + + + + diff --git a/example/pages/collapse/index.mpx b/example/pages/collapse/index.mpx new file mode 100644 index 0000000..bc63fdd --- /dev/null +++ b/example/pages/collapse/index.mpx @@ -0,0 +1,47 @@ + + + + + + + diff --git a/example/pages/collapse/slot-wx-model.mpx b/example/pages/collapse/slot-wx-model.mpx new file mode 100644 index 0000000..89e79c5 --- /dev/null +++ b/example/pages/collapse/slot-wx-model.mpx @@ -0,0 +1,32 @@ + + + + + + + diff --git a/example/static/wx/project.config.json b/example/static/wx/project.config.json index 82abd37..51ef74c 100644 --- a/example/static/wx/project.config.json +++ b/example/static/wx/project.config.json @@ -38,7 +38,7 @@ "list": [ { "name": "", - "pathName": "pages/picker/index", + "pathName": "pages/collapse/index", "query": "", "launchMode": "default", "scene": null diff --git a/packages/mpx-cube-ui/src/components/collapse/index.mpx b/packages/mpx-cube-ui/src/components/collapse/index.mpx new file mode 100644 index 0000000..b50168f --- /dev/null +++ b/packages/mpx-cube-ui/src/components/collapse/index.mpx @@ -0,0 +1,68 @@ + + + + + + + diff --git a/packages/mpx-cube-ui/src/components/collapse/index.ts b/packages/mpx-cube-ui/src/components/collapse/index.ts new file mode 100644 index 0000000..c1e3f90 --- /dev/null +++ b/packages/mpx-cube-ui/src/components/collapse/index.ts @@ -0,0 +1,96 @@ +import { createComponent } from '../../common/helper/create-component' +const EVENT_INPUT = 'input' +createComponent({ + options: { + multipleSlots: true + }, + properties: { + // 折叠内容最大高度，默认为0，如果值很大则没有折叠效果了，需要写单位 + minHeight: { + type: String, + value: '0' + }, + switchPositon: { + type: String, + value: 'top' + }, + switchText: { + type: Array, + optionalTypes: [String], + value: ['展开', '收起'] + }, + collapsed: { + type: Boolean, + value: true + } + }, + watch: { + collapsed: { + handler(newV) { + this.isCollapsed = newV + }, + immediate: true + } + }, + data: { + isCollapsed: true, + contentMaxHeight: '0px', + textStyle: {}, + hideSwitch: false + }, + computed: { + isSetMinHeight() { + return this.minHeight !== '0' + }, + showTopSwitch() { + return this.switchPositon === 'top' && !this.hideSwitch + }, + showBottomSwitch() { + return this.switchPositon === 'bottom' && !this.hideSwitch + }, + text() { + const switchText = this.switchText + if (Array.isArray(switchText)) { + return this.isCollapsed ? switchText[0] : switchText[1] + } else if (typeof switchText === 'string') { + return switchText + } + return '' + }, + contentWrapStyle() { + return { + maxHeight: this.isCollapsed ? this.minHeight : this.contentMaxHeight + } + } + }, + methods: { + // query.select('.box').boundingClientRect((boxRect) => { + // query.select('.parent').boundingClientRect((parentRect) => { + // const distance = boxRect.bottom - parentRect.top; + // console.log('盒子底部与父元素顶部的距离: ', distance); + // }).exec(); + // }).exec(); + + heightHandler() { + const query = this.createSelectorQuery() + const content = query.select('.cube-collapse-content') + content.boundingClientRect((res) => { + this.contentMaxHeight = res.height + 'px' + }) + query.exec() + }, + toggleCollapse() { + this.isCollapsed = !this.isCollapsed + // 当绑定值变化时触发 + // @arg 事件对象 e，包含当前选中的复选框值的集合 + this.triggerEvent(EVENT_INPUT, { + value: this.isCollapsed + }) + } + }, + lifetimes: { + ready() { + this.heightHandler() + } + } +})