empty master
This commit is contained in:
梁灏
parent
92c1162255
commit
67d534df27
276 changed files with 0 additions and 28368 deletions
|
|
@ -1,223 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<div :class="[prefixCls + '-bar']">
|
||||
<div :class="[prefixCls + '-nav-container']">
|
||||
<div :class="[prefixCls + '-nav-wrap']">
|
||||
<div :class="[prefixCls + '-nav-scroll']">
|
||||
<div :class="[prefixCls + '-nav']" v-el:nav>
|
||||
<div :class="barClasses" :style="barStyle"></div>
|
||||
<div :class="tabCls(item)" v-for="item 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="contentClasses" :style="contentStyle"><slot></slot></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Icon from '../icon/icon.vue';
|
||||
import { oneOf, getStyle } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-tabs';
|
||||
|
||||
export default {
|
||||
components: { Icon },
|
||||
props: {
|
||||
activeKey: {
|
||||
type: [String, Number]
|
||||
},
|
||||
type: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['line', 'card']);
|
||||
},
|
||||
default: 'line'
|
||||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small', 'default']);
|
||||
},
|
||||
default: 'default'
|
||||
},
|
||||
animated: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
navList: [],
|
||||
barWidth: 0,
|
||||
barOffset: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-card`]: this.type === 'card',
|
||||
[`${prefixCls}-mini`]: this.size === 'small' && this.type === 'line',
|
||||
[`${prefixCls}-no-animation`]: !this.animated
|
||||
}
|
||||
];
|
||||
},
|
||||
contentClasses () {
|
||||
return [
|
||||
`${prefixCls}-content`,
|
||||
{
|
||||
[`${prefixCls}-content-animated`]: this.animated
|
||||
}
|
||||
];
|
||||
},
|
||||
barClasses () {
|
||||
return [
|
||||
`${prefixCls}-ink-bar`,
|
||||
{
|
||||
[`${prefixCls}-ink-bar-animated`]: this.animated
|
||||
}
|
||||
];
|
||||
},
|
||||
contentStyle () {
|
||||
const x = this.navList.findIndex((nav) => nav.key === this.activeKey);
|
||||
const p = x === 0 ? '0%' : `-${x}00%`;
|
||||
|
||||
let style = {};
|
||||
if (x > -1) {
|
||||
style = {
|
||||
transform: `translateX(${p}) translateZ(0px)`
|
||||
};
|
||||
}
|
||||
return style;
|
||||
},
|
||||
barStyle () {
|
||||
let style = {
|
||||
display: 'none',
|
||||
width: `${this.barWidth}px`
|
||||
};
|
||||
if (this.type === 'line') style.display = 'block';
|
||||
if (this.animated) {
|
||||
style.transform = `translate3d(${this.barOffset}px, 0px, 0px)`;
|
||||
} else {
|
||||
style.left = `${this.barOffset}px`;
|
||||
}
|
||||
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTabs () {
|
||||
return this.$children.filter(item => item.$options.name === 'TabPane');
|
||||
},
|
||||
updateNav () {
|
||||
this.navList = [];
|
||||
this.getTabs().forEach((pane, index) => {
|
||||
this.navList.push({
|
||||
label: pane.label,
|
||||
icon: pane.icon || '',
|
||||
key: pane.key || index,
|
||||
disabled: pane.disabled,
|
||||
closable: pane.closable
|
||||
});
|
||||
if (!pane.key) pane.key = index;
|
||||
if (index === 0) {
|
||||
if (!this.activeKey) this.activeKey = pane.key || index;
|
||||
}
|
||||
});
|
||||
this.updateStatus();
|
||||
this.updateBar();
|
||||
},
|
||||
updateBar () {
|
||||
this.$nextTick(() => {
|
||||
const index = this.navList.findIndex((nav) => nav.key === this.activeKey);
|
||||
const prevTabs = this.$els.nav.querySelectorAll(`.${prefixCls}-tab`);
|
||||
const tab = prevTabs[index];
|
||||
this.barWidth = parseFloat(getStyle(tab, 'width'));
|
||||
|
||||
if (index > 0) {
|
||||
let offset = 0;
|
||||
const gutter = this.size === 'small' ? 0 : 16;
|
||||
for (let i = 0; i < index; i++) {
|
||||
offset += parseFloat(getStyle(prevTabs[i], 'width')) + gutter;
|
||||
}
|
||||
|
||||
this.barOffset = offset;
|
||||
} else {
|
||||
this.barOffset = 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
updateStatus () {
|
||||
const tabs = this.getTabs();
|
||||
tabs.forEach(tab => tab.show = (tab.key === this.activeKey) || this.animated);
|
||||
},
|
||||
tabCls (item) {
|
||||
return [
|
||||
`${prefixCls}-tab`,
|
||||
{
|
||||
[`${prefixCls}-tab-disabled`]: item.disabled,
|
||||
[`${prefixCls}-tab-active`]: item.key === this.activeKey
|
||||
}
|
||||
];
|
||||
},
|
||||
handleChange (index) {
|
||||
const nav = this.navList[index];
|
||||
if (nav.disabled) return;
|
||||
this.activeKey = nav.key;
|
||||
this.$emit('on-click', nav.key);
|
||||
},
|
||||
handleRemove (index) {
|
||||
const tabs = this.getTabs();
|
||||
const tab = tabs[index];
|
||||
tab.$destroy(true);
|
||||
|
||||
if (tab.key === this.activeKey) {
|
||||
const newTabs = this.getTabs();
|
||||
let activeKey = -1;
|
||||
|
||||
if (newTabs.length) {
|
||||
const leftNoDisabledTabs = tabs.filter((item, itemIndex) => !item.disabled && itemIndex < index);
|
||||
const rightNoDisabledTabs = tabs.filter((item, itemIndex) => !item.disabled && itemIndex > index);
|
||||
|
||||
if (rightNoDisabledTabs.length) {
|
||||
activeKey = rightNoDisabledTabs[0].key;
|
||||
} else if (leftNoDisabledTabs.length) {
|
||||
activeKey = leftNoDisabledTabs[leftNoDisabledTabs.length - 1].key;
|
||||
} else {
|
||||
activeKey = newTabs[0].key;
|
||||
}
|
||||
}
|
||||
this.activeKey = activeKey;
|
||||
}
|
||||
this.$emit('on-tab-remove', tab.key);
|
||||
this.updateNav();
|
||||
},
|
||||
showClose (item) {
|
||||
if (this.type === 'card') {
|
||||
if (item.closable !== null) {
|
||||
return item.closable;
|
||||
} else {
|
||||
return this.closable;
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeKey () {
|
||||
this.updateBar();
|
||||
this.updateStatus();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue