mirror of https://github.com/ElemeFE/element
65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
<script>
|
|
module.exports = {
|
|
name: 'el-tab-pane',
|
|
|
|
props: {
|
|
label: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
name: String
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
counter: 0,
|
|
transition: '',
|
|
paneStyle: {
|
|
position: 'relative'
|
|
},
|
|
index: ''
|
|
};
|
|
},
|
|
|
|
created() {
|
|
if (!this.index) {
|
|
this.index = this.$parent.$children.indexOf(this) + 1 + '';
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
show() {
|
|
return this.$parent.currentName === this.index;
|
|
}
|
|
},
|
|
|
|
destroyed() {
|
|
if (this.$el) {
|
|
this.$el.parentNode.removeChild(this.$el);
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
name: {
|
|
immediate: true,
|
|
handler(val) {
|
|
this.index = val;
|
|
}
|
|
},
|
|
'$parent.currentName'(newValue, oldValue) {
|
|
if (this.index === newValue) {
|
|
this.transition = newValue > oldValue ? 'slideInRight' : 'slideInLeft';
|
|
}
|
|
if (this.index === oldValue) {
|
|
this.transition = oldValue > newValue ? 'slideInRight' : 'slideInLeft';
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<template>
|
|
<div class="el-tab-pane" v-show="show && $slots.default">
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|