zhibo/node_modules/ele-admin/es/ele-pro-layout/components/pro-tab-bar.js

import ProTabDropdown from "./pro-tab-dropdown";
import ProTabContext from "./pro-tab-context";
const proTabBar = {
  name: "ProTabBar",
  props: {
    tabs: {
      type: Array,
      required: true
    },
    active: {
      type: String,
      required: true
    },
    homePath: {
      type: String,
      required: true
    },
    homeTitle: {
      type: String,
      required: true
    },
    showRefresh: Boolean,
    clickReload: Boolean,
    bodyFullscreen: Boolean,
    tabContextMenu: Boolean
  },
  emits: [
    "tab-change",
    "tab-remove",
    "tab-remove-all",
    "tab-remove-left",
    "tab-remove-right",
    "tab-remove-other",
    "fullscreen-body",
    "dropdown-menu",
    "context-menu",
    "reload-page"
  ],
  data() {
    return {
      canScroll: true
    };
  },
  methods: {
    reloadPage() {
      this.$emit("reload-page");
    },
    onTabClick({ name }) {
      if (this.active === name) {
        if (this.clickReload) {
          this.reloadPage();
        }
        return;
      }
      const tab = (() => {
        if (this.tabs) {
          for (let i = 0; i < this.tabs.length; i++) {
            if (this.tabs[i].key === name) {
              return this.tabs[i];
            }
          }
        }
      })();
      this.$emit("tab-change", tab ? tab : { key: name });
    },
    onTabRemove(name) {
      this.$emit("tab-remove", { key: name, active: this.active });
    },
    onDropMenuClick(command) {
      const option = { key: this.active, active: this.active };
      switch (command) {
        case "left":
          this.$emit("tab-remove-left", option);
          return;
        case "right":
          this.$emit("tab-remove-right", option);
          return;
        case "other":
          this.$emit("tab-remove-other", option);
          return;
        case "all":
          this.$emit("tab-remove-all", this.active);
          return;
        case "reload":
          this.reloadPage();
          return;
        case "fullscreen":
          this.$emit("fullscreen-body", !this.bodyFullscreen);
          return;
      }
      this.$emit("dropdown-menu", { key: command, active: this.active });
    },
    onContextMenuClick(option) {
      this.$emit("context-menu", option);
    },
    onTriggerContext(e) {
      var _a, _b;
      e.preventDefault();
      e.stopPropagation();
      (_b = (_a = e.currentTarget.parentNode) == null ? void 0 : _a.querySelector(".ele-admin-tab-context-el")) == null ? void 0 : _b.click();
    },
    onMousewheel(e, isFirefox) {
      var _a, _b;
      e.stopPropagation();
      e.preventDefault();
      const el = e.currentTarget;
      if (this.canScroll) {
        this.canScroll = false;
        const wheelDelta = e.wheelDelta || e.detail;
        const delta = isFirefox ? -wheelDelta : wheelDelta;
        if (delta > 0) {
          (_a = el.querySelector(".el-tabs__nav-prev")) == null ? void 0 : _a.click();
        } else if (delta < 0) {
          (_b = el.querySelector(".el-tabs__nav-next")) == null ? void 0 : _b.click();
        }
        setTimeout(() => {
          this.canScroll = true;
        }, 300);
      }
    },
    onFirefoxMousewheel(e) {
      this.onMousewheel(e, true);
    }
  },
  render(h) {
    const hTP = (key, title, closable, item) => {
      const tSlot = this.$scopedSlots["tab-title"];
      const children = [tSlot ? tSlot({ title, item }) : title];
      if (this.tabContextMenu) {
        children.push(
          h("div", {
            class: "ele-admin-tab-context-trigger",
            on: { contextmenu: this.onTriggerContext }
          })
        );
        children.push(
          h(ProTabContext, {
            props: {
              item,
              tabKey: key,
              active: this.active
            },
            on: { "menu-click": this.onContextMenuClick },
            scopedSlots: this.$scopedSlots
          })
        );
      }
      return h("el-tab-pane", { key, props: { name: key, closable } }, [
        h("template", { slot: "label" }, children)
      ]);
    };
    return h("div", { class: "ele-admin-tabs" }, [
      h(
        "el-tabs",
        {
          ref: "tabs",
          props: { value: this.active },
          on: {
            "tab-click": this.onTabClick,
            "tab-remove": this.onTabRemove
          },
          nativeOn: {
            mousewheel: this.onMousewheel
          }
        },
        [
          hTP(this.homePath, this.homeTitle, false),
          ...this.tabs.map((t) => hTP(t.key, t.title, t.closable, t))
        ]
      ),
      h(ProTabDropdown, {
        props: {
          active: this.active,
          showRefresh: this.showRefresh,
          bodyFullscreen: this.bodyFullscreen
        },
        on: { "menu-click": this.onDropMenuClick },
        scopedSlots: this.$scopedSlots
      })
    ]);
  },
  mounted() {
    var _a, _b;
    (_b = (_a = this.$refs.tabs) == null ? void 0 : _a.$el) == null ? void 0 : _b.addEventListener(
      "DOMMouseScroll",
      this.onFirefoxMousewheel
    );
  },
  beforeDestroy() {
    var _a, _b;
    (_b = (_a = this.$refs.tabs) == null ? void 0 : _a.$el) == null ? void 0 : _b.removeEventListener(
      "DOMMouseScroll",
      this.onFirefoxMousewheel
    );
  }
};
export {
  proTabBar as default
};