cnetong-core-frontend/base/plugin/TabView.js

## 1. 开始使用 ```js // 在npm项目中的main.js文件中加入以下代码 import Base from "cnetong-core-frontend";

/**
 * 负责渲染页面的组件
 */
const TabViewComponent = {
  name: "tab-view",
  functional: true,
  props: {
    path: {
      type: String
    },
    propsData: {}
  },
  render(_, {props, children, parent, data}) {
    const h = parent.$createElement;
    data.props = props.propsData;
    let comp = parent.$tabView.views[props.path];

    if (comp) {
      return h(comp.default, data, children);
    } else {
      return h("div", {}, ["没有找到注册的组件[" + props.path + "]"]);
    }
  }
};


export default class TabView {
  forceFirst = true;
  active = "首页";
  viewList = [{name: "首页", path: "/"}];
  views = {};

  constructor(config) {
    Object.assign(this, config);
  }

  setHome(name, path, propsData) {
    this.viewList.splice(0);
    this.addView(name, path, propsData);
    this.active=name;
  }

  addView(name, path, propsData) {
    propsData = propsData || {};
    let idx = this.viewList.findIndex(item => item.name === name);
    if (path.indexOf("?") !== -1) {
      let theRequest = {};
      let str = path.substr(path.indexOf("?") + 1);
      let strArr = str.split("&");
      for (let i = 0; i < strArr.length; i++) {
        theRequest[strArr[i].split("=")[0]] = unescape(strArr[i].split("=")[1]);
      }
      path = path.substr(0, path.indexOf("?"));
      Object.assign(propsData, theRequest)
    }
    if (idx === -1) this.viewList.push({name, path, propsData, key: this.viewList.length+1});
    this.active = name;
  }

  removeView(name) {
    let idx = this.viewList.findIndex(item => item.name === name);
    if (idx > -1) {
      this.active = this.viewList[idx - 1].name;
      this.viewList.splice(idx, 1);
    }
  }

  changeName(oldName, newName) {
    let idx = this.viewList.findIndex(item => item.name === oldName);
    if (idx > -1) {
      this.viewList[idx].name = this.active = newName;
    }
  }

  removeOther() {
    this.removeBefore();
    this.removeAfter();
  }

  removeAfter() {
    let idx = this.viewList.findIndex(item => item.name === this.active);
    this.viewList.splice(idx + 1);
  }

  removeBefore() {
    let idx = this.viewList.findIndex(item => item.name === this.active);
    if (this.forceFirst) {
      this.viewList.splice(1, idx - 1);
    } else {
      this.viewList.splice(0, idx - 1);
    }
  }

  removeAll() {
    if (this.forceFirst) {
      this.viewList.splice(1);
      this.active = this.viewList[0].name;
    } else {
      this.viewList.splice(0);
    }
  }
}

TabView.install = function install(Vue, option) {
  const isDef = v => v !== undefined;

  Vue.mixin({
    beforeCreate() {
      if (isDef(this.$root.$options.tabView)) {
        this._tabView = this.$root.$options.tabView;
        Vue.util.defineReactive(this, "_tabView", this._tabView);
      }
    }
  });
  Object.defineProperty(Vue.prototype, "$tabView", {
    get() {
      return this._tabView;
    }
  });
  Vue.component("TabView", TabViewComponent);
};