drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

support Tabs

Browse source 
support Tabs
This commit is contained in:
梁灏 2017-03-03 13:38:46 +08:00
parent b2d29401f7
commit 30510c3d9e
8 changed files with 98 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/tabs/pane.vue
View file

@ -7,7 +7,7 @@
export default {
name: 'TabPane',
props: {
key: {
name: {
type: String
},
label: {
@ -29,7 +29,8 @@
data () {
return {
prefixCls: prefixCls,
show: true
show: true,
currentName: this.name
};
},
methods: {
@ -38,6 +39,10 @@
}
},
watch: {
name (val) {
this.currentName = val;
this.updateNav();
},
label () {
this.updateNav();
},
@ -48,7 +53,7 @@
this.updateNav();
}
},
ready () {
mounted () {
this.updateNav();
}
};

46
src/components/tabs/tabs.vue
View file

@ -4,12 +4,12 @@
<div :class="[prefixCls + '-nav-container']">
<div :class="[prefixCls + '-nav-wrap']">
<div :class="[prefixCls + '-nav-scroll']">
<div :class="[prefixCls + '-nav']" v-el:nav>
<div :class="[prefixCls + '-nav']" ref="nav">
<div :class="barClasses" :style="barStyle"></div>
<div :class="tabCls(item)" v-for="item in navList" @click="handleChange($index)">
<div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)">
<Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
{{ item.label }}
<Icon v-if="showClose(item)" type="ios-close-empty" @click.stop="handleRemove($index)"></Icon>
<Icon v-if="showClose(item)" type="ios-close-empty" @click.native.stop="handleRemove(index)"></Icon>
</div>
</div>
</div>
@ -26,9 +26,10 @@
const prefixCls = 'ivu-tabs';
export default {
name: 'Tabs',
components: { Icon },
props: {
activeKey: {
value: {
type: [String, Number]
},
type: {
@ -57,7 +58,8 @@
prefixCls: prefixCls,
navList: [],
barWidth: 0,
barOffset: 0
barOffset: 0,
activeKey: this.value
};
},
computed: {
@ -88,7 +90,7 @@
];
},
contentStyle () {
const x = this.navList.findIndex((nav) => nav.key === this.activeKey);
const x = this.navList.findIndex((nav) => nav.name === this.activeKey);
const p = x === 0 ? '0%' : `-${x}00%`;
let style = {};
@ -124,13 +126,13 @@
this.navList.push({
label: pane.label,
icon: pane.icon || '',
key: pane.key || index,
name: pane.currentName || index,
disabled: pane.disabled,
closable: pane.closable
});
if (!pane.key) pane.key = index;
if (!pane.currentName) pane.currentName = index;
if (index === 0) {
if (!this.activeKey) this.activeKey = pane.key || index;
if (!this.activeKey) this.activeKey = pane.currentName || index;
}
});
this.updateStatus();
@ -138,8 +140,8 @@
},
updateBar () {
this.$nextTick(() => {
const index = this.navList.findIndex((nav) => nav.key === this.activeKey);
const prevTabs = this.$els.nav.querySelectorAll(`.${prefixCls}-tab`);
const index = this.navList.findIndex((nav) => nav.name === this.activeKey);
const prevTabs = this.$refs.nav.querySelectorAll(`.${prefixCls}-tab`);
const tab = prevTabs[index];
this.barWidth = parseFloat(getStyle(tab, 'width'));
@ -158,29 +160,30 @@
},
updateStatus () {
const tabs = this.getTabs();
tabs.forEach(tab => tab.show = (tab.key === this.activeKey) || this.animated);
tabs.forEach(tab => tab.show = (tab.currentName === this.activeKey) || this.animated);
},
tabCls (item) {
return [
`${prefixCls}-tab`,
{
[`${prefixCls}-tab-disabled`]: item.disabled,
[`${prefixCls}-tab-active`]: item.key === this.activeKey
[`${prefixCls}-tab-active`]: item.name === this.activeKey
}
];
},
handleChange (index) {
const nav = this.navList[index];
if (nav.disabled) return;
this.activeKey = nav.key;
this.$emit('on-click', nav.key);
this.activeKey = nav.name;
this.$emit('input', nav.name);
this.$emit('on-click', nav.name);
},
handleRemove (index) {
const tabs = this.getTabs();
const tab = tabs[index];
tab.$destroy(true);
if (tab.key === this.activeKey) {
if (tab.currentName === this.activeKey) {
const newTabs = this.getTabs();
let activeKey = -1;
@ -189,16 +192,16 @@
const rightNoDisabledTabs = tabs.filter((item, itemIndex) => !item.disabled && itemIndex > index);
if (rightNoDisabledTabs.length) {
activeKey = rightNoDisabledTabs[0].key;
activeKey = rightNoDisabledTabs[0].currentName;
} else if (leftNoDisabledTabs.length) {
activeKey = leftNoDisabledTabs[leftNoDisabledTabs.length - 1].key;
activeKey = leftNoDisabledTabs[leftNoDisabledTabs.length - 1].currentName;
} else {
activeKey = newTabs[0].key;
activeKey = newTabs[0].currentName;
}
}
this.activeKey = activeKey;
}
this.$emit('on-tab-remove', tab.key);
this.$emit('on-tab-remove', tab.currentName);
this.updateNav();
},
showClose (item) {
@ -214,6 +217,9 @@
}
},
watch: {
value (val) {
this.activeKey = val;
},
activeKey () {
this.updateBar();
this.updateStatus();