1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- <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>
|