Browse Source

Merge branch 'next' of https://github.com/jdf2e/nutui into next

richard1015 4 years ago
parent
commit
8e38f812e0

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

@@ -107,7 +107,7 @@ export default {
 | icon                   | 左侧 [图标名称](#/icon) 或图片链接                                                             | String  | -      |
 | round-radius           | 圆角半径                                                                                       | Number  | 6px    |
 | 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  |
 
 ### Event

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

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

+ 13 - 9
src/packages/__VUE/tab/doc.md

@@ -2,24 +2,22 @@
 
 常用于平级区域大块内容的的收纳和展现,支持内嵌标签形式和渲染循环数据形式。
 
-> 注意,由于小程序端依赖的swiper组件存在兼容性问题,因此在小程序端暂时只支持基础的tab切换功能,待swiper组件修复后,开放所有功能。
+> 注意,由于小程序端依赖的 swiper 组件存在兼容性问题,因此在小程序端暂时只支持基础的 tab 切换功能,待 swiper 组件修复后,开放所有功能。
 
 ## 安装
 
 ```js
 import { createApp } from 'vue';
 // vue
-import { Tab, TabPanel,Swiper,SwiperItem } from '@nutui/nutui';
+import { Tab, TabPanel, Swiper, SwiperItem } from '@nutui/nutui';
 // taro
-import { Tab, TabPanel,Swiper,SwiperItem } from '@nutui/nutui-taro';
+import { Tab, TabPanel, Swiper, SwiperItem } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Tab);
 app.use(TabPanel);
 app.use(Swiper);
 app.use(SwiperItem);
-
-
 ```
 
 ## 基础样式,默认 tab-title 宽度均分相等
@@ -71,7 +69,7 @@ switchTab 监听切换 tab 返回事件
         switchTab
       };
     }
-  }
+  };
 </script>
 ```
 
@@ -169,7 +167,13 @@ switchTab 监听切换 tab 返回事件
 ## 左右 tab 布局
 
 ```html
-<nut-tab direction="vertical" :animatedTime="500" :defaultIndex="2">
+<nut-tab
+  direction="vertical"
+  :animated-time="500"
+  :default-index="2"
+  scrollType="scroll"
+  icon-type="half"
+>
   <nut-tab-panel tab-title="页签一"
     ><p class="content-tab">这里是页签一内容</p></nut-tab-panel
   >
@@ -253,6 +257,6 @@ export default {
 
 ### Event
 
-| 事件名称   | 说明               | 回调参数               |
-| ---------- | ------------------ | ---------------------- |
+| 事件名称   | 说明               | 回调参数             |
+| ---------- | ------------------ | -------------------- |
 | switch-tab | 切换页签时触发事件 | 当前活动状态的索引值 |

+ 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
 <nut-tabbar @tab-switch="tabSwitch">
@@ -159,6 +171,7 @@ setup() {
 | img      | 标签页显示图片链接 | String | --     |
 | activeImg      | 激活以后的标签页显示图片链接(同一个item中icon和img只能选择一个) | String | --     |
 | href      | 标签页的跳转链接                          | String | --     |
+| to  `小程序不支持`      | 	标签页的路由对象,等于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String|Object | --     |
 | num       | 页签右上角的数字角标,超出99之后为99+     | Number | --     |
 
 

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

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