You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.0 KiB
Vue
57 lines
1.0 KiB
Vue
<template>
|
|
<div
|
|
class="el-tab-pane"
|
|
v-if="(!lazy || loaded) || active"
|
|
v-show="active"
|
|
role="tabpanel"
|
|
:aria-hidden="!active"
|
|
:id="`pane-${paneName}`"
|
|
:aria-labelledby="`tab-${paneName}`"
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'ElTabPane',
|
|
|
|
componentName: 'ElTabPane',
|
|
|
|
props: {
|
|
label: String,
|
|
labelContent: Function,
|
|
name: String,
|
|
closable: Boolean,
|
|
disabled: Boolean,
|
|
lazy: Boolean
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
index: null,
|
|
loaded: false
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
isClosable() {
|
|
return this.closable || this.$parent.closable;
|
|
},
|
|
active() {
|
|
const active = this.$parent.currentName === (this.name || this.index);
|
|
if (active) {
|
|
this.loaded = true;
|
|
}
|
|
return active;
|
|
},
|
|
paneName() {
|
|
return this.name || this.index;
|
|
}
|
|
},
|
|
|
|
updated() {
|
|
this.$parent.$emit('tab-nav-update');
|
|
}
|
|
};
|
|
</script>
|