hy-app 0.5.3 → 0.5.4

package/components/hy-tabbar/hy-tabbar.vue

@@ -0,0 +1,137 @@
+<template>
+    <view class="hy-tabbar" :style="tabBarStyle">
+        <view v-if="placeholder" class="hy-tabbar--placeholder"></view>
+
+        <view class="hy-tabbar--box" :style="{ background: bgColor }">
+            <view class="hy-tabbar--container">
+                <view
+                    :class="[
+                        'hy-tabbar--container__item',
+                        'list',
+                        current === i ? 'is-active' : ''
+                    ]"
+                    v-for="(item, i) in list"
+                    :key="i"
+                    ref="itemRef"
+                    @click="checkItem(i)"
+                >
+                    <view class="hy-tabbar--container__item--bar">
+                        <view class="icon">
+                            <hy-badge
+                                :value="item?.badge"
+                                absolute
+                                :offset="[-13, 25]"
+                                :max="badgeProps?.max"
+                                :is-dot="badgeProps?.isDot"
+                                :inverted="badgeProps?.inverted"
+                                :bg-color="badgeProps?.bgColor"
+                                :type="badgeProps?.type"
+                                :number-type="badgeProps?.numberType"
+                                :shape="badgeProps?.shape"
+                                :show-zero="badgeProps?.showZero"
+                                :show="!!item?.badge"
+                            ></hy-badge>
+                            <!-- 图标插槽 -->
+                            <slot v-if="$slots.icon" name="icon"></slot>
+                            <hy-icon v-else :name="item.icon" :color="color" size="25"></hy-icon>
+                        </view>
+                        <text class="text" :style="[{ color: color }]">{{ item.name }}</text>
+                        <text class="circle"></text>
+                    </view>
+                </view>
+                <view
+                    class="hy-tabbar--indicator"
+                    :style="{
+                        '--num': `translateX(${rectList[current]?.left}px)`,
+                        background: activeColor
+                    }"
+                ></view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-tabbar',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
+import tabBarProps from './props'
+import type { ITabBarEmits } from './typing'
+
+// 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyBadge from '../hy-badge/hy-badge.vue'
+import { getRect } from '@/package'
+
+/**
+ * 底部导航栏，用于在不同页面之间进行切换。
+ * @displayName hy-tabbar
+ */
+defineOptions({})
+
+const props = defineProps(tabBarProps)
+const emit = defineEmits<ITabBarEmits>()
+
+const instance = getCurrentInstance()
+const rectList = ref<UniNamespace.NodeInfo[]>([])
+const baseBackgroundColor = props.baseBgColor ? props.baseBgColor : 'var(--hy-background)'
+const current = ref<number>(props.modelValue)
+watch(
+    () => props.modelValue,
+    (newVal) => {
+        current.value = newVal
+    }
+)
+
+onMounted(() => {
+    nextTick(() => {
+        getRect('.list', true, instance).then((res) => {
+            console.log(res, current.value)
+            rectList.value = res
+        })
+    })
+})
+
+// tabbar属性值
+const tabBarStyle = computed(() => {
+    const style = {
+        position: props.fixed ? 'fixed' : '',
+        zIndex: props.zIndex
+    }
+
+    return Object.assign(style, props.customStyle)
+})
+
+const checkItem = (index: number) => {
+    if (current.value !== index) {
+        current.value = index
+        emit('change', index)
+        emit('update:modelValue', index)
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+.hy-tabbar {
+    background: v-bind(baseBackgroundColor);
+    &--indicator {
+        border: 5px solid v-bind(baseBackgroundColor);
+        &::before {
+            box-shadow: 1px -15rpx 0 v-bind(baseBackgroundColor);
+        }
+        &::after {
+            box-shadow: -1px -15rpx 0 v-bind(baseBackgroundColor);
+        }
+    }
+}
+</style>

package/components/{hy-tabBar → hy-tabbar}/index.scss

@@ -1,27 +1,26 @@
 @use "../../libs/css/theme" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-@include b(tabBar) {
-  height: 135rpx;
-  z-index: 999;
-  position: fixed;
+@include b(tabbar) {
+  height: 70px;
   bottom: 0;
+  left: 0;
+  right: 0;
+  position: relative;
   @include m(placeholder) {
-    height: 135rpx;
-    position: relative;
+    height: 137rpx;
     bottom: 0;
   }
 
   @include m(box) {
-    margin-top: 15rpx;
-    position: relative;
-    width: 100vw;
-    height: 120rpx;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 60px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 15rpx 15rpx 0 0;
-    padding: 0 20rpx;
     /* #ifndef APP-PLUS-NVUE */
     box-sizing: border-box;
     /* #endif */
@@ -30,38 +29,38 @@
   @include m(container) {
     width: 100%;
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     align-items: center;
     padding: 0 20rpx;
     &__item {
       position: relative;
-      width: 100rpx;
-      height: 70rpx;
+      width: 60px;
+      height: 100%;
       z-index: 1;
 
       /* #ifndef APP-PLUS-NVUE */
-      &:nth-child(1).is-active ~ .hy-tabBar--indicator {
+      &:nth-child(1).is-active ~ .hy-tabbar--indicator {
         transform: var(--num);
       }
 
-      &:nth-child(2).is-active ~ .hy-tabBar--indicator {
+      &:nth-child(2).is-active ~ .hy-tabbar--indicator {
         transform: var(--num);
       }
 
-      &:nth-child(3).is-active ~ .hy-tabBar--indicator {
+      &:nth-child(3).is-active ~ .hy-tabbar--indicator {
         transform: var(--num);
       }
 
-      &:nth-child(4).is-active ~ .hy-tabBar--indicator {
+      &:nth-child(4).is-active ~ .hy-tabbar--indicator {
         transform: var(--num);
       }
 
-      &:nth-child(5).is-active ~ .hy-tabBar--indicator {
+      &:nth-child(5).is-active ~ .hy-tabbar--indicator {
         transform: var(--num);
       }
       /* #endif */
 
-      &--bar {
+      @include m(bar) {
         position: relative;
         display: flex;
         justify-content: center;
@@ -91,19 +90,20 @@
           /* #ifndef APP-PLUS-NVUE */
           display: block;
           /* #endif */
-          width: 75rpx;
-          height: 75rpx;
+          width: 40px;
+          height: 40px;
           background: transparent;
           border-radius: 50%;
           border: 3rpx solid #fff;
           transform: translateY(-70rpx) scale(0);
+          z-index: -1;
         }
       }
 
       @include is(active) {
-        @include b(tabBar--container__item--bar) {
+        @include b(tabbar--container__item--bar) {
           .icon {
-            transform: translate(2rpx, -56rpx);
+            transform: translate(0, -36px);
             :deep(.hy-icon) {
               color: #FFFFFF;
             }
@@ -118,7 +118,7 @@
             transition: 0.5s;
             /* #endif */
             transition-delay: 0.5s;
-            transform: translate(2rpx, -56rpx) scale(1);
+            transform: translate(-1px, -36px) scale(1);
           }
         }
       }
@@ -127,10 +127,10 @@
 
   @include m(indicator) {
     position: absolute;
-    top: -59%;
-    left: 30rpx;
-    width: 100rpx;
-    height: 100rpx;
+    top: -36px;
+    left: 0;
+    width: 50px;
+    height: 50px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
@@ -159,7 +159,7 @@
       /* #endif */
       position: absolute;
       top: 58%;
-      right: -49rpx;
+      right: -46rpx;
       width: 50rpx;
       height: 40rpx;
       background: transparent;

package/components/hy-tabbar/props.ts

@@ -0,0 +1,59 @@
+import type { CSSProperties, PropType } from 'vue'
+import type HyBadgeProps from '../hy-badge/typing'
+
+const tabBarProps = {
+    /** 选中项的索引值 */
+    modelValue: {
+        type: Number,
+        default: 0
+    },
+    /** 导航栏数据集合 */
+    list: {
+        type: Array,
+        default: () => []
+    },
+    /** 是否固定在底部 */
+    fixed: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否显示占位元素 */
+    placeholder: {
+        type: Boolean,
+        default: false
+    },
+    zIndex: {
+        type: Number,
+        default: 10086
+    },
+    /** 图标和字体颜色 */
+    color: {
+        type: String,
+        default: ''
+    },
+    /** 轨道颜色 */
+    baseBgColor: {
+        type: String,
+        default: ''
+    },
+    /** 背景颜色 */
+    bgColor: {
+        type: String,
+        default: ''
+    },
+    /** 激活圆形背景颜色 */
+    activeColor: {
+        type: String,
+        default: ''
+    },
+    /** 徽标部分属性 */
+    badgeProps: {
+        type: Object as PropType<HyBadgeProps>
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default tabBarProps

package/components/hy-tabbar/typing.d.ts

@@ -0,0 +1,61 @@
+import type HyBadgeProps from '../hy-badge/typing'
+
+export interface TabListVo {
+    /**
+     * @description 标题
+     * */
+    name: string
+    /**
+     * @description icon图标或者图片
+     * */
+    icon: string
+    /**
+     * @description 徽标值
+     * */
+    badge?: number
+}
+
+export interface HyTabBarProps {
+    /**
+     * @description tab当前值
+     * */
+    modelValue: number
+    /**
+     * @description 导航栏值
+     * {
+     *     name: 中文名,
+     *     icon: uview-plus里面的矢量图标库
+     * }
+     * */
+    list: TabListVo[]
+    /**
+     * @description 文字颜色
+     * */
+    color?: string
+    /**
+     * @description 底部导航栏底部背景颜色（颜色设置必须要和页面背景颜色一样，才有重合感觉）
+     * 支持渐变色--linear-gradient(155deg, #192b6e, #a6307c)
+     * */
+    baseBgColor?: string
+    /**
+     * @description 底部导航栏背景颜色
+     * 支持渐变色--linear-gradient(155deg, #192b6e, #a6307c)
+     * */
+    barBgColor?: string
+    /**
+     * @description 点击突出按钮的背景颜色
+     * 支持渐变色--linear-gradient(0deg, #ffa576,#0951eb)
+     * */
+    activeColor?: string
+    /**
+     * @description 徽标属性集合
+     * */
+    badge?: Partial<HyBadgeProps>
+}
+
+export interface ITabBarEmits {
+    /** 更新选中索引 */
+    (e: 'update:modelValue', index: number): void
+    /** 变化事件 */
+    (e: 'change', index: number): void
+}