hy-app 0.5.13 → 0.5.14

package/components/hy-index-bar/hy-index-bar.vue

@@ -0,0 +1,197 @@
+<template>
+    <view class="hy-index-bar" :class="indexBarClass" :style="indexBarStyle">
+        <view class="hy-index-bar__index--list">
+            <view
+                v-for="(item, index) in indexList"
+                :key="index"
+                class="hy-index-bar__index--list__item"
+                :class="{ 'is-active': modelValue === indexValue(item) }"
+                :style="getIndexItemStyle(indexValue(item))"
+                @click="handleIndexClick(indexValue(item), $event)"
+                @touchstart="handleTouchStart($event)"
+                @touchmove="handleTouchMove($event)"
+                @touchend="handleTouchEnd"
+            >
+                {{ indexValue(item) }}
+            </view>
+
+            <!-- 索引字母提示 -->
+            <hy-transition :show="showToast && isTouching" :customStyle="toastStyle">
+                <view class="hy-index-bar__toast">
+                    <text class="hy-index-bar__toast--text">{{ modelValue }}</text>
+                </view>
+            </hy-transition>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-index-bar',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, getCurrentInstance, nextTick } from 'vue'
+import type { CSSProperties } from 'vue'
+import type { IIndexBarEmits, IIndexItem } from './typing'
+import { addUnit, getRect, sleep } from '../../libs'
+import indexBarProps from './props'
+// 组件
+import HyTransition from '../hy-transition/hy-transition.vue'
+
+/**
+ * 索引栏组件,用于快速定位列表内容的索引栏组件，支持点击和滑动两种交互方式
+ * @displayName hy-index-bar
+ */
+defineOptions({})
+
+const props = defineProps(indexBarProps)
+const emit = defineEmits<IIndexBarEmits>()
+
+// 获取当前组件实例
+const instance = getCurrentInstance()
+
+// 使用props中的activeIndex，同时保持内部状态用于点击事件
+const isTouching = ref<boolean>(false)
+const lastIndex = ref<string>('')
+const toastStyle = ref<CSSProperties>({
+    position: 'absolute',
+    left: '-150rpx',
+    zIndex: 10
+})
+// 缓存索引栏高度和索引项高度
+const indexBarRect = ref<UniNamespace.NodeInfo>()
+const itemHeight = ref<number>(0)
+
+const indexBarClass = computed<string[]>(() => {
+    return [`hy-index-bar--${props.position}`]
+})
+
+const indexBarStyle = computed<CSSProperties>(() => {
+    return {
+        width: addUnit(props.width),
+        height: addUnit(props.height),
+        ...props.customStyle
+    }
+})
+
+const indexValue = computed(() => {
+    return (item: IIndexItem) => {
+        return typeof item === 'object' && item !== null ? item.index : item
+    }
+})
+
+// 缓存索引项样式，避免重复计算
+const indexItemStyles = computed(() => {
+    // 计算通用样式部分
+    const commonStyle = {
+        width: addUnit(props.width),
+        height: addUnit(props.width),
+        fontSize: addUnit(props.indexSize)
+    } as CSSProperties
+    console.log(
+        props.indexList.reduce((styles: Record<string, CSSProperties>, item: IIndexItem) => {
+            const isActive = props.modelValue === indexValue.value(item)
+            styles[indexValue.value(item)] = {
+                ...commonStyle,
+                color: isActive ? props.activeIndexColor : props.indexColor,
+                backgroundColor: isActive ? props.activeIndexBgColor : props.indexBgColor
+            }
+            return styles
+        }, {})
+    )
+
+    // 为每个索引项创建样式对象并缓存
+    return props.indexList.reduce((styles: Record<string, CSSProperties>, item: IIndexItem) => {
+        const isActive = props.modelValue === indexValue.value(item)
+        styles[indexValue.value(item)] = {
+            ...commonStyle,
+            color: isActive ? props.activeIndexColor : props.indexColor,
+            backgroundColor: isActive ? props.activeIndexBgColor : props.indexBgColor
+        }
+        return styles
+    }, {})
+})
+
+// 获取索引项样式的便捷方法
+const getIndexItemStyle = (index: string) => {
+    console.log(index, '===')
+    return indexItemStyles.value[index] || {}
+}
+
+const handleIndexClick = (index: string, event: any) => {
+    emit('update:modelValue', index)
+    emit('click', index, event)
+}
+
+const handleTouchStart = (event: any) => {
+    isTouching.value = true
+    handleTouchMove(event)
+}
+
+// 触摸移动事件处理
+const handleTouchMove = (event: any) => {
+    // 获取触摸点坐标
+    const touch = event.touches ? event.touches[0] : event
+    const touchY = (touch.clientY || touch.y) - indexBarRect.value?.top!
+
+    // 计算当前触摸的索引位置
+    const index = Math.min(
+        Math.max(Math.floor(touchY / itemHeight.value), 0),
+        props.indexList.length - 1
+    )
+
+    const clickedIndex = props.indexList[index]?.index || props.indexList[index]
+    if (clickedIndex) {
+        // 只有当索引发生变化时才更新activeIndex
+        if (clickedIndex !== props.modelValue) {
+            emit('update:modelValue', clickedIndex)
+            emit('scroll', clickedIndex)
+        }
+
+        // 只有当索引发生变化时才更新toast
+        if (clickedIndex !== lastIndex.value) {
+            lastIndex.value = clickedIndex
+
+            // 计算Toast的位置 - 使其与当前索引项对齐
+            let toastTop =
+                indexBarRect.value?.top! + index * itemHeight.value - 25 + itemHeight.value / 2
+            // #ifdef H5
+            toastTop = toastTop + 44 // h5需要加上导航栏高度
+            // #endif
+            toastStyle.value.top = addUnit(toastTop)
+        }
+    }
+}
+
+const handleTouchEnd = async () => {
+    await sleep(1000)
+    isTouching.value = false
+}
+
+/**
+ * 获取列表元素属性值
+ * */
+const init = () => {
+    nextTick(() => {
+        getRect('.hy-index-bar__index--list', false, instance).then((rect) => {
+            indexBarRect.value = rect
+            itemHeight.value = rect.height! / props.indexList.length
+        })
+    })
+}
+
+onMounted(() => {
+    init()
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-index-bar/index.scss

@@ -0,0 +1,65 @@
+@use "../../libs/css/mixin" as *;
+@use "../../libs/css/theme" as *;
+
+@include b(index-bar) {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+
+  @include m(left) {
+    left: 0;
+  }
+
+  @include m(right) {
+    right: 0;
+  }
+
+  @include e(index) {
+    @include m(list) {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-right: $hy-border-margin-padding-base;
+
+      @include e(item) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: $hy-text-color--3;
+        margin: 2rpx 0;
+        border-radius: $hy-border-radius-sm;
+
+        @include is(active) {
+          position: relative;
+          color: $hy-primary;
+          background: $hy-background--hover;
+        }
+      }
+    }
+  }
+
+  @include e(toast) {
+    width: 50px;
+    height: 50px;
+    border-radius: 100px 100px 0 100px;
+    text-align: center;
+    color: #ffffff;
+    background-color: #c9c9c9;
+    transform: rotate(-45deg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    @include m(text) {
+      transform: rotate(45deg);
+      font-size: $hy-font-size-lg;
+    }
+  }
+}

package/components/hy-index-bar/props.ts

@@ -0,0 +1,94 @@
+import type { CSSProperties, PropType } from 'vue'
+import type { IIndexItem } from './typing'
+
+const indexBarProps = {
+    /**
+     * 当前激活的索引
+     */
+    modelValue: {
+        type: String,
+        default: '',
+        required: true
+    },
+    /**
+     * 索引列表数据
+     */
+    indexList: {
+        type: Array as PropType<IIndexItem[]>,
+        default: () => []
+    },
+    /**
+     * 索引栏位置
+     * @values left, right
+     */
+    position: {
+        type: String,
+        default: 'right'
+    },
+    /**
+     * 是否显示索引字母提示
+     */
+    showToast: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 索引项颜色
+     */
+    indexColor: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 激活索引项颜色
+     */
+    activeIndexColor: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 索引项背景色
+     */
+    indexBgColor: {
+        type: String,
+        default: 'transparent'
+    },
+    /**
+     * 激活索引项背景色
+     */
+    activeIndexBgColor: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 索引项大小
+     */
+    indexSize: {
+        type: [Number, String],
+        default: 12
+    },
+    /**
+     * 索引栏高度
+     */
+    height: {
+        type: [Number, String],
+        default: '100%'
+    },
+    /**
+     * 索引栏宽度
+     */
+    width: {
+        type: [Number, String],
+        default: 20
+    },
+    /**
+     * 自定义样式
+     */
+    customStyle: Object as PropType<CSSProperties>,
+    /**
+     * 自定义外部类名
+     */
+    customClass: String
+} as const
+
+export default indexBarProps

package/components/hy-index-bar/typing.d.ts

@@ -0,0 +1,36 @@
+import type { ExtractPropTypes } from 'vue'
+import type indexBarProps from './props'
+
+export interface HyIndexBarProps extends ExtractPropTypes<typeof indexBarProps> {}
+
+export interface IndexType {
+    /**
+     * 索引值
+     */
+    index: string
+    /**
+     * 索引对应的内容
+     */
+    title: string
+    /**
+     * 索引对应的列表数据
+     */
+    data?: any[]
+}
+
+export interface IIndexItem extends IndexType {}
+
+export interface IIndexBarEmits {
+    /**
+     * 点击索引时触发的事件
+     */
+    (e: 'click', index: string, event: Event): void
+    /**
+     * 滚动到指定索引时触发的事件
+     */
+    (e: 'scroll', index: string): void
+    /**
+     * 改变索引值
+     */
+    (e: 'update:modelValue', index: string): void
+}