Browse Source

fix(tabbar,cell): 支持路由跳转

Drjingfubo 4 years ago
parent
commit
4bf0c005a0

+ 1 - 1
src/packages/__VUE/cell/doc.md

@@ -107,7 +107,7 @@ export default {
 | icon                   | 左侧 [图标名称](#/icon) 或图片链接                                                             | String  | -      |
 | icon                   | 左侧 [图标名称](#/icon) 或图片链接                                                             | String  | -      |
 | round-radius           | 圆角半径                                                                                       | Number  | 6px    |
 | round-radius           | 圆角半径                                                                                       | Number  | 6px    |
 | url `小程序不支持`     | 点击后跳转的链接地址                                                                           | String  | -      |
 | url `小程序不支持`     | 点击后跳转的链接地址                                                                           | String  | -      |
-| to   `小程序不支持`    | 点击后跳转的目标路由对象,同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String  | -      |
+| to   `小程序不支持`    | 点击后跳转的目标路由对象,同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String|Object | -      |
 | replace `小程序不支持` | 是否在跳转时替换当前页面历史                                                                   | Boolean | false  |
 | replace `小程序不支持` | 是否在跳转时替换当前页面历史                                                                   | Boolean | false  |
 
 
 ### Event
 ### Event

+ 1 - 1
src/packages/__VUE/cell/index.vue

@@ -46,7 +46,7 @@ export default create({
     desc: { type: String, default: '' },
     desc: { type: String, default: '' },
     descTextAlign: { type: String, default: 'right' },
     descTextAlign: { type: String, default: 'right' },
     isLink: { type: Boolean, default: false },
     isLink: { type: Boolean, default: false },
-    to: { type: String, default: '' },
+    to: [String, Object],
     replace: { type: Boolean, default: false },
     replace: { type: Boolean, default: false },
     roundRadius: { type: [String, Number], default: '' },
     roundRadius: { type: [String, Number], default: '' },
     url: { type: String, default: '' },
     url: { type: String, default: '' },

+ 13 - 0
src/packages/__VUE/tabbar/doc.md

@@ -43,6 +43,18 @@ setup() {
 },
 },
 ```
 ```
 
 
+### 路由跳转
+
+``` html
+<nut-tabbar @tab-switch="tabSwitch">
+  <nut-tabbar-item tab-title="首页" icon="home" to="/home"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="分类" icon="category" :to="{ path: '/home', query: { plan: 'private' }}"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
+</nut-tabbar>
+```
+
 ### 自定义图片链接
 ### 自定义图片链接
 ```html
 ```html
 <nut-tabbar @tab-switch="tabSwitch">
 <nut-tabbar @tab-switch="tabSwitch">
@@ -159,6 +171,7 @@ setup() {
 | img      | 标签页显示图片链接 | String | --     |
 | img      | 标签页显示图片链接 | String | --     |
 | activeImg      | 激活以后的标签页显示图片链接(同一个item中icon和img只能选择一个) | String | --     |
 | activeImg      | 激活以后的标签页显示图片链接(同一个item中icon和img只能选择一个) | String | --     |
 | href      | 标签页的跳转链接                          | String | --     |
 | href      | 标签页的跳转链接                          | String | --     |
+| to  `小程序不支持`      | 	标签页的路由对象,等于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String|Object | --     |
 | num       | 页签右上角的数字角标,超出99之后为99+     | Number | --     |
 | num       | 页签右上角的数字角标,超出99之后为99+     | Number | --     |
 
 
 
 

+ 8 - 2
src/packages/__VUE/tabbaritem/index.vue

@@ -52,6 +52,7 @@
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
 import { createComponent } from '../../utils/create';
 import { createComponent } from '../../utils/create';
+import { useRouter } from 'vue-router';
 import {
 import {
   ComponentInternalInstance,
   ComponentInternalInstance,
   computed,
   computed,
@@ -98,7 +99,8 @@ export default create({
     fontClassName: {
     fontClassName: {
       type: String,
       type: String,
       default: 'nutui-iconfont'
       default: 'nutui-iconfont'
-    }
+    },
+    to: [Object, String]
   },
   },
   setup(props, ctx) {
   setup(props, ctx) {
     const parent: any = inject('parent');
     const parent: any = inject('parent');
@@ -109,6 +111,7 @@ export default create({
       active: parent.modelValue, // 是否选中
       active: parent.modelValue, // 是否选中
       index: 0
       index: 0
     });
     });
+    const router = useRouter();
     const relation = (child: ComponentInternalInstance): void => {
     const relation = (child: ComponentInternalInstance): void => {
       if (child.proxy) {
       if (child.proxy) {
         let index = parent.children.length;
         let index = parent.children.length;
@@ -127,13 +130,16 @@ export default create({
       }
       }
       return null;
       return null;
     });
     });
-
     watch(choosed, (value, oldValue) => {
     watch(choosed, (value, oldValue) => {
       state.active = value;
       state.active = value;
       setTimeout(() => {
       setTimeout(() => {
         if (parent.children[value].href) {
         if (parent.children[value].href) {
           window.location.href = parent.children[value].href;
           window.location.href = parent.children[value].href;
         }
         }
+        if (parent.children[value].to) {
+          let to = parent.children[value].to;
+          router.push(to);
+        }
       });
       });
     });
     });
     return {
     return {