vueでのナビゲーションバーコンポーネント

1.TabController.vue

export default {
  name: "NavigationController",
  data() {
    return {
      active: null,
      tabs: []
    };
  },
  props: ["components", "hideSingleTab"],
  watch: {
    tabs: function(val) {
      if (this.hideSingleTab == true) {
        this.showTabs(val.length > 1);
        if (val.length == 1) {
          this.active = this.tabs[0].id;
        }
      }
    }
  },
  provide() {
    var tab = this;
    return {
      $tab: {
        remove(id) {
          tab.remove(id);
        },
        add(tab) {
          tab.add(tab);
        }
      }
    };
  },
  methods: {
    tabIndex: function(id) {
      var tabs = this.tabs;
      for (var i = 0; i < tabs.length; ++i) {
        if (tabs[i].id == id) {
          return i;
        }
      }
    },
    onClick(tab) {
      var index = tab.index;
      var tab = this.tabs[index];
      this.$emit("select", tab);
      this.$refs.comp[index].$emit("select", tab);
    },
    onRemove(tab) {
      var index = this.tabIndex(tab);
      this.$emit("remove", this, this.tabs[index]);
    },
    remove(id) {
      var index = this.tabIndex(id);
      if (index >= 0) {
        var removed = this.tabs.splice(index, 1);
        if (this.tabs.length > 0) {
          if (removed[0].id == this.active) {
            this.active = this.tabs[index - 1].id;
          }
          if (document.activeElement) {
            document.activeElement.blur();
          }
        }
      }
    },
    add(tab) {
      this.tabs.push(tab);
      this.active = tab.id;
    },
    showTabs(f) {
      var elem = $(this.$el).find(".el-tabs__header");
      if (f) {
        elem.show();
      } else {
        elem.hide();
      }
    },
    tabComponent(id) {
      var index = this.tabIndex(id);
      if (index >= 0) {
        return this.$refs.comp[index];
      }
    }
  },
  created() {
    var tabs = this.components;
    if (tabs && tabs.length > 0) {
      this.tabs = tabs;
      this.active = tabs[0].id;
    }
  }
};

2.TabControllerDemo.vue

import yhbutton from "../comcompont/Button";
import tabcontroller from "../comcompont/TabController";
export default {
  name: "TabControllerDemo",
  data() {
    return {
      tabs: [
        {
          id: "t1",
          title: "Tab 1",
          component: {
            template: "<h3>Tab Demo 1 {{tabId}}</h3>",
            props: ["tabId"]
          }
        },
        {
          id: "t2",
          title: "Tab 2",
          component: {
            template: "<h3>Tab Demo 2</h3>"
          },
          closable: true
        }
      ]
    };
  },
  methods: {
    addTab() {
      var n = this.tabs.length + 1;
      this.$refs.tc.add({
        id: "Tab " + n,
        title: "Tab " + n,
        component: {
          template:
            "<div><h3>Tab Demo " +
            n +
            " </h3>" +
            "<button @click='close'>  </button></div>",
          inject: ["$tab"],
          props: ["tabId"],
          methods: {
            close: function() {
              this.$tab.remove(this.tabId);
            }
          }
        },
        closable: true
      });
    },
    onSelected(tab) {
      console.log("Tab " + tab.id + " selected");
    },
    onRemove(comp, tab) {
      comp.remove(tab.id);
    }
  },
  components: {
    "yh-button": yhbutton,
    "yh-tab-controller": tabcontroller
  }
};