Browse Source

fix: 新增tabbar跳转链接功能

zhenyulei 5 years ago
parent
commit
e180cf6e66
3 changed files with 15 additions and 5 deletions
  1. 3 3
      src/packages/tabbar/demo.vue
  2. 1 0
      src/packages/tabbar/doc.md
  3. 11 2
      src/packages/tabbar/tabbar.vue

+ 3 - 3
src/packages/tabbar/demo.vue

@@ -57,7 +57,7 @@ export default {
           curr: true,
           icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/115926/10/6303/6603/5eb93bdeE8951c288/d277b2a668645e73.png',
           activeIcon: 'https://img12.360buyimg.com/imagetools/jfs/t1/126024/30/1055/6952/5eb93be3E45d921c4/3060f25d49fc4ae7.png',
-          href: '###'
+          href: 'https://m.jd.com'
         },
         {
           tabTitle: '分类',
@@ -79,14 +79,14 @@ export default {
           num: 2,
           icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/126465/3/1055/5848/5eb93f31E0ce4f65b/087c08eaeef97b64.png',
           activeIcon: 'https://img10.360buyimg.com/imagetools/jfs/t1/111251/23/6376/6446/5eb93f2dE659da502/41fea546d36b8aaa.png',
-          href: '###'
+          href: 'https://m.jd.com'
         },
         {
           tabTitle: '我的',
           curr: false,
           icon: 'http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg',
           activeIcon: 'http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg',
-          href: '###'
+          href: 'https://m.jd.com'
         }
       ]
     };

+ 1 - 0
src/packages/tabbar/doc.md

@@ -160,6 +160,7 @@ export default {
 | type | 页签栏的样式 based/card:based是默认样式如吸底样式,card类型每个卡片间有边界线 | String | based
 | tabbar-list | 渲染数据 ,兼容 tabbar-list 和 tabbarList| Array | []
 | bottom | 是否固定在页面底部 |Booble|false|
+| replace | replace为true的时候,跳转url以替换的形式进行 |Boolean|false|
 
 ### tabbar-list
 

+ 11 - 2
src/packages/tabbar/tabbar.vue

@@ -6,7 +6,6 @@
       :class="[{ 'curr': index == currIndex }, type]"
       :key="value.tabTitle"
       v-on:click="switchTabs(value, index)"
-      :href="value.href"
     >
       <span class="icon-box">
         <b class="tips num" v-if="value.num && value.num <= 99">{{ value.num }}</b>
@@ -36,6 +35,10 @@ export default {
     type: {
       type: String,
       default: 'based'
+    },
+    replace:{
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -66,8 +69,14 @@ export default {
     },
     switchTabs: function(value, index) {
       this.currIndex = index;
+      if(this.replace){ //替换url
+        window.location.replace(value.href);
+      }else{
+        if(value.href){
+          window.location.href = value.href;
+        }
+      }
       this.$emit('tab-switch', value, index);
-      this.$emit('tabSwitch', value, index); //兼容以前驼峰法
     }
   }
 };