element-plus/es/el-tab-pane/index.js

A Component Library for Vue3.0

import { defineComponent, ref, inject, computed, getCurrentInstance, withDirectives, openBlock, createBlock, renderSlot, vShow, createCommentVNode } from 'vue';

var script = defineComponent({
    name: 'ElTabPane',
    props: {
        label: {
            type: String,
            default: '',
        },
        name: {
            type: String,
            default: '',
        },
        closable: Boolean,
        disabled: Boolean,
        lazy: Boolean,
    },
    setup(props) {
        const index = ref(null);
        const loaded = ref(false);
        const rootTabs = inject('rootTabs');
        const updatePaneState = inject('updatePaneState');
        if (!rootTabs || !updatePaneState) {
            throw new Error(`ElTabPane must use with ElTabs`);
        }
        const isClosable = computed(() => {
            return props.closable || rootTabs.props.closable;
        });
        const active = computed(() => {
            const active = rootTabs.currentName.value === (props.name || index.value);
            if (active) {
                loaded.value = true;
            }
            return active;
        });
        const paneName = computed(() => {
            return props.name || index.value;
        });
        const shouldBeRender = computed(() => {
            return (!props.lazy || loaded.value) || active.value;
        });
        const instance = getCurrentInstance();
        updatePaneState({
            uid: instance.uid,
            instance,
            props,
            paneName,
            active,
            index,
            isClosable,
        });
        return {
            index,
            loaded,
            isClosable,
            active,
            paneName,
            shouldBeRender,
        };
    },
});

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_ctx.shouldBeRender)
    ? withDirectives((openBlock(), createBlock("div", {
        key: 0,
        id: `pane-${_ctx.paneName}`,
        class: "el-tab-pane",
        role: "tabpanel",
        "aria-hidden": !_ctx.active,
        "aria-labelledby": `tab-${_ctx.paneName}`
      }, [
        renderSlot(_ctx.$slots, "default")
      ], 8 /* PROPS */, ["id", "aria-hidden", "aria-labelledby"])), [
        [vShow, _ctx.active]
      ])
    : createCommentVNode("v-if", true)
}

script.render = render;
script.__file = "packages/tabs/src/tab-pane.vue";

script.install = (app) => {
    app.component(script.name, script);
};
const _TabPane = script;

export default _TabPane;