uview-pro 0.0.1

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

@@ -0,0 +1,347 @@
+<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的高度,是为了增高有凸起按钮时的防塌陷高度(也即按钮凸出来部分的高度) -->
+        <view class="u-fixed-placeholder safe-area-inset-bottom" :style="{ height: `calc(${$u.addUnit(props.height)} + ${props.midButton ? 48 : 0}rpx)` }"></view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, getCurrentInstance } from 'vue';
+import { $u } from '../..';
+
+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({
+    /** 显示与否 */
+    show: {
+        type: Boolean,
+        default: true
+    },
+    /** 通过v-model绑定current值 */
+    modelValue: {
+        type: [String, Number],
+        default: 0
+    },
+    /** 整个tabbar的背景颜色 */
+    bgColor: {
+        type: String,
+        default: '#ffffff'
+    },
+    /** tabbar的高度，默认50px，单位任意，如果为数值，则为rpx单位 */
+    height: {
+        type: [String, Number],
+        default: '50px'
+    },
+    /** 非凸起图标的大小，单位任意，数值默认rpx */
+    iconSize: {
+        type: [String, Number],
+        default: 40
+    },
+    /** 凸起的图标的大小，单位任意，数值默认rpx */
+    midButtonSize: {
+        type: [String, Number],
+        default: 90
+    },
+    /** 激活时的演示，包括字体图标，提示文字等的演示 */
+    activeColor: {
+        type: String,
+        default: '#303133'
+    },
+    /** 未激活时的颜色 */
+    inactiveColor: {
+        type: String,
+        default: '#606266'
+    },
+    /** 是否显示中部的凸起按钮 */
+    midButton: {
+        type: Boolean,
+        default: false
+    },
+    /** 配置参数 */
+    list: {
+        type: Array as () => any[],
+        default: () => []
+    },
+    /** 切换前的回调 */
+    beforeSwitch: {
+        type: Function,
+        default: null
+    },
+    /** 是否显示顶部的横线 */
+    borderTop: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否隐藏原生tabbar */
+    hideTabBar: {
+        type: Boolean,
+        default: true
+    }
+});
+
+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') {
+        // 执行回调，同时传入索引当作参数
+        // 在微信，支付宝等环境(H5正常)，会导致父组件定义的customBack()函数体中的this变成子组件的this
+        // 通过bind()方法，绑定父组件的this，让this.customBack()的this为父组件的上下文
+        // let beforeSwitch = props.beforeSwitch.bind($u.$parent.call(getCurrentInstance()?.proxy))(index);
+        // 或许有问题
+        let beforeSwitch = props.beforeSwitch(index);
+        // 判断是否返回了promise
+        if (!!beforeSwitch && typeof beforeSwitch.then === 'function') {
+            await beforeSwitch
+                .then(() => {
+                    // promise返回成功，
+                    switchTab(index);
+                })
+                .catch(() => {});
+        } else if (beforeSwitch === 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 */
+}
+.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>

package/components/u-table/u-table.vue

@@ -0,0 +1,104 @@
+<template>
+    <view class="u-table" :style="tableStyle">
+        <slot />
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+defineOptions({ name: 'u-table' });
+
+/**
+ * table 表格
+ * @description 表格组件一般用于展示大量结构化数据的场景
+ * @tutorial https://www.uviewui.com/components/table.html
+ * @property {String} border-color 表格边框的颜色（默认#e4e7ed）
+ * @property {String} bg-color 表格的背景颜色（默认#ffffff）
+ * @property {String} align 单元格的内容对齐方式，作用类似css的text-align（默认center）
+ * @property {String} padding 单元格的内边距，同css的padding写法（默认10rpx 0）
+ * @property {String | Number} font-size 单元格字体大小，单位rpx（默认28）
+ * @property {String} color 单元格字体颜色（默认#606266）
+ * @property {Object} th-style th单元格的样式，对象形式(将th所需参数放在table组件，是为了避免每一个th组件要写一遍）
+ * @event {Function} click 点击组件时触发
+ * @event {Function} close 点击关闭按钮时触发
+ * @example <u-table></u-table>
+ */
+
+const props = defineProps({
+    /**
+     * 表格边框的颜色
+     */
+    borderColor: {
+        type: String,
+        default: '#e4e7ed'
+    },
+    /**
+     * 单元格的内容对齐方式
+     */
+    align: {
+        type: String,
+        default: 'center'
+    },
+    /**
+     * td的内边距
+     */
+    padding: {
+        type: String,
+        default: '10rpx 6rpx'
+    },
+    /**
+     * 字体大小
+     */
+    fontSize: {
+        type: [String, Number],
+        default: 28
+    },
+    /**
+     * 字体颜色
+     */
+    color: {
+        type: String,
+        default: '#606266'
+    },
+    /**
+     * th的自定义样式
+     */
+    thStyle: {
+        type: Object as () => Record<string, any>,
+        default: () => ({})
+    },
+    /**
+     * table的背景颜色
+     */
+    bgColor: {
+        type: String,
+        default: '#ffffff'
+    }
+});
+
+/**
+ * 计算表格样式
+ */
+const tableStyle = computed(() => {
+    const style: Record<string, any> = {};
+    style.borderLeft = `solid 1px ${props.borderColor}`;
+    style.borderTop = `solid 1px ${props.borderColor}`;
+    style.backgroundColor = props.bgColor;
+    return style;
+});
+
+defineExpose({
+    props,
+    tableStyle
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-table {
+    width: 100%;
+    box-sizing: border-box;
+}
+</style>