@tongfun/tf-widget 0.1.9 → 0.1.13

package/package/tf-layout/README.md

@@ -22,7 +22,8 @@
 ```
 
 2. 三级缓存数组，通过事件@setThirdCache传递
-3. 例子：
+
+例子：
 
 ```javascript
 <template>
@@ -67,3 +68,48 @@ export default {
   	},
 ```
 
+5. 为了防止路由标签混乱,需要在子应用的跟路由将当前子应用的路由base属性,添加到meta属性中
+
+   base配置统一采用:  
+
+   ```
+   const base = process.env['NODE_ENV'] === 'development' ? process.env['VUE_APP_BASIC']:`/app${process.env['VUE_APP_BASIC']}/`
+   ```
+
+   
+
+​		**配置文件：**
+
+​						**例： VUE_APP_BASIC = '/OperateAnalysis'**
+
+​							     **VUE_APP_MODULE_NAME = '经营分析'**
+
+```javascript
+
+// 示例
+ // 路由生成 base: 
+ router = new VueRouter({
+    base: process.env['NODE_ENV'] === 'development' ? process.env['VUE_APP_BASIC'] : `/app${process.env['VUE_APP_BASIC']}/`,
+    mode: 'history',
+    routes: initMenu(prop.menuInfo)
+  })
+// 跟路由配置base 
+const base = process.env['NODE_ENV'] === 'development' ? process.env['VUE_APP_BASIC'] : `/app${process.env['VUE_APP_BASIC']}/`
+const routes = [
+  {
+    path: '/',
+    component: Layout,
+    meta: {
+      title: process.env['VUE_APP_MODULE_NAME'],
+      base
+    },
+    children: [
+      ...childrenRoutes
+    ]
+  }
+]
+
+
+
+```
+

package/package/tf-layout/src/components/tf-labelbar.vue

@@ -2,7 +2,7 @@
   <div class="tf-labelbar">
     <div class="close-menu">
       <div
-        :class="coloseMenu ? 'open-menu-icon': 'close-menu-icon'"
+        :class="closeMenu ? 'open-menu-icon': 'close-menu-icon'"
         src=""
         alt=""
         title="隐藏列表"
@@ -78,9 +78,15 @@ export default {
     TfRotateBox,
     TfRightMenu
   },
+  props: {
+    routeBase: {
+      default: null,
+      type: String
+    }
+  },
   data () {
     return {
-      coloseMenu: false,
+      closeMenu: false,
       activePath: '/',
       tagList: [],
       rightMenuLeft: 0,
@@ -91,7 +97,8 @@ export default {
   watch: {
     $route: {
       handler: function (newValue) {
-        if (newValue) {
+        console.log(this.routeBase)
+        if (newValue && newValue.matched[0]?.meta.base === this.routeBase) {
           const { meta, path, name, params, query } = newValue
           if (!path) return
           const obj = {
@@ -129,8 +136,8 @@ export default {
   },
   methods: {
     changeMenuState () {
-      this.coloseMenu = !this.coloseMenu
-      this.$emit('changeMenuState', this.coloseMenu)
+      this.closeMenu = !this.closeMenu
+      this.$emit('changeMenuState', this.closeMenu)
     },
     /**
      * @description tag右键点击事件

package/package/tf-layout/src/tf-layout.vue

@@ -6,6 +6,7 @@
     />
     <div class="tf-layout-subject">
       <TfLaberBar
+        :route-base="routeBase"
         @setCache="setCache"
         @changeMenuState="changeMenuState"
         @deleteCache="deleteCache"
@@ -34,6 +35,10 @@ export default {
       default: function () {
         return []
       }
+    },
+    routeBase: {
+      default: null,
+      type: String
     }
   },
   data () {
@@ -44,8 +49,16 @@ export default {
       thirdCacheArr: []
     }
   },
+  watch: {
+    routeBase: {
+      handler: function (newValue) {
+        console.log(newValue)
+      },
+      immediate: true
+    }
+  },
   methods: {
-    changeMenuState(state) {
+    changeMenuState (state) {
       this.menuState = state
     },
     setCache (value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tongfun/tf-widget",
-  "version": "0.1.9",
+  "version": "0.1.13",
   "description": "tf-widget",
   "main": "lib/tf-widget.umd.js",
   "private": false,