lethe 8816e421e8 [improvement]cell:优化默认slot展示效果,添加title区域自定义class (#360)
* [improvement]cell:优化默认slot展示效果,添加title区域自定义class

* cell-group添加titleWidth实现整体控制title区域宽度
2018-07-16 20:29:13 +08:00

68 lines
1.5 KiB
JavaScript

const CELL_PATH = '../cell/index';
const FIELD_PATH = '../field/index'
Component({
properties: {
titleWidth: {
type: Number,
value: null
}
},
relations: {
[CELL_PATH]: {
type: 'child',
linked() {
this._updateIsLastElement(CELL_PATH);
},
linkChanged() {
this._updateIsLastElement(CELL_PATH);
},
unlinked() {
this._updateIsLastElement(CELL_PATH);
}
},
[FIELD_PATH]: {
type: 'child',
linked() {
this._updateIsLastElement(FIELD_PATH);
},
linkChanged() {
this._updateIsLastElement(FIELD_PATH);
},
unlinked() {
this._updateIsLastElement(FIELD_PATH);
}
}
},
data: {
elementUpdateTimeout: 0
},
methods: {
_updateIsLastElement(childPath) {
// 用 setTimeout 减少计算次数
if (this.data.elementUpdateTimeout > 0) {
return;
}
const elementUpdateTimeout = setTimeout(() => {
this.setData({ elementUpdateTimeout: 0 });
let elements = this.getRelationNodes(childPath);
const { titleWidth } = this.properties;
if (elements.length > 0) {
let lastIndex = elements.length - 1;
elements.forEach((cell, index) => {
titleWidth && cell.setTitleWidth(titleWidth)
cell.updateIsLastElement(index === lastIndex);
});
}
});
this.setData({ elementUpdateTimeout });
}
}
});