blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Tab: optimize code (#899)

Browse Source
This commit is contained in:
neverland 2018-11-13 21:29:28 +08:00 committed by GitHub
parent d4f303043d
commit 10a76f2982
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/tab/index.ts
View File

@ -17,14 +17,12 @@ VantComponent({
},
watch: {
disabled() {
const parent = this.getRelationNodes('../tabs/index')[0];
if (parent) {
parent.updateTabs();
}
},
title: 'update',
disabled: 'update'
},
title() {
methods: {
update() {
const parent = this.getRelationNodes('../tabs/index')[0];
if (parent) {
parent.updateTabs();

38
packages/tabs/index.ts
View File

@ -10,19 +10,15 @@ VantComponent({
name: 'tab',
type: 'descendant',
linked(child: Weapp.Component) {
this.data.tabs.push({
instance: child,
data: child.data
});
this.updateTabs();
this.child.push(child);
this.updateTabs(this.data.tabs.concat(child.data));
},
unlinked(child: Weapp.Component) {
const tabs = this.data.tabs.filter(item => item.instance !== child);
this.setData({
tabs,
scrollable: tabs.length > this.data.swipeThreshold
});
this.setActiveTab();
const index = this.child.indexOf(child);
const { tabs } = this.data;
tabs.splice(index, 1);
this.child.splice(index, 1);
this.updateTabs(tabs);
}
},
@ -65,7 +61,7 @@ VantComponent({
watch: {
swipeThreshold() {
this.setData({
scrollable: this.data.tabs.length > this.data.swipeThreshold
scrollable: this.child.length > this.data.swipeThreshold
});
},
color: 'setLine',
@ -73,14 +69,18 @@ VantComponent({
active: 'setActiveTab'
},
beforeCreate() {
this.child = [];
},
mounted() {
this.setLine();
this.scrollIntoView();
},
methods: {
updateTabs() {
const { tabs } = this.data;
updateTabs(tabs) {
tabs = tabs || this.data.tabs;
this.setData({
tabs,
scrollable: tabs.length > this.data.swipeThreshold
@ -91,13 +91,13 @@ VantComponent({
trigger(eventName: string, index: number) {
this.$emit(eventName, {
index,
title: this.data.tabs[index].data.title
title: this.data.tabs[index].title
});
},
onTap(event: Weapp.Event) {
const { index } = event.currentTarget.dataset;
if (this.data.tabs[index].data.disabled) {
if (this.data.tabs[index].disabled) {
this.trigger('disabled', index);
} else {
this.trigger('click', index);
@ -138,7 +138,7 @@ VantComponent({
},
setActiveTab() {
this.data.tabs.forEach((item, index) => {
this.child.forEach((item, index) => {
const data: TabItemData = {
active: index === this.data.active
};
@ -147,8 +147,8 @@ VantComponent({
data.inited = true;
}
if (data.active !== item.instance.data.active) {
item.instance.setData(data);
if (data.active !== item.data.active) {
item.setData(data);
}
});

6
packages/tabs/index.wxml
View File

@ -13,11 +13,11 @@
wx:for="{{ tabs }}"
wx:key="index"
data-index="{{ index }}"
class="van-ellipsis van-tab {{ index === active ? 'van-tab--active' : '' }} {{ item.data.disabled ? 'van-tab--disabled' : '' }}"
style="{{ color && (index === active) !== (type === 'card') && !item.data.disabled ? 'color: ' + color : '' }} {{ color && index === active && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }}"
class="van-ellipsis van-tab {{ index === active ? 'van-tab--active' : '' }} {{ item.disabled ? 'van-tab--disabled' : '' }}"
style="{{ color && (index === active) !== (type === 'card') && !item.disabled ? 'color: ' + color : '' }} {{ color && index === active && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }}"
bind:tap="onTap"
>
{{ item.data.title }}
{{ item.title }}
</view>
</view>
</scroll-view>