浏览代码

fix(tabbar): taro vue-router warn (#980)

* fix: doc更新

* fix: circleprogress 修改

* fix: tabbar新增底部安全适配属性

* fix: 增加在线文档

* fix: 在线文档接入

* fix: tabbar修复
Drjingfubo 3 年之前
父节点
当前提交
80e61a917e
共有 2 个文件被更改,包括 127 次插入0 次删除
  1. 1 0
      src/config.json
  2. 126 0
      src/packages/__VUE/tabbaritem/index.taro.vue

+ 1 - 0
src/config.json

@@ -551,6 +551,7 @@
           "show": false,
           "show": false,
           "taro": true,
           "taro": true,
           "exportEmpty": true,
           "exportEmpty": true,
+          "exportEmptyTaro": true,
           "desc": "标签栏子组件",
           "desc": "标签栏子组件",
           "author": "Drjingfubo"
           "author": "Drjingfubo"
         },
         },

+ 126 - 0
src/packages/__VUE/tabbaritem/index.taro.vue

@@ -0,0 +1,126 @@
+<template>
+  <div
+    class="nut-tabbar-item"
+    :class="{ 'nut-tabbar-item__icon--unactive': state.active != state.index }"
+    :style="{
+      color: state.active == state.index ? state.activeColor : state.unactiveColor
+    }"
+    @click="change(state.index)"
+  >
+    <view class="nut-tabbar-item_icon-box">
+      <view class="nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_num" v-if="num && num <= 99">
+        {{ num }}
+      </view>
+      <view class="nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_nums" v-else-if="num && num > 100">{{
+        '99+'
+      }}</view>
+      <view v-if="icon">
+        <nut-icon
+          class="nut-tabbar-item_icon-box_icon"
+          :size="state.size"
+          :name="icon"
+          :font-class-name="fontClassName"
+          :class-prefix="classPrefix"
+        ></nut-icon>
+      </view>
+      <div
+        v-if="!icon && activeImg"
+        class="nut-tabbar-item_icon-box_icon"
+        :style="{
+          backgroundImage: `url(${state.active == state.index ? activeImg : img})`,
+          width: state.size,
+          height: state.size
+        }"
+      ></div>
+      <view
+        :class="['nut-tabbar-item_icon-box_nav-word', { 'nut-tabbar-item_icon-box_big-word': !icon && !activeImg }]"
+        >{{ tabTitle }}</view
+      >
+    </view>
+  </div>
+</template>
+<script lang="ts">
+import { createComponent } from '../../utils/create';
+import { ComponentInternalInstance, computed, getCurrentInstance, inject, onMounted, 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: ''
+    },
+    activeImg: {
+      type: String,
+      default: ''
+    },
+    img: {
+      type: String,
+      default: ''
+    },
+    classPrefix: {
+      type: String,
+      default: 'nut-icon'
+    },
+    fontClassName: {
+      type: String,
+      default: 'nutui-iconfont'
+    },
+    to: [Object, String]
+  },
+  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;
+        parent.children.push(child.proxy);
+      }
+    };
+    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;
+      setTimeout(() => {
+        if (parent.children[value].href) {
+          window.location.href = parent.children[value].href;
+        }
+      });
+    });
+    return {
+      state,
+      change
+    };
+  }
+});
+</script>