tab-router 修改

src/components/install.js

@@ -7,8 +7,7 @@ import saveform from '@/components/save-form'
 import overflowtext from '@/components/overflow-text'
 import selectall from '@/components/select-all'
 import copytext from '@/components/copy-text'
-import tabs from '@/components/tabs'
-import tabsPanel from '@/components/tabs/panel'
+import tabRouter from '@/components/tab-router'
 
 export default {
   install(Vue) {
@@ -16,7 +15,6 @@ export default {
     Vue.component(overflowtext.name, overflowtext)
     Vue.component(selectall.name, selectall)
     Vue.component(copytext.name, copytext)
-    Vue.component(tabs.name, tabs)
-    Vue.component(tabsPanel.name, tabsPanel)
+    Vue.component(tabRouter.name, tabRouter)
   }
 }

src/components/tab-router/README.md

@@ -0,0 +1,12 @@
+##### tabs组件封装
+
+###### 组件背景
+
+为处理tab切换后，刷新页面tab跳转至第一个tab的问题
+
+###### 实现方式
+
+劫持panel点击切换时未修改当前query，刷新后根据当前query的key回写数据
+
+###### 参数
+searchKey：query字段名称，默认为tabrouter

src/components/tabs/index.vue → src/components/tab-router/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-tabs :value="active" @tab-click="tab">
+  <el-tabs :value="active" v-bind="{...$attrs}" v-on="{...$listeners, 'tab-click': tab}">
     <slot/>
   </el-tabs>
 </template>
@@ -11,6 +11,14 @@ export default {
     searchKey: {
       type: String,
       default: 'tabrouter'
+    },
+    lazy: {
+      type: Boolean,
+      defaule: true
+    },
+    value: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -34,12 +42,12 @@ export default {
       const search = qs.parse(location.hash.split('?')[1])
       if (this.panels.length) {
         this.$nextTick(() => {
-          this.active = search[this.searchKey] || this.panels[0].child?.name
+          this.active= search[this.searchKey] || this.panels[0].child?.name
         })
       }
       this.panelsByName = data
     },
-    tab(item) {
+    tab(item, evt) {
       const { query } = this.$route
       const search = qs.stringify({
         ...query,
@@ -47,6 +55,10 @@ export default {
       })
       this.active = item.name
       history.replaceState(location.pathname, null, `#${this.$route.path}?${search}`)
+      const parentClick = this.$listeners['tab-click']
+      if (parentClick) {
+        parentClick(item, evt)
+      }
     }
   },
   beforeUpdate() {

src/components/tabs/panel.vue

@@ -1,16 +0,0 @@
-<template>
-  <el-tab-pane
-    v-bind="{...$attrs, ...$props}"
-    v-on="$listeners"
-  >
-    <slot/>
-  </el-tab-pane>
-</template>
-<script>
-export default {
-  name: 'dy-tabs-panel'
-}
-</script>
-<style lang="less" scoped>
-
-</style>