Merge pull request #395 from Drjingfubo/jingfubo

merge

src/packages/drag/index.vue

@@ -176,7 +176,6 @@ export default create({
         target.style.top = state.yPum + 'px';
       }
     }
-
     function touchStart(e: TouchEvent) {
       const target = e.currentTarget as HTMLElement;
       const touches = e.touches[0];

src/packages/tabbar-item/index.scss

@@ -0,0 +1,60 @@
+.tabbar-item {
+  flex: 1;
+  text-align: center;
+  text-decoration: none;
+  color: $text-color;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.icon-box {
+  padding: 0px;
+  display: inline-block;
+  position: relative;
+
+  .tips {
+    position: absolute;
+    background: rgba(250, 44, 25, 1);
+    border: 1px solid rgba(255, 255, 255, 1);
+    border-radius: 7px;
+    text-align: center;
+
+    top: -2px;
+    right: -7px;
+    box-shadow: 0 0 0 1px #fff;
+    font-size: $font-size-1;
+    color: #fff;
+  }
+
+  .num {
+    line-height: 11px;
+    font-family: PingFangSC-Regular;
+    font-size: 11px;
+    color: rgba(255, 255, 255, 1);
+    padding: 1px 2px 2px 3px;
+  }
+  .nums {
+    line-height: 10px;
+    font-family: PingFangSC-Regular;
+    font-size: 10px;
+    color: rgba(255, 255, 255, 1);
+    padding: 2px 1px 2px 2px;
+  }
+}
+
+.icon-box .icon {
+  display: block;
+  background-size: 100% 100%;
+  background-position: center center;
+}
+
+.icon-box .tabbar-nav-word {
+  font-size: 10px;
+  display: block;
+}
+
+.icon-box .big-word {
+  font-size: 16px;
+  line-height: 1;
+}

src/packages/tabbar-item/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div
+    class="tabbar-item"
+    :style="{
+      color:
+        state.active == state.index ? state.activeColor : state.unactiveColor
+    }"
+    @click="change(state.index)"
+  >
+    <view class="icon-box">
+      <view class="tips num" v-if="num && num <= 99">
+        {{ num }}
+      </view>
+      <view class="tips nums" v-else-if="num && num > 100">{{ '99+' }}</view>
+      <view v-if="icon">
+        <nut-icon class="icon" :size="state.size" :name="icon"></nut-icon>
+      </view>
+      <view :class="['tabbar-nav-word', { 'big-word': !icon }]">{{
+        tabTitle
+      }}</view>
+    </view>
+  </div>
+</template>
+<script lang="ts">
+import { createComponent } from '@/utils/create';
+import {
+  ComponentInternalInstance,
+  computed,
+  getCurrentInstance,
+  inject,
+  reactive,
+  watch
+} from 'vue';
+const { create } = createComponent('tabbar-item');
+export default create({
+  props: {
+    tabTitle: {
+      // 标签页的标题
+      type: String,
+      default: ''
+    },
+    icon: {
+      // 标签页显示的icon
+      type: String,
+      default: ''
+    },
+    href: {
+      // 标签页的跳转链接
+      type: String,
+      default: ''
+    },
+    num: {
+      // 页签右上角的数字角标
+      type: String,
+      default: ''
+    }
+  },
+
+  components: {},
+  setup(props, ctx) {
+    const parent: any = inject('parent');
+    const state = reactive({
+      size: parent.size,
+      unactiveColor: parent.unactiveColor, // 未选中的颜色
+      activeColor: parent.activeColor, // 选中的颜色
+      active: parent.modelValue, // 是否选中
+      index: 0
+    });
+    const relation = (child: ComponentInternalInstance): void => {
+      if (child.proxy) {
+        let index = parent.children.length;
+        state.index = index;
+        let obj = Object.assign({}, child.proxy, { index });
+        parent.children.push(obj);
+      }
+    };
+    relation(getCurrentInstance() as ComponentInternalInstance);
+    function change(index: Number) {
+      parent.changeIndex(index);
+    }
+    const choosed = computed(() => {
+      if (parent) {
+        return parent.modelValue;
+      }
+      return null;
+    });
+
+    watch(choosed, (value, oldValue) => {
+      state.active = value;
+      if (parent.children[value].href) {
+        window.location.href = parent.children[value].href;
+      }
+    });
+    return {
+      state,
+      change
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>

src/packages/tabbar/demo.vue

@@ -1,151 +1,82 @@
 <template>
   <div class="demo full">
     <h2>基础用法</h2>
-    <nut-tabbar :tabbar-List="tabList" @tab-switch="tabSwitch"></nut-tabbar>
+    <nut-tabbar @tab-switch="tabSwitch">
+      <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="分类" icon="category"></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>
+
+    <h2>自定义选中</h2>
+    <nut-tabbar v-model:show="active">
+      <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="分类" icon="category"></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>
 
     <h2>徽标提示</h2>
-    <nut-tabbar :tabbar-List="tabList1" @tab-switch="tabSwitch"></nut-tabbar>
+    <nut-tabbar>
+      <nut-tabbar-item tab-title="首页" icon="home" num="11"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
+      <nut-tabbar-item
+        tab-title="购物车"
+        icon="cart"
+        num="110"
+      ></nut-tabbar-item>
+      <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
+    </nut-tabbar>
 
     <h2>自定义颜色</h2>
-    <nut-tabbar
-      unactiveColor="#7d7e80"
-      activeColor="#1989fa"
-      :tabbar-List="tabList"
-      @tab-switch="tabSwitch"
-    ></nut-tabbar>
+    <nut-tabbar unactiveColor="#7d7e80" activeColor="#1989fa">
+      <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="分类" icon="category"></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>
     <h2>三个icon的tabbar</h2>
-    <nut-tabbar
-      unactiveColor="#7d7e80"
-      activeColor="#1989fa"
-      :tabbar-List="tabList2"
-      @tab-switch="tabSwitch"
-    ></nut-tabbar>
+    <nut-tabbar unactiveColor="#7d7e80" activeColor="#1989fa">
+      <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
+    </nut-tabbar>
     <h2>固定底部，可自由跳转</h2>
-    <nut-tabbar
-      :tabbar-List="tabList3"
-      @tab-switch="tabSwitch"
-      :bottom="true"
-    ></nut-tabbar>
+    <nut-tabbar :bottom="true">
+      <nut-tabbar-item tab-title="首页" href="" icon="home"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
+      <nut-tabbar-item
+        tab-title="购物车"
+        href="https://m.jd.com"
+        icon="cart"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        tab-title="我的"
+        href="######"
+        icon="my"
+      ></nut-tabbar-item>
+    </nut-tabbar>
   </div>
 </template>
 
 <script lang="ts">
-import { ref, reactive, toRefs } from 'vue';
+import { ref } from 'vue';
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('tabbar');
 export default createDemo({
   props: {},
   setup() {
-    const tabList = [
-      {
-        tabTitle: '首页',
-        curr: false,
-        icon: 'home'
-      },
-      {
-        tabTitle: '分类',
-        curr: false,
-        icon: 'category'
-      },
-      {
-        tabTitle: '发现',
-        curr: false,
-        icon: 'find'
-      },
-      {
-        tabTitle: '购物车',
-        curr: false,
-        icon: 'cart'
-      },
-      {
-        tabTitle: '我的',
-        curr: false,
-        icon: 'my'
-      }
-    ];
-    const tabList1 = [
-      {
-        tabTitle: '首页',
-        curr: false,
-        icon: 'home'
-      },
-      {
-        tabTitle: '分类',
-        curr: false,
-        icon: 'category'
-      },
-      {
-        tabTitle: '发现',
-        curr: false,
-        icon: 'find'
-      },
-      {
-        tabTitle: '购物车',
-        curr: true,
-        icon: 'cart',
-        num: '12'
-      },
-      {
-        tabTitle: '我的',
-        curr: false,
-        icon: 'my'
-      }
-    ];
-    const tabList2 = [
-      {
-        tabTitle: '首页',
-        curr: false,
-        icon: 'home'
-      },
-      {
-        tabTitle: '分类',
-        curr: false,
-        icon: 'category'
-      },
-      {
-        tabTitle: '我的',
-        curr: false,
-        icon: 'my'
-      }
-    ];
-    const tabList3 = [
-      {
-        tabTitle: '首页',
-        curr: false,
-        icon: 'home'
-      },
-      {
-        tabTitle: '分类',
-        curr: false,
-        icon: 'category'
-      },
-      {
-        tabTitle: '发现',
-        curr: false,
-        icon: 'find'
-      },
-      {
-        tabTitle: '购物车',
-        curr: false,
-        icon: 'cart',
-        num: '122'
-      },
-      {
-        tabTitle: '我的',
-        curr: false,
-        icon: 'my'
-      }
-    ];
+    const active = ref(2);
     function tabSwitch(item: object, index: number) {
       console.log(item, index);
     }
     return {
-      ...reactive({
-        tabList,
-        tabList1,
-        tabList2,
-        tabList3
-      }),
+      active,
       tabSwitch
     };
   }

src/packages/tabbar/doc.md

@@ -19,239 +19,86 @@ app.use(Tabbar);
 ### 基础用法
 
 ``` html
-<nut-tabbar :tabbar-List="tabList" @tab-switch="tabSwitch"></nut-tabbar>
+<nut-tabbar @tab-switch="tabSwitch">
+  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="分类" icon="category"></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>
 ```
 
 ``` javascript
-// ...
   setup() {
-    const tabList = [
-      {
-        tabTitle: '首页',
-        curr: false,
-        icon: 'home',
-      },
-      {
-        tabTitle: '分类',
-        curr: false,
-        icon: 'category',
-      },
-      {
-        tabTitle: '发现',
-        curr: false,
-        icon: 'find',
-      },
-      {
-        tabTitle: '购物车',
-        curr: false,
-        icon: 'cart',
-      },
-      {
-        tabTitle: '我的',
-        curr: false,
-        icon: 'my',
-      },
-    ];
     function tabSwitch(item: object, index: number) {
       console.log(item, index);
     }
     return {
-      ...reactive({
-        tabList,
-      }),
       tabSwitch,
     };
   },
-// ...
 ```
 
-### 徽标提示
+### 自定义选中
 
 ``` html
-<nut-tabbar :tabbar-List="tabList" @tab-switch="tabSwitch"></nut-tabbar>
+<nut-tabbar v-model:show= active >
+  <nut-tabbar-item tab-title="首页" icon="home" num="11"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="购物车" icon="cart" num="110"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
+</nut-tabbar>
 ```
-
 ``` javascript
-// ...
   setup() {
-    const tabList = [
-      {
-        tabTitle: '首页',
-        curr: false,
-        icon: 'home',
-      },
-      {
-        tabTitle: '分类',
-        curr: false,
-        icon: 'category',
-      },
-      {
-        tabTitle: '发现',
-        curr: false,
-        icon: 'find',
-      },
-      {
-        tabTitle: '购物车',
-        curr: false,
-        icon: 'cart',
-        num: '12'
-      },
-      {
-        tabTitle: '我的',
-        curr: false,
-        icon: 'my',
-      },
-    ];
-    function tabSwitch(item: object, index: number) {
-      console.log(item, index);
-    }
+    const active = ref(2)
     return {
-      ...reactive({
-        tabList,
-      }),
-      tabSwitch,
+      active
     };
   },
-// ...
 ```
-
-### 自定义颜色
+### 徽标提示
 
 ``` html
-<nut-tabbar :tabbar-List="tabList" @tab-switch="tabSwitch" unactiveColor="#7d7e80" activeColor="#1989fa" ></nut-tabbar>
+<nut-tabbar>
+  <nut-tabbar-item tab-title="首页" icon="home" num="11"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="购物车" icon="cart" num="110"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
+</nut-tabbar>
 ```
+### 自定义颜色
 
-``` javascript
-// ...
-  setup() {
-    const tabList = [
-      {
-        tabTitle: '首页',
-        curr: false,
-        icon: 'home',
-      },
-      {
-        tabTitle: '分类',
-        curr: false,
-        icon: 'category',
-      },
-      {
-        tabTitle: '发现',
-        curr: false,
-        icon: 'find',
-      },
-      {
-        tabTitle: '购物车',
-        curr: false,
-        icon: 'cart',
-        num: '12'
-      },
-      {
-        tabTitle: '我的',
-        curr: false,
-        icon: 'my',
-      },
-    ];
-    function tabSwitch(item: object, index: number) {
-      console.log(item, index);
-    }
-    return {
-      ...reactive({
-        tabList,
-      }),
-      tabSwitch,
-    };
-  },
-// ...
+``` html
+<nut-tabbar unactiveColor="#7d7e80" activeColor="#1989fa">
+  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="分类" icon="category"></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 :tabbar-List="tabList" @tab-switch="tabSwitch"></nut-tabbar>
-```
-
-``` javascript
-// ...
-  setup() {
-        const tabList = [
-      {
-        tabTitle: '首页',
-        curr: false,
-        icon: 'home'
-      },
-      {
-        tabTitle: '分类',
-        curr: false,
-        icon: 'category'
-      },
-      {
-        tabTitle: '我的',
-        curr: false,
-        icon: 'my'
-      }
-    ];
-    function tabSwitch(item: object, index: number) {
-      console.log(item, index);
-    }
-    return {
-      ...reactive({
-        tabList,
-      }),
-      tabSwitch,
-    };
-  },
-// ...
+<nut-tabbar unactiveColor="#7d7e80" activeColor="#1989fa">
+  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
+</nut-tabbar>
 ```
-
 ### 固定底部，可自由跳转
 
 ``` html
-<nut-tabbar :tabbar-List="tabList" @tab-switch="tabSwitch" :bottom="true" ></nut-tabbar>
-```
-
-``` javascript
-// ...
-  setup() {
-        const tabList = [
-      {
-        tabTitle: '首页',
-        curr: false,
-        icon: 'home'
-      },
-      {
-        tabTitle: '分类',
-        curr: false,
-        icon: 'category'
-      },
-      {
-        tabTitle: '发现',
-        curr: false,
-        icon: 'find'
-      },
-      {
-        tabTitle: '购物车',
-        curr: false,
-        icon: 'cart',
-        num: '122'
-      },
-      {
-        tabTitle: '我的',
-        curr: false,
-        icon: 'my'
-      }
-    ];
-    function tabSwitch(item: object, index: number) {
-      console.log(item, index);
-    }
-    return {
-      ...reactive({
-        tabList,
-      }),
-      tabSwitch,
-    };
-  },
-// ...
+<nut-tabbar unactiveColor="#7d7e80" activeColor="#1989fa">
+  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="购物车" href="https://m.jd.com" icon="cart"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
+</nut-tabbar>
 ```
 ### Prop
 
@@ -259,18 +106,16 @@ app.use(Tabbar);
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| type | 页签栏的样式 based/card：based是默认样式如吸底样式，card类型每个卡片间有边界线 | String | based
-| tabbar-list | 渲染数据 ，兼容 tabbar-list 和 tabbarList| Array | []
 | bottom | 是否固定在页面底部 |Booble|false|
-| unactiveColor | icon未激活的颜色 |string|#7d7e80|
-| activeColor | icon激活的颜色 |string|#1989fa|
+| show | 选中标签的索引值 |number|0|
+| unactive-color | icon未激活的颜色 |string|#7d7e80|
+| active-color | icon激活的颜色 |string|#1989fa|
 
-### tabbar-list
+### tabbar-item
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| tabTitle | 标签页的标题 | String | --
-| curr | 是否为选中的标签页 | Booble | false
+| tab-title | 标签页的标题 | String | --
 | icon | 标签页显示的icon | String | --
 | href | 标签页的跳转链接 | String | --
 | num |页签右上角的数字角标，超出99之后为99+|Number|--
@@ -280,7 +125,7 @@ app.use(Tabbar);
 
 | 事件名称 | 说明 | 回调参数 
 |----- | ----- | ----- 
-| tabSwitch | 切换页签时触发事件 | 点击的索引值和对应的数据
+| tabSwitch | 切换页签时触发事件 | 点击的数据和索引值
 
 
 

src/packages/tabbar/index.vue

@@ -1,49 +1,18 @@
 <template>
   <view class="nut-tabbar" :class="{ bottom }">
-    <view
-      class="tabbar-nav"
-      v-for="(item, index) in tabbarList"
-      :key="index"
-      :style="{ color: index == currIndex ? activeColor : unactiveColor }"
-      :class="type"
-      @click="switchTabs(item, index)"
-    >
-      <view class="icon-box">
-        <view class="tips num" v-if="item.num && item.num <= 99">
-          {{ item.num }}
-        </view>
-        <view class="tips nums" v-else-if="item.num && item.num > 100">{{
-          '99+'
-        }}</view>
-        <view v-if="item.icon">
-          <nut-icon class="icon" :size="size" :name="item.icon"></nut-icon>
-        </view>
-        <view :class="['tabbar-nav-word', { 'big-word': !item.icon }]">{{
-          item.tabTitle
-        }}</view>
-      </view>
-    </view>
+    <slot></slot>
   </view>
 </template>
 
 <script lang="ts">
-import { ref, onMounted, Ref } from 'vue';
+import { provide, reactive } from 'vue';
 import { createComponent } from '@/utils/create';
 const { create } = createComponent('tabbar');
-type obj = {
-  tabTitle: string;
-  curr: boolean;
-  icon: string;
-  href: string;
-  color: string;
-};
 export default create({
   props: {
-    tabbarList: {
-      type: Array,
-      default: () => {
-        return [];
-      }
+    show: {
+      type: [Number, String],
+      default: 0
     },
     bottom: {
       type: Boolean,
@@ -66,33 +35,27 @@ export default create({
       default: '#fa2c19'
     }
   },
-  components: {},
-  emits: ['tab-switch'],
-  setup(props, { emit }) {
-    const currIndex: Ref<number> = ref(0);
-    const { tabbarList } = props;
-    function initbar() {
-      tabbarList.forEach((item: any, index) => {
-        if (item.curr) {
-          currIndex.value = index;
-        }
-      });
-    }
-    // 点击以后切换
-    function switchTabs(item: obj, index: number) {
-      currIndex.value = index;
-      if (item.href) {
-        window.location.href = item.href;
-      }
-      emit('tab-switch', item, index);
+  emits: ['tab-switch', 'update:show'],
+  setup(props, { emit, slots }) {
+    const mdValue = reactive({
+      val: props.show
+    });
+    function changeIndex(active: number) {
+      emit('update:show', active);
+      parentData.modelValue = active;
+      emit('tab-switch', parentData.children[active], active);
     }
-    onMounted(() => {
-      initbar();
+    let parentData = reactive({
+      children: [],
+      size: props.size,
+      modelValue: mdValue.val,
+      unactiveColor: props.unactiveColor,
+      activeColor: props.activeColor,
+      changeIndex
     });
+    provide('parent', parentData);
     return {
-      currIndex,
-      tabbarList,
-      switchTabs
+      changeIndex
     };
   }
 });