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

[bugfix] Tab: color not work in card type (#1763)

Browse Source
This commit is contained in:
neverland 2018-09-06 20:40:14 +08:00 committed by GitHub
parent 7f549e6519
commit 6bbecc8a90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/tab/test/__snapshots__/demo.spec.js.snap
View File

@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
<div class="van-tabs__line"></div>
</div>
</div>
@ -32,7 +32,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
<div class="van-tabs__line"></div>
</div>
</div>
@ -75,7 +75,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
<div class="van-tabs__line"></div>
</div>
</div>
@ -102,7 +102,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-tabs van-tabs--card">
<div class="van-tabs__wrap">
<div class="van-tabs__nav van-tabs__nav--card">
<div class="van-tabs__nav van-tabs__nav--card" style="border-color:undefined;">
<!---->
</div>
</div>
@ -129,7 +129,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
<div class="van-tabs__line"></div>
</div>
</div>
@ -156,7 +156,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
<div class="van-tabs__line"></div>
</div>
</div>
@ -183,7 +183,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
<div class="van-tabs__line"></div>
</div>
</div>
@ -214,7 +214,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
<div class="van-tabs__line"></div>
</div>
</div>

35
packages/tabs/index.vue
View File

@ -8,7 +8,7 @@
{ 'van-hairline--top-bottom': type === 'line' }
]"
>
<div :class="b('nav', [type])" ref="nav">
<div :class="b('nav', [type])" ref="nav" :style="navStyle">
<div v-if="type === 'line'" :class="b('line')" :style="lineStyle" />
<div
v-for="(tab, index) in tabs"
@ -18,7 +18,7 @@
'van-tab--active': index === curActive,
'van-tab--disabled': tab.disabled
}"
:style="{ color }"
:style="getTabStyle(tab, index)"
@click="onClick(index)"
>
<span class="van-ellipsis" ref="title">{{ tab.title }}</span>
@ -109,6 +109,12 @@ export default create({
default:
return null;
}
},
navStyle() {
return {
borderColor: this.color
};
}
},
@ -119,6 +125,10 @@ export default create({
}
},
color() {
this.setLine();
},
tabs(tabs) {
this.correctActive(this.curActive || this.active);
this.scrollIntoView();
@ -338,6 +348,27 @@ export default create({
const title = this.$refs.title[index];
title.parentNode.replaceChild(el, title);
});
},
getTabStyle(item, index) {
const style = {};
const { color } = this;
const active = index === this.curActive;
const isCard = this.type === 'card';
if (color) {
if (!item.disabled && isCard !== active) {
style.color = color;
}
if (!item.disabled && isCard && active) {
style.backgroundColor = color;
}
if (isCard) {
style.borderColor = color;
}
}
return style;
}
}
});

4
packages/vant-css/src/tab.css
View File

@ -72,6 +72,10 @@ $van-tabs-card-height: 30px;
color: $white;
background-color: $red;
}
&--disabled {
color: $gray;
}
}
}
}