138 lines
2.7 KiB
JavaScript
138 lines
2.7 KiB
JavaScript
import nodeUtil from '../core/utils/node-util';
|
||
|
||
Component({
|
||
|
||
externalClasses: ['l-class', 'l-title-class', 'l-body-class'],
|
||
|
||
relations: {
|
||
'../collapse/index': {
|
||
type: 'parent'
|
||
}
|
||
},
|
||
|
||
options: {
|
||
multipleSlots: true,
|
||
pureDataPattern: /^_/
|
||
},
|
||
|
||
properties: {
|
||
/**
|
||
* 折叠面板子项自定义id
|
||
*/
|
||
itemId: {
|
||
type: String,
|
||
value: 'default'
|
||
},
|
||
/**
|
||
* 标题文字
|
||
*/
|
||
title: {
|
||
type: String,
|
||
value: '默认标题'
|
||
},
|
||
/**
|
||
* 是否开启自定义标题
|
||
*/
|
||
customTitle: {
|
||
type: Boolean,
|
||
value: false
|
||
},
|
||
/**
|
||
* 是否禁用内容区展开
|
||
*/
|
||
disable: {
|
||
type: Boolean,
|
||
value: false
|
||
},
|
||
/**
|
||
* 内容区域展开动画速度
|
||
*/
|
||
animationTime: {
|
||
type: String,
|
||
value: '0.3'
|
||
}
|
||
},
|
||
data: {
|
||
/**
|
||
* 内容区高度
|
||
*/
|
||
bodyHeight: '0',
|
||
/**
|
||
* 内容区是否展开
|
||
*/
|
||
isExpandContent: false,
|
||
/**
|
||
* 默认id
|
||
*/
|
||
_idDefault: -1,
|
||
},
|
||
methods: {
|
||
/**
|
||
* 点击标题
|
||
*/
|
||
async onTapTitle() {
|
||
if (this.data.disable) {
|
||
return;
|
||
}
|
||
let parents = this.getRelationNodes('../collapse/index');
|
||
await parents[0].onTapCollapseItem(this);
|
||
},
|
||
|
||
/**
|
||
* 折叠内容区
|
||
*/
|
||
async foldContent() {
|
||
// 获取 container-body-wrapper 的 css 属性信息
|
||
const containerBodyWrapperRect =
|
||
await nodeUtil.getNodeRectFromComponent(this, '.container-body-wrapper');
|
||
|
||
// 这里很重要，先把高度改为固定高度，transition 才会生效
|
||
if (this.data.isExpandContent) {
|
||
this.setData({
|
||
bodyHeight: containerBodyWrapperRect.height + 'px'
|
||
});
|
||
|
||
setTimeout(() => {
|
||
this.setData({
|
||
isExpandContent: false,
|
||
bodyHeight: '0px'
|
||
});
|
||
}, 20);
|
||
} else {
|
||
this.setData({
|
||
isExpandContent: false,
|
||
bodyHeight: '0px'
|
||
});
|
||
}
|
||
|
||
|
||
},
|
||
|
||
/**
|
||
* 展开内容区
|
||
*/
|
||
async expandContent() {
|
||
// 获取 container-body-wrapper 的 css 属性信息
|
||
const containerBodyWrapperRect =
|
||
await nodeUtil.getNodeRectFromComponent(this, '.container-body-wrapper');
|
||
|
||
this.setData({
|
||
isExpandContent: true,
|
||
bodyHeight: containerBodyWrapperRect.height + 'px'
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 过渡效果结束后，把高度改为 auto
|
||
* 不然内容改变时，由于高度固定，内容会显示不全
|
||
*/
|
||
onTransitionend() {
|
||
if (this.data.isExpandContent) {
|
||
this.setData({
|
||
bodyHeight: 'auto'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|