feat: multi-tab global function

src/components/MultiTab/MultiTab.vue

@@ -1,4 +1,6 @@
 <script>
+import events from './events'
+
 export default {
   name: 'MultiTab',
   data () {
@@ -10,6 +12,20 @@ export default {
     }
   },
   created () {
+    // bind event
+    events.$on('open', val => {
+      if (!val) {
+        throw new Error(`multi-tab: open tab ${val} err`)
+      }
+      this.activeKey = val
+    }).$on('close', val => {
+      if (!val) {
+        this.remove(this.activeKey)
+        return
+      }
+      this.remove(val)
+    })
+
     this.pages.push(this.$route)
     this.fullPathList.push(this.$route.fullPath)
     this.selectedLastPath()

src/components/MultiTab/events.js

@@ -0,0 +1,2 @@
+import Vue from 'vue'
+export default new Vue()

src/components/MultiTab/index.js

@@ -1,4 +1,31 @@
+import events from './events'
 import MultiTab from './MultiTab'
 import './index.less'
 
+const api = {
+  /**
+   * open new tab on route fullPath
+   * @param config
+   */
+  open: function (config) {
+    events.$emit('open', config)
+  },
+  /**
+   * close route fullPath tab
+   * @param config
+   */
+  close: function (config) {
+    events.$emit('close', config)
+  }
+}
+
+MultiTab.install = function (Vue) {
+  if (Vue.prototype.$multiTab) {
+    return
+  }
+  api.instance = events
+  Vue.prototype.$multiTab = api
+  Vue.component('multi-tab', MultiTab)
+}
+
 export default MultiTab

src/core/use.js

@@ -7,6 +7,7 @@ import Antd from 'ant-design-vue'
 import Viser from 'viser-vue'
 import VueCropper from 'vue-cropper'
 import 'ant-design-vue/dist/antd.less'
+import MultiTab from '@/components/MultiTab'
 
 // ext library
 import VueClipboard from 'vue-clipboard2'
@@ -18,7 +19,7 @@ VueClipboard.config.autoSetContainer = true
 
 Vue.use(Antd)
 Vue.use(Viser)
-
+Vue.use(MultiTab)
 Vue.use(VueStorage, config.storageOptions)
 Vue.use(VueClipboard)
 Vue.use(PermissionHelper)

src/layouts/BasicLayout.vue

@@ -66,7 +66,6 @@ import { mixin, mixinDevice } from '@/utils/mixin'
 import config from '@/config/defaultSettings'
 
 import RouteView from './RouteView'
-import MultiTab from '@/components/MultiTab'
 import SideMenu from '@/components/Menu/SideMenu'
 import GlobalHeader from '@/components/GlobalHeader'
 import GlobalFooter from '@/components/GlobalFooter'
@@ -77,7 +76,6 @@ export default {
   mixins: [mixin, mixinDevice],
   components: {
     RouteView,
-    MultiTab,
     SideMenu,
     GlobalHeader,
     GlobalFooter,