tab-pane2.js 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var core = require('@vueuse/core');
  5. var constants = require('./constants.js');
  6. var tabPane = require('./tab-pane.js');
  7. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  8. var error = require('../../../utils/error.js');
  9. var index = require('../../../hooks/use-namespace/index.js');
  10. const COMPONENT_NAME = "ElTabPane";
  11. const __default__ = vue.defineComponent({
  12. name: COMPONENT_NAME
  13. });
  14. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  15. ...__default__,
  16. props: tabPane.tabPaneProps,
  17. setup(__props) {
  18. const props = __props;
  19. const instance = vue.getCurrentInstance();
  20. const slots = vue.useSlots();
  21. const tabsRoot = vue.inject(constants.tabsRootContextKey);
  22. if (!tabsRoot)
  23. error.throwError(COMPONENT_NAME, "usage: <el-tabs><el-tab-pane /></el-tabs/>");
  24. const ns = index.useNamespace("tab-pane");
  25. const index$1 = vue.ref();
  26. const isClosable = vue.computed(() => props.closable || tabsRoot.props.closable);
  27. const active = core.eagerComputed(() => {
  28. var _a;
  29. return tabsRoot.currentName.value === ((_a = props.name) != null ? _a : index$1.value);
  30. });
  31. const loaded = vue.ref(active.value);
  32. const paneName = vue.computed(() => {
  33. var _a;
  34. return (_a = props.name) != null ? _a : index$1.value;
  35. });
  36. const shouldBeRender = core.eagerComputed(() => !props.lazy || loaded.value || active.value);
  37. vue.watch(active, (val) => {
  38. if (val)
  39. loaded.value = true;
  40. });
  41. const pane = vue.reactive({
  42. uid: instance.uid,
  43. slots,
  44. props,
  45. paneName,
  46. active,
  47. index: index$1,
  48. isClosable
  49. });
  50. tabsRoot.registerPane(pane);
  51. vue.onMounted(() => {
  52. tabsRoot.sortPane(pane);
  53. });
  54. vue.onUnmounted(() => {
  55. tabsRoot.unregisterPane(pane.uid);
  56. });
  57. return (_ctx, _cache) => {
  58. return vue.unref(shouldBeRender) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
  59. key: 0,
  60. id: `pane-${vue.unref(paneName)}`,
  61. class: vue.normalizeClass(vue.unref(ns).b()),
  62. role: "tabpanel",
  63. "aria-hidden": !vue.unref(active),
  64. "aria-labelledby": `tab-${vue.unref(paneName)}`
  65. }, [
  66. vue.renderSlot(_ctx.$slots, "default")
  67. ], 10, ["id", "aria-hidden", "aria-labelledby"])), [
  68. [vue.vShow, vue.unref(active)]
  69. ]) : vue.createCommentVNode("v-if", true);
  70. };
  71. }
  72. });
  73. var TabPane = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "tab-pane.vue"]]);
  74. exports["default"] = TabPane;
  75. //# sourceMappingURL=tab-pane2.js.map