Merge branch 'add_tabs' into Nov16thResetMusic

src/components/install.js

@@ -12,6 +12,7 @@ import copytext from '@/components/copy-text'
 import statistic from '@/components/statistic'
 import descriptions from '@/components/Descriptions/Descriptions.vue'
 import remoteSearch from "@/components/remote-search"
+import tabRouter from '@/components/tab-router'
 
 export default {
   install(Vue) {
@@ -24,5 +25,6 @@ export default {
     Vue.component(statistic.name, statistic)
     Vue.component(descriptions.name, descriptions)
     Vue.component(remoteSearch.name, remoteSearch)
+    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/tab-router/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <el-tabs :value="active" v-bind="{...$attrs}" v-on="{...$listeners, 'tab-click': tab}">
+    <slot/>
+  </el-tabs>
+</template>
+<script>
+import qs from 'qs'
+export default {
+  name: 'tab-router',
+  props: {
+    searchKey: {
+      type: String,
+      default: 'tabrouter'
+    },
+    lazy: {
+      type: Boolean,
+      defaule: true
+    },
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      active: '',
+      panels: [],
+      panelsByName: {}
+    }
+  },
+  methods: {
+    getAllPanel() {
+      const data = {}
+      const routes = []
+      this.panels = this.$slots.default.filter(item => {
+        const isPanel = item.tag && item.tag.indexOf('ElTabPane') > -1
+        if (isPanel && item.child) {
+          data[item.child.name] = item.child
+        }
+        return isPanel
+      })
+      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.panelsByName = data
+    },
+    tab(item, evt) {
+      const { query } = this.$route
+      const search = qs.stringify({
+        ...query,
+        [this.searchKey]: item.name
+      })
+      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() {
+    this.getAllPanel()
+  },
+  mounted() {
+    this.getAllPanel()
+  }
+}
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/save-form-test/index.vue

@@ -13,7 +13,7 @@
         <el-form-item
           prop="input2"
         >
-          <el-input v-model="form.input2" placeholder="请输入内容2"/>
+          <el-input type="number" v-model="form.input2" placeholder="请输入内容2"/>
         </el-form-item>
         <el-form-item prop="region">
           <el-select v-model="form.region" placeholder="请选择活动区域">
@@ -65,6 +65,10 @@
         </div>
       </save-form>
     </div>
+    <tab-router>
+      <el-tab-pane label="1" name="1">12131231</el-tab-pane>
+      <el-tab-pane label="2" name="2">adwqj</el-tab-pane>
+    </tab-router>
     <el-table
       :data="list"
       class="table"