= MIN_SWIPE_DISTANCE) {
/* istanbul ignore else */
- if (deltaX > 0 && active !== 0) {
- this.$emit('change', active - 1);
- } else if (deltaX < 0 && active !== this.count - 1) {
- this.$emit('change', active + 1);
+ if (deltaX > 0 && currentIndex !== 0) {
+ this.$emit('change', currentIndex - 1);
+ } else if (deltaX < 0 && currentIndex !== this.count - 1) {
+ this.$emit('change', currentIndex + 1);
}
}
},
diff --git a/src/tabs/Title.js b/src/tabs/Title.js
index cbafd0f867b..4a26952b2f5 100644
--- a/src/tabs/Title.js
+++ b/src/tabs/Title.js
@@ -7,7 +7,7 @@ export default {
type: String,
color: String,
title: String,
- active: Boolean,
+ isActive: Boolean,
ellipsis: Boolean,
disabled: Boolean,
scrollable: Boolean,
@@ -19,7 +19,7 @@ export default {
computed: {
style() {
const style = {};
- const { color, active } = this;
+ const { color, isActive } = this;
const isCard = this.type === 'card';
// card theme color
@@ -27,7 +27,7 @@ export default {
style.borderColor = color;
if (!this.disabled) {
- if (active) {
+ if (isActive) {
style.backgroundColor = color;
} else {
style.color = color;
@@ -35,7 +35,7 @@ export default {
}
}
- const titleColor = active ? this.activeColor : this.inactiveColor;
+ const titleColor = isActive ? this.activeColor : this.inactiveColor;
if (titleColor) {
style.color = titleColor;
}
@@ -64,9 +64,9 @@ export default {
return (
{
const { titles } = this.$refs;
- if (!titles || !titles[this.curActive] || this.type !== 'line') {
+ if (!titles || !titles[this.currentIndex] || this.type !== 'line') {
return;
}
- const title = titles[this.curActive].$el;
+ const title = titles[this.currentIndex].$el;
const { lineWidth, lineHeight } = this;
const width = isDef(lineWidth) ? lineWidth : title.offsetWidth / 2;
const left = title.offsetLeft + title.offsetWidth / 2;
@@ -230,47 +238,47 @@ export default createComponent({
});
},
- // correct the value of active
- correctActive(active) {
- active = +active;
- const exist = this.children.some(tab => tab.index === active);
- const defaultActive = (this.children[0] || {}).index || 0;
- this.setCurActive(exist ? active : defaultActive);
+ // correct the index of active tab
+ setCurrentIndexByName(name) {
+ const matched = this.children.filter(tab => tab.computedName === name);
+ const defaultIndex = (this.children[0] || {}).index || 0;
+ this.setCurrentIndex(matched.length ? matched[0].index : defaultIndex);
},
- setCurActive(active) {
- active = this.findAvailableTab(active, active < this.curActive);
- if (isDef(active) && active !== this.curActive) {
- this.$emit('input', active);
+ setCurrentIndex(currentIndex) {
+ currentIndex = this.findAvailableTab(currentIndex);
- if (this.curActive !== null) {
- this.$emit('change', active, this.children[active].title);
- }
+ if (isDef(currentIndex) && currentIndex !== this.currentIndex) {
+ const shouldEmitChange = this.currentIndex !== null;
+ this.currentIndex = currentIndex;
+ this.$emit('input', this.currentName);
- this.curActive = active;
+ if (shouldEmitChange) {
+ this.$emit('change', this.currentName, this.children[currentIndex].title);
+ }
}
},
- findAvailableTab(active, reverse) {
- const diff = reverse ? -1 : 1;
- let index = active;
+ findAvailableTab(index) {
+ const diff = index < this.currentIndex ? -1 : 1;
while (index >= 0 && index < this.children.length) {
if (!this.children[index].disabled) {
return index;
}
+
index += diff;
}
},
// emit event when clicked
onClick(index) {
- const { title, disabled } = this.children[index];
+ const { title, disabled, name } = this.children[index];
if (disabled) {
- this.$emit('disabled', index, title);
+ this.$emit('disabled', name, title);
} else {
- this.setCurActive(index);
- this.$emit('click', index, title);
+ this.setCurrentIndex(index);
+ this.$emit('click', name, title);
}
},
@@ -278,12 +286,12 @@ export default createComponent({
scrollIntoView(immediate) {
const { titles } = this.$refs;
- if (!this.scrollable || !titles || !titles[this.curActive]) {
+ if (!this.scrollable || !titles || !titles[this.currentIndex]) {
return;
}
const { nav } = this.$refs;
- const title = titles[this.curActive].$el;
+ const title = titles[this.currentIndex].$el;
const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
scrollLeftTo(nav, to, immediate ? 0 : this.duration);
@@ -307,7 +315,7 @@ export default createComponent({
type={type}
title={item.title}
color={this.color}
- active={index === this.curActive}
+ isActive={index === this.currentIndex}
ellipsis={ellipsis}
disabled={item.disabled}
scrollable={scrollable}
@@ -339,11 +347,11 @@ export default createComponent({
{this.slots()}