uview-pro 0.2.4 → 0.3.1

package/components/u-tabbar/u-tabbar.vue

@@ -1,298 +1,315 @@
-<template>
-    <view v-if="props.show" class="u-tabbar" @touchmove.stop.prevent="() => {}">
-        <view
-            class="u-tabbar__content safe-area-inset-bottom"
-            :style="{ height: $u.addUnit(props.height), backgroundColor: props.bgColor }"
-            :class="{ 'u-border-top': props.borderTop }"
-        >
-            <view
-                class="u-tabbar__content__item"
-                v-for="(item, index) in props.list"
-                :key="index"
-                :class="{ 'u-tabbar__content__circle': props.midButton && item.midButton }"
-                @tap.stop="clickHandler(index)"
-                :style="{ backgroundColor: props.bgColor }"
-            >
-                <view
-                    :class="[
-                        props.midButton && item.midButton
-                            ? 'u-tabbar__content__circle__button'
-                            : 'u-tabbar__content__item__button'
-                    ]"
-                >
-                    <u-icon
-                        :size="props.midButton && item.midButton ? props.midButtonSize : props.iconSize"
-                        :name="elIconPath(index)"
-                        img-mode="scaleToFill"
-                        :color="elColor(index)"
-                        :custom-prefix="item.customIcon ? 'custom-icon' : 'uicon'"
-                    ></u-icon>
-                    <u-badge
-                        :count="item.count"
-                        :is-dot="item.isDot"
-                        v-if="item.count || item.isDot"
-                        :offset="[-2, getOffsetRight(item.count, item.isDot)]"
-                    ></u-badge>
-                </view>
-                <view class="u-tabbar__content__item__text" :style="{ color: elColor(index) }">
-                    <text class="u-line-1">{{ item.text }}</text>
-                </view>
-            </view>
-            <view
-                v-if="props.midButton"
-                class="u-tabbar__content__circle__border"
-                :class="{ 'u-border': props.borderTop }"
-                :style="{ backgroundColor: props.bgColor, left: midButtonLeft }"
-            ></view>
-        </view>
-        <!-- 这里加上一个48rpx的高度,是为了增高有凸起按钮时的防塌陷高度(也即按钮凸出来部分的高度) -->
-        <!-- calc 计算0时单位不一致会计算失败，这里+1px -->
-        <view
-            class="u-fixed-placeholder safe-area-inset-bottom"
-            :style="{ height: `calc(${$u.addUnit(props.height)} + ${props.midButton ? '48rpx' : '1px'})` }"
-        ></view>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, getCurrentInstance } from 'vue';
-import { $u } from '../..';
-import { TabbarProps } from './types';
-
-defineOptions({ name: 'u-tabbar' });
-
-/**
- * u-tabbar 底部导航栏
- * @property {Boolean} show 显示与否
- * @property {String|Number} value 通过v-model绑定current值
- * @property {String} bgColor 整个tabbar的背景颜色
- * @property {String|Number} height tabbar的高度，默认50px，单位任意，如果为数值，则为rpx单位
- * @property {String|Number} iconSize 非凸起图标的大小，单位任意，数值默认rpx
- * @property {String|Number} midButtonSize 凸起的图标的大小，单位任意，数值默认rpx
- * @property {String} activeColor 激活时的演示，包括字体图标，提示文字等的演示
- * @property {String} inactiveColor 未激活时的颜色
- * @property {Boolean} midButton 是否显示中部的凸起按钮
- * @property {Array} list 配置参数
- * @property {Function} beforeSwitch 切换前的回调
- * @property {Boolean} borderTop 是否显示顶部的横线
- * @property {Boolean} hideTabBar 是否隐藏原生tabbar
- */
-
-const props = defineProps(TabbarProps);
-
-const emit = defineEmits<{ (e: 'change', index: number): void; (e: 'update:modelValue', index: number): void }>();
-
-// 由于安卓太菜了，通过css居中凸起按钮的外层元素有误差，故通过js计算将其居中
-const midButtonLeft = ref('50%');
-const pageUrl = ref(''); // 当前页面URL
-
-onMounted(() => {
-    // 是否隐藏原生tabbar
-    // 注意：如果当前页面不是tabbar页面，浏览器控制台会报错：{errMsg: 'hideTabBar:fail not TabBar page'}
-    if (props.hideTabBar) uni.hideTabBar();
-    // 获取引入了u-tabbar页面的路由地址，该地址没有路径前面的"/"
-    const pages = getCurrentPages();
-    // 页面栈中的最后一个即为项为当前页面，route属性为页面路径
-    pageUrl.value = pages[pages.length - 1].route as string;
-    if (props.midButton) getMidButtonLeft();
-});
-
-/**
- * 计算当前item的icon路径
- */
-const elIconPath = computed<(index: number) => string>(() => {
-    return (index: number) => {
-        // 历遍u-tabbar的每一项item时，判断是否传入了pagePath参数，如果传入了
-        // 和data中的pageUrl参数对比，如果相等，即可判断当前的item对应当前的tabbar页面，设置高亮图标
-        // 采用这个方法，可以无需使用v-model绑定的value值
-        const pagePath = props.list[index]?.pagePath;
-        // 如果定义了pagePath属性，意味着使用系统自带tabbar方案，否则使用一个页面用几个组件模拟tabbar页面的方案
-        // 这两个方案对处理tabbar item的激活与否方式不一样
-        if (pagePath) {
-            if (pagePath === pageUrl.value || pagePath === '/' + pageUrl.value) {
-                return props.list[index].selectedIconPath;
-            } else {
-                return props.list[index].iconPath;
-            }
-        } else {
-            // 普通方案中，索引等于v-model值时，即为激活项
-            return index == props.modelValue ? props.list[index].selectedIconPath : props.list[index].iconPath;
-        }
-    };
-});
-
-/**
- * 计算当前item的颜色
- */
-const elColor = computed<(index: number) => string>(() => {
-    return (index: number) => {
-        // 判断方法同理于elIconPath
-        const pagePath = props.list[index]?.pagePath;
-        if (pagePath) {
-            if (pagePath === pageUrl.value || pagePath === '/' + pageUrl.value) return props.activeColor;
-            else return props.inactiveColor;
-        } else {
-            return index == props.modelValue ? props.activeColor : props.inactiveColor;
-        }
-    };
-});
-
-/**
- * 点击tabbar item
- */
-async function clickHandler(index: number) {
-    if (props.beforeSwitch && typeof props.beforeSwitch === 'function') {
-        // 执行回调，同时传入索引当作参数
-        let beforeSwitchResult = props.beforeSwitch(index);
-        // 判断是否返回了promise
-        if (
-            typeof beforeSwitchResult === 'object' &&
-            beforeSwitchResult !== null &&
-            typeof beforeSwitchResult.then === 'function'
-        ) {
-            await beforeSwitchResult
-                .then(() => {
-                    // promise返回成功，
-                    switchTab(index);
-                })
-                .catch(() => {});
-        } else if (beforeSwitchResult === true) {
-            // 如果返回true
-            switchTab(index);
-        }
-    } else {
-        switchTab(index);
-    }
-}
-
-/**
- * 切换tab
- */
-function switchTab(index: number) {
-    // 发出事件和修改v-model绑定的值
-    emit('change', index);
-    // 如果有配置pagePath属性，使用uni.switchTab进行跳转
-    if (props.list[index]?.pagePath) {
-        uni.switchTab({ url: props.list[index].pagePath });
-    } else {
-        // 如果配置了papgePath属性，将不会双向绑定v-model传入的value值
-        // 因为这个模式下，不再需要v-model绑定的value值了，而是通过getCurrentPages()适配
-        emit('update:modelValue', index);
-    }
-}
-
-/**
- * 计算角标的right值
- */
-function getOffsetRight(count: number, isDot: boolean): number {
-    // 点类型，count大于9(两位数)，分别设置不同的right值，避免位置太挤
-    if (isDot) {
-        return -20;
-    } else if (count > 9) {
-        return -40;
-    } else {
-        return -30;
-    }
-}
-
-/**
- * 获取凸起按钮外层元素的left值，让其水平居中
- */
-function getMidButtonLeft() {
-    const windowWidth = $u.sys().windowWidth;
-    // 由于安卓中css计算left: 50%的结果不准确，故用js计算
-    midButtonLeft.value = windowWidth / 2 + 'px';
-}
-</script>
-
-<style scoped lang="scss">
-@import '../../libs/css/style.components.scss';
-.u-fixed-placeholder {
-    /* #ifndef APP-NVUE */
-    box-sizing: content-box;
-    /* #endif */
-    height: 50px;
-}
-.u-tabbar {
-    &__content {
-        @include vue-flex;
-        align-items: center;
-        position: relative;
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        z-index: 998;
-        /* #ifndef APP-NVUE */
-        box-sizing: content-box;
-        /* #endif */
-        &__circle__border {
-            border-radius: 100%;
-            width: 110rpx;
-            height: 110rpx;
-            top: -48rpx;
-            position: absolute;
-            z-index: 4;
-            background-color: #ffffff;
-            // 由于安卓的无能，导致只有3个tabbar item时，此css计算方式有误差
-            // 故使用js计算的形式来定位，此处不注释，是因为js计算有延后，避免出现位置闪动
-            left: 50%;
-            transform: translateX(-50%);
-            &:after {
-                border-radius: 100px;
-            }
-        }
-        &__item {
-            flex: 1;
-            justify-content: center;
-            height: 100%;
-            padding: 12rpx 0;
-            @include vue-flex;
-            flex-direction: column;
-            align-items: center;
-            position: relative;
-            &__button {
-                position: absolute;
-                top: 14rpx;
-                left: 50%;
-                transform: translateX(-50%);
-            }
-            &__text {
-                color: $u-content-color;
-                font-size: 26rpx;
-                line-height: 28rpx;
-                position: absolute;
-                bottom: 14rpx;
-                left: 50%;
-                transform: translateX(-50%);
-                width: 100%;
-                text-align: center;
-            }
-        }
-        &__circle {
-            position: relative;
-            @include vue-flex;
-            flex-direction: column;
-            justify-content: space-between;
-            z-index: 10;
-            /* #ifndef APP-NVUE */
-            height: calc(100% - 1px);
-            /* #endif */
-            &__button {
-                width: 90rpx;
-                height: 90rpx;
-                border-radius: 100%;
-                @include vue-flex;
-                justify-content: center;
-                align-items: center;
-                position: absolute;
-                background-color: #ffffff;
-                top: -40rpx;
-                left: 50%;
-                z-index: 6;
-                transform: translateX(-50%);
-            }
-        }
-    }
-}
-</style>
+<template>
+    <view
+        v-if="props.show"
+        class="u-tabbar"
+        :class="customClass"
+        :style="$u.toStyle(customStyle)"
+        @touchmove.stop.prevent="() => {}"
+    >
+        <view
+            class="u-tabbar__content safe-area-inset-bottom"
+            :style="{ height: $u.addUnit(props.height), backgroundColor: props.bgColor }"
+            :class="{ 'u-border-top': props.borderTop }"
+        >
+            <view
+                class="u-tabbar__content__item"
+                v-for="(item, index) in props.list"
+                :key="index"
+                :class="{ 'u-tabbar__content__circle': props.midButton && item.midButton }"
+                @tap.stop="clickHandler(index)"
+                :style="{ backgroundColor: props.bgColor }"
+            >
+                <view
+                    :class="[
+                        props.midButton && item.midButton
+                            ? 'u-tabbar__content__circle__button'
+                            : 'u-tabbar__content__item__button'
+                    ]"
+                >
+                    <u-icon
+                        :size="props.midButton && item.midButton ? props.midButtonSize : props.iconSize"
+                        :name="elIconPath(index)"
+                        img-mode="scaleToFill"
+                        :color="elColor(index)"
+                        :custom-prefix="item.customIcon ? 'custom-icon' : 'uicon'"
+                    ></u-icon>
+                    <u-badge
+                        :count="item.count"
+                        :is-dot="item.isDot"
+                        v-if="item.count || item.isDot"
+                        :offset="[-2, getOffsetRight(item.count, item.isDot)]"
+                    ></u-badge>
+                </view>
+                <view class="u-tabbar__content__item__text" :style="{ color: elColor(index) }">
+                    <text class="u-line-1">{{ item.text }}</text>
+                </view>
+            </view>
+            <view
+                v-if="props.midButton"
+                class="u-tabbar__content__circle__border"
+                :class="{ 'u-border': props.borderTop }"
+                :style="{ backgroundColor: props.bgColor, left: midButtonLeft }"
+            ></view>
+        </view>
+        <!-- 这里加上一个48rpx的高度,是为了增高有凸起按钮时的防塌陷高度(也即按钮凸出来部分的高度) -->
+        <!-- calc 计算0时单位不一致会计算失败，这里+1px -->
+        <view
+            class="u-fixed-placeholder safe-area-inset-bottom"
+            :style="{ height: `calc(${$u.addUnit(props.height)} + ${props.midButton ? '48rpx' : '1px'})` }"
+        ></view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-tabbar',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, getCurrentInstance } from 'vue';
+import { $u } from '../..';
+import { TabbarProps } from './types';
+
+/**
+ * u-tabbar 底部导航栏
+ * @property {Boolean} show 显示与否
+ * @property {String|Number} value 通过v-model绑定current值
+ * @property {String} bgColor 整个tabbar的背景颜色
+ * @property {String|Number} height tabbar的高度，默认50px，单位任意，如果为数值，则为rpx单位
+ * @property {String|Number} iconSize 非凸起图标的大小，单位任意，数值默认rpx
+ * @property {String|Number} midButtonSize 凸起的图标的大小，单位任意，数值默认rpx
+ * @property {String} activeColor 激活时的演示，包括字体图标，提示文字等的演示
+ * @property {String} inactiveColor 未激活时的颜色
+ * @property {Boolean} midButton 是否显示中部的凸起按钮
+ * @property {Array} list 配置参数
+ * @property {Function} beforeSwitch 切换前的回调
+ * @property {Boolean} borderTop 是否显示顶部的横线
+ * @property {Boolean} hideTabBar 是否隐藏原生tabbar
+ */
+
+const props = defineProps(TabbarProps);
+
+const emit = defineEmits<{ (e: 'change', index: number): void; (e: 'update:modelValue', index: number): void }>();
+
+// 由于安卓太菜了，通过css居中凸起按钮的外层元素有误差，故通过js计算将其居中
+const midButtonLeft = ref('50%');
+const pageUrl = ref(''); // 当前页面URL
+
+onMounted(() => {
+    // 是否隐藏原生tabbar
+    // 注意：如果当前页面不是tabbar页面，浏览器控制台会报错：{errMsg: 'hideTabBar:fail not TabBar page'}
+    if (props.hideTabBar) uni.hideTabBar();
+    // 获取引入了u-tabbar页面的路由地址，该地址没有路径前面的"/"
+    const pages = getCurrentPages();
+    // 页面栈中的最后一个即为项为当前页面，route属性为页面路径
+    pageUrl.value = pages[pages.length - 1].route as string;
+    if (props.midButton) getMidButtonLeft();
+});
+
+/**
+ * 计算当前item的icon路径
+ */
+const elIconPath = computed<(index: number) => string>(() => {
+    return (index: number) => {
+        // 历遍u-tabbar的每一项item时，判断是否传入了pagePath参数，如果传入了
+        // 和data中的pageUrl参数对比，如果相等，即可判断当前的item对应当前的tabbar页面，设置高亮图标
+        // 采用这个方法，可以无需使用v-model绑定的value值
+        const pagePath = props.list[index]?.pagePath;
+        // 如果定义了pagePath属性，意味着使用系统自带tabbar方案，否则使用一个页面用几个组件模拟tabbar页面的方案
+        // 这两个方案对处理tabbar item的激活与否方式不一样
+        if (pagePath) {
+            if (pagePath === pageUrl.value || pagePath === '/' + pageUrl.value) {
+                return props.list[index].selectedIconPath;
+            } else {
+                return props.list[index].iconPath;
+            }
+        } else {
+            // 普通方案中，索引等于v-model值时，即为激活项
+            return index == props.modelValue ? props.list[index].selectedIconPath : props.list[index].iconPath;
+        }
+    };
+});
+
+/**
+ * 计算当前item的颜色
+ */
+const elColor = computed<(index: number) => string>(() => {
+    return (index: number) => {
+        // 判断方法同理于elIconPath
+        const pagePath = props.list[index]?.pagePath;
+        if (pagePath) {
+            if (pagePath === pageUrl.value || pagePath === '/' + pageUrl.value) return props.activeColor;
+            else return props.inactiveColor;
+        } else {
+            return index == props.modelValue ? props.activeColor : props.inactiveColor;
+        }
+    };
+});
+
+/**
+ * 点击tabbar item
+ */
+async function clickHandler(index: number) {
+    if (props.beforeSwitch && typeof props.beforeSwitch === 'function') {
+        // 执行回调，同时传入索引当作参数
+        let beforeSwitchResult = props.beforeSwitch(index);
+        // 判断是否返回了promise
+        if (
+            typeof beforeSwitchResult === 'object' &&
+            beforeSwitchResult !== null &&
+            typeof beforeSwitchResult.then === 'function'
+        ) {
+            await beforeSwitchResult
+                .then(() => {
+                    // promise返回成功，
+                    switchTab(index);
+                })
+                .catch(() => {});
+        } else if (beforeSwitchResult === true) {
+            // 如果返回true
+            switchTab(index);
+        }
+    } else {
+        switchTab(index);
+    }
+}
+
+/**
+ * 切换tab
+ */
+function switchTab(index: number) {
+    // 发出事件和修改v-model绑定的值
+    emit('change', index);
+    // 如果有配置pagePath属性，使用uni.switchTab进行跳转
+    if (props.list[index]?.pagePath) {
+        uni.switchTab({ url: props.list[index].pagePath });
+    } else {
+        // 如果配置了papgePath属性，将不会双向绑定v-model传入的value值
+        // 因为这个模式下，不再需要v-model绑定的value值了，而是通过getCurrentPages()适配
+        emit('update:modelValue', index);
+    }
+}
+
+/**
+ * 计算角标的right值
+ */
+function getOffsetRight(count: number, isDot: boolean): number {
+    // 点类型，count大于9(两位数)，分别设置不同的right值，避免位置太挤
+    if (isDot) {
+        return -20;
+    } else if (count > 9) {
+        return -40;
+    } else {
+        return -30;
+    }
+}
+
+/**
+ * 获取凸起按钮外层元素的left值，让其水平居中
+ */
+function getMidButtonLeft() {
+    const windowWidth = $u.sys().windowWidth;
+    // 由于安卓中css计算left: 50%的结果不准确，故用js计算
+    midButtonLeft.value = windowWidth / 2 + 'px';
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+.u-fixed-placeholder {
+    /* #ifndef APP-NVUE */
+    box-sizing: content-box;
+    /* #endif */
+    height: 50px;
+}
+.u-tabbar {
+    &__content {
+        @include vue-flex;
+        align-items: center;
+        position: relative;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        z-index: 998;
+        /* #ifndef APP-NVUE */
+        box-sizing: content-box;
+        /* #endif */
+        &__circle__border {
+            border-radius: 100%;
+            width: 110rpx;
+            height: 110rpx;
+            top: -48rpx;
+            position: absolute;
+            z-index: 4;
+            background-color: #ffffff;
+            // 由于安卓的无能，导致只有3个tabbar item时，此css计算方式有误差
+            // 故使用js计算的形式来定位，此处不注释，是因为js计算有延后，避免出现位置闪动
+            left: 50%;
+            transform: translateX(-50%);
+            &:after {
+                border-radius: 100px;
+            }
+        }
+        &__item {
+            flex: 1;
+            justify-content: center;
+            height: 100%;
+            padding: 12rpx 0;
+            @include vue-flex;
+            flex-direction: column;
+            align-items: center;
+            position: relative;
+            &__button {
+                position: absolute;
+                top: 14rpx;
+                left: 50%;
+                transform: translateX(-50%);
+            }
+            &__text {
+                color: $u-content-color;
+                font-size: 26rpx;
+                line-height: 28rpx;
+                position: absolute;
+                bottom: 14rpx;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 100%;
+                text-align: center;
+            }
+        }
+        &__circle {
+            position: relative;
+            @include vue-flex;
+            flex-direction: column;
+            justify-content: space-between;
+            z-index: 10;
+            /* #ifndef APP-NVUE */
+            height: calc(100% - 1px);
+            /* #endif */
+            &__button {
+                width: 90rpx;
+                height: 90rpx;
+                border-radius: 100%;
+                @include vue-flex;
+                justify-content: center;
+                align-items: center;
+                position: absolute;
+                background-color: #ffffff;
+                top: -40rpx;
+                left: 50%;
+                z-index: 6;
+                transform: translateX(-50%);
+            }
+        }
+    }
+}
+</style>