165 lines
3.6 KiB
JavaScript
165 lines
3.6 KiB
JavaScript
import scrollCenter from '../behaviors/scrollCenter';
|
||
|
||
Component({
|
||
/**
|
||
* 组件的属性列表
|
||
*/
|
||
behaviors: [scrollCenter],
|
||
externalClasses: [
|
||
'l-class',
|
||
'l-header-class',
|
||
'l-class-active',
|
||
'l-active-class',
|
||
'l-class-inactive',
|
||
'l-inactive-class',
|
||
'l-class-tabimage',
|
||
'l-tab-image-class',
|
||
'l-class-header-line',
|
||
'l-header-line-class',
|
||
'l-class-line',
|
||
'l-line-class',
|
||
'l-class-icon',
|
||
'l-icon-class',
|
||
'l-class-badge',
|
||
'l-badge-class'
|
||
],
|
||
options: {
|
||
multipleSlots: true,
|
||
pureDataPattern: /^_/
|
||
},
|
||
|
||
relations: {
|
||
'../segment-item/index': {
|
||
type: 'child',
|
||
linked(target) {
|
||
// 每次有子节点被插入时执行，target是该节点实例对象，触发在该节点attached生命周期之后
|
||
this.initTabs(target);
|
||
}
|
||
},
|
||
},
|
||
properties: {
|
||
activeKey: {
|
||
type: String,
|
||
value: '',
|
||
observer: 'changeCurrent'
|
||
},
|
||
placement: {
|
||
type: String,
|
||
value: 'top',
|
||
},
|
||
scrollable: Boolean,
|
||
hasLine: {
|
||
type: Boolean,
|
||
value: true
|
||
},
|
||
animatedForLine: Boolean,
|
||
activeColor: {
|
||
type: String,
|
||
},
|
||
inactiveColor: {
|
||
type: String,
|
||
},
|
||
equalWidth: {
|
||
type: Boolean,
|
||
value: true
|
||
},
|
||
even: {
|
||
type: Boolean,
|
||
value: true
|
||
},
|
||
width: Number,
|
||
height: Number,
|
||
itemHeight: Number,
|
||
itemWidth: Number
|
||
},
|
||
|
||
observers: {
|
||
'activeKey': function (newKey) {
|
||
if (!newKey) return;
|
||
const index = this.data.tabList.findIndex(tab => tab.key === newKey);
|
||
this.setData({
|
||
currentIndex: index
|
||
}, () => {
|
||
if (this.data.scrollable) {
|
||
this.queryMultipleNodes();
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 组件的初始数据
|
||
*/
|
||
data: {
|
||
// segment-item 绑定的 data-cell 数据
|
||
_cells:[],
|
||
tabList: [],
|
||
currentIndex: 0,
|
||
_segmentItemInstances: []
|
||
},
|
||
|
||
/**
|
||
* 组件的方法列表
|
||
*/
|
||
methods: {
|
||
initTabs(segmentItemInstance) {
|
||
const val = this.data.activeKey;
|
||
let items = this.getRelationNodes('../segment-item/index');
|
||
if (items.length > 0) {
|
||
if (items.length === this.data.tabList.length && this.data._segmentItemInstances.indexOf(segmentItemInstance) > 0) return;
|
||
let activeKey = val,
|
||
currentIndex = this.data.currentIndex;
|
||
let _cells = [];
|
||
const tab = items.map((item, index) => {
|
||
activeKey = !val && index === 0 ? item.data.key : activeKey;
|
||
currentIndex = item.data.key === activeKey ? index : currentIndex;
|
||
// 存储 segment-item 绑定的 data-cell 数据
|
||
_cells[index] = item.dataset.cell;
|
||
return {
|
||
...item.data
|
||
};
|
||
});
|
||
this.setData({
|
||
_cells,
|
||
activeKey,
|
||
tabList: tab,
|
||
currentIndex,
|
||
_segmentItemInstances: items
|
||
}, () => {
|
||
if (this.data.scrollable) {
|
||
this.queryMultipleNodes();
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
handleChange(e) {
|
||
const activeKey = e.currentTarget.dataset.key;
|
||
const currentIndex = e.currentTarget.dataset.index;
|
||
this._setChangeData({
|
||
activeKey,
|
||
currentIndex
|
||
});
|
||
},
|
||
|
||
_setChangeData({
|
||
activeKey,
|
||
currentIndex
|
||
}) {
|
||
this.setData({
|
||
activeKey,
|
||
currentIndex
|
||
}, () => {
|
||
if (this.data.scrollable) {
|
||
this.queryMultipleNodes();
|
||
}
|
||
});
|
||
this.triggerEvent('linchange', {
|
||
activeKey,
|
||
currentIndex,
|
||
cell:this.data._cells[currentIndex]
|
||
});
|
||
}
|
||
}
|
||
});
|