hy-app 0.6.6 → 0.6.7

package/components/hy-swiper/hy-swiper.vue

@@ -1,224 +1,230 @@
-<template>
-    <view
-        class="hy-swiper"
-        :style="{
-            backgroundColor: bgColor,
-            height: addUnit(height),
-            borderRadius: addUnit(radius)
-        }"
-    >
-        <view class="hy-swiper__loading" v-if="loading">
-            <hy-loading mode="circle"></hy-loading>
-        </view>
-        <swiper
-            v-else
-            class="hy-swiper__wrapper"
-            :style="{
-                flex: '1',
-                height: addUnit(height)
-            }"
-            @change="change"
-            :circular="circular"
-            :interval="interval"
-            :duration="duration"
-            :autoplay="autoplay"
-            :current="current"
-            :currentItemId="currentItemId"
-            :previousMargin="addUnit(previousMargin)"
-            :nextMargin="addUnit(nextMargin)"
-            :acceleration="acceleration"
-            :displayMultipleItems="list.length > 0 ? displayMultipleItems : 0"
-            :easingFunction="easingFunction"
-        >
-            <swiper-item
-                class="hy-swiper__wrapper--item"
-                v-for="(item, index) in list"
-                :key="index"
-            >
-                <slot :record="item" :index="index">
-                    <view class="hy-swiper__wrapper--item__wrapper" :style="[itemStyle(index)]">
-                        <!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
-                        <image
-                            class="hy-swiper__wrapper--item__wrapper--image"
-                            v-if="getItemType(item) === 'image'"
-                            :src="getSource(item)"
-                            :mode="imgMode"
-                            @tap="clickHandler(index)"
-                            :style="{
-                                height: addUnit(height),
-                                borderRadius: addUnit(radius)
-                            }"
-                        ></image>
-                        <video
-                            class="hy-swiper__wrapper--item__wrapper--video"
-                            v-if="getItemType(item) === 'video'"
-                            :id="`video-${index}`"
-                            :enable-progress-gesture="false"
-                            :src="getSource(item)"
-                            :poster="getPoster(item)"
-                            :title="showTitle && hasTitle(item)"
-                            :style="{
-                                height: addUnit(height)
-                            }"
-                            controls
-                            @tap="clickHandler(index)"
-                        ></video>
-                        <view
-                            v-if="showTitle && hasTitle(item)"
-                            class="hy-swiper__wrapper--item__wrapper--title"
-                        >
-                            <text class="hy-line-1">{{ hasTitle(item) }}</text>
-                        </view>
-                    </view>
-                </slot>
-            </swiper-item>
-        </swiper>
-        <view class="hy-swiper__indicator" :style="[indicatorStyle]">
-            <slot name="indicator" :current="currentIndex" :length="list.length">
-                <hy-swiper-indicator
-                    v-if="!loading && indicator && !showTitle"
-                    :indicatorActiveColor="indicatorActiveColor"
-                    :indicatorInactiveColor="indicatorInactiveColor"
-                    :length="list.length"
-                    :current="currentIndex"
-                    :indicatorMode="indicatorMode"
-                ></hy-swiper-indicator>
-            </slot>
-        </view>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-swiper',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { computed, ref, watch, getCurrentInstance } from 'vue'
-import type { CSSProperties } from 'vue'
-import { addUnit, isVideo } from '../../libs'
-import type { ISwiperEmits, SwiperList, SwiperVo } from './typing'
-import swiperProps from './props'
-// 组件
-import HyLoading from '../hy-loading/hy-loading.vue'
-import HySwiperIndicator from './hy-swiper-indicator.vue'
-
-/**
- * 一般用于导航轮播，广告展示等场景,可开箱即用
- * @displayName hy-swiper
- */
-defineOptions({})
-
-const props = defineProps(swiperProps)
-const emit = defineEmits<ISwiperEmits>()
-
-const instance = getCurrentInstance()
-const currentIndex = ref<string | number>(0)
-
-watch(
-    () => props.current,
-    (newVal) => {
-        currentIndex.value = newVal
-    }
-)
-
-const hasTitle = computed(() => {
-    return (item: string | Record<string, any>) => {
-        if (typeof item === 'object') {
-            return item.title || ''
-        } else {
-            return ''
-        }
-    }
-})
-
-/**
- * @description 轮播图3D效果
- * */
-const itemStyle = computed(() => {
-    return (index: number): CSSProperties => {
-        const style: CSSProperties = {}
-        // #ifndef APP-NVUE || MP-TOUTIAO
-        // 左右流出空间的写法不支持nvue和头条
-        // 只有配置了此二值，才加上对应的圆角，以及缩放
-        if (props.nextMargin && props.previousMargin) {
-            style.borderRadius = addUnit(props.radius)
-            if (index !== currentIndex.value) style.transform = 'scale(0.92)'
-        }
-        // #endif
-        return style
-    }
-})
-
-/**
- * @description 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
- * */
-const getSource = (item: string | Record<string, any>): string => {
-    if (typeof item === 'string') return item
-    if (typeof item === 'object' && props.keyName) return item[props.keyName]
-    return ''
-}
-
-/**
- * @description 轮播切换事件
- */
-const change = (e: SwiperVo) => {
-    // 当前的激活索引
-    const { current } = e.detail
-    pauseVideo(currentIndex.value)
-    currentIndex.value = current
-    emit('update:current', currentIndex.value)
-    emit('change', e.detail)
-}
-
-/**
- * @description 切换轮播时，暂停视频播放
- * */
-const pauseVideo = (index: number | string) => {
-    const lastItem = getSource(props.list[Number(index)])
-    if (isVideo(lastItem)) {
-        // 当视频隐藏时，暂停播放
-        const video = uni.createVideoContext(`video-${index}`, instance)
-        video.pause()
-    }
-}
-
-/**
- * @description 当一个轮播item为视频时，获取它的视频海报
- * */
-const getPoster = (item: string | SwiperList): string => {
-    return typeof item === 'object' && item.poster ? item.poster : ''
-}
-
-/**
- * @description 点击某个item
- * */
-const clickHandler = (index: number) => {
-    emit('click', index)
-}
-
-/**
- * @description 判断链接是视频还是图片
- * */
-const getItemType = computed(() => {
-    return (item: string | Record<string, unknown>) => {
-        if (typeof item === 'string') return isVideo(item) ? 'video' : 'image'
-        if (typeof item === 'object' && props.keyName) {
-            if (!item.type) return isVideo(item[props.keyName] as string) ? 'video' : 'image'
-            if (item.type === 'image') return 'image'
-            if (item.type === 'video') return 'video'
-            return 'image'
-        }
-    }
-})
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <view
+        class="hy-swiper"
+        :style="{
+            backgroundColor: bgColor,
+            height: addUnit(height),
+            borderRadius: addUnit(radius)
+        }"
+    >
+        <view class="hy-swiper__loading" v-if="loading">
+            <hy-loading mode="circle"></hy-loading>
+        </view>
+        <swiper
+            v-else
+            class="hy-swiper__wrapper"
+            :style="{
+                flex: '1',
+                height: addUnit(height)
+            }"
+            @change="change"
+            :circular="circular"
+            :interval="interval"
+            :duration="duration"
+            :autoplay="autoplay"
+            :current="current"
+            :currentItemId="currentItemId"
+            :previousMargin="addUnit(previousMargin)"
+            :nextMargin="addUnit(nextMargin)"
+            :acceleration="acceleration"
+            :displayMultipleItems="list.length > 0 ? displayMultipleItems : 0"
+            :easingFunction="easingFunction"
+        >
+            <swiper-item
+                class="hy-swiper__wrapper--item"
+                v-for="(item, index) in list"
+                :key="index"
+            >
+                <slot v-if="$slots.default" :record="item" :index="index"> </slot>
+                <view v-else class="hy-swiper__wrapper--item__wrapper" :style="[itemStyle(index)]">
+                    <!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
+                    <image
+                        class="hy-swiper__wrapper--item__wrapper--image"
+                        v-if="getItemType(item) === 'image'"
+                        :src="getSource(item)"
+                        :mode="imgMode"
+                        @tap="clickHandler(index)"
+                        :style="{
+                            height: addUnit(height),
+                            borderRadius: addUnit(radius)
+                        }"
+                    ></image>
+                    <video
+                        class="hy-swiper__wrapper--item__wrapper--video"
+                        v-if="getItemType(item) === 'video'"
+                        :id="`video-${index}`"
+                        :enable-progress-gesture="false"
+                        :src="getSource(item)"
+                        :poster="getPoster(item)"
+                        :title="showTitle && hasTitle(item)"
+                        :style="{
+                            height: addUnit(height)
+                        }"
+                        controls
+                        @tap="clickHandler(index)"
+                    ></video>
+                    <view
+                        v-if="showTitle && hasTitle(item)"
+                        class="hy-swiper__wrapper--item__wrapper--title"
+                    >
+                        <text class="hy-line-1">{{ hasTitle(item) }}</text>
+                    </view>
+                </view>
+            </swiper-item>
+        </swiper>
+        <view class="hy-swiper__indicator" :style="[indicatorStyle]">
+            <slot
+                v-if="$slots.indicator"
+                name="indicator"
+                :current="currentIndex"
+                :length="list.length"
+            >
+            </slot>
+            <hy-swiper-indicator
+                v-else-if="!loading && indicator && !showTitle"
+                :indicatorActiveColor="indicatorActiveColor"
+                :indicatorInactiveColor="indicatorInactiveColor"
+                :length="list.length"
+                :current="currentIndex"
+                :indicatorMode="indicatorMode"
+            ></hy-swiper-indicator>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-swiper',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch, getCurrentInstance } from 'vue'
+import type { CSSProperties } from 'vue'
+import { addUnit, isVideo } from '../../libs'
+import type { ISwiperEmits, SwiperList, SwiperVo } from './typing'
+import swiperProps from './props'
+// 组件
+import HyLoading from '../hy-loading/hy-loading.vue'
+import HySwiperIndicator from './hy-swiper-indicator.vue'
+
+/**
+ * 一般用于导航轮播，广告展示等场景,可开箱即用
+ * @displayName hy-swiper
+ */
+defineOptions({})
+
+const props = defineProps(swiperProps)
+const emit = defineEmits<ISwiperEmits>()
+
+const instance = getCurrentInstance()
+const currentIndex = ref<string | number>(0)
+
+watch(
+    () => props.current,
+    (newVal) => {
+        currentIndex.value = newVal
+    }
+)
+
+const hasTitle = computed(() => {
+    return (item: string | Record<string, any>) => {
+        if (typeof item === 'object') {
+            return item.title || ''
+        } else {
+            return ''
+        }
+    }
+})
+
+/**
+ * 轮播图3D效果
+ * */
+const itemStyle = computed(() => {
+    return (index: number): CSSProperties => {
+        const style: CSSProperties = {}
+        // #ifndef APP-NVUE || MP-TOUTIAO
+        // 左右流出空间的写法不支持nvue和头条
+        // 只有配置了此二值，才加上对应的圆角，以及缩放
+        if (props.nextMargin && props.previousMargin) {
+            style.borderRadius = addUnit(props.radius)
+            if (index !== currentIndex.value) style.transform = 'scale(0.92)'
+        }
+        // #endif
+        return style
+    }
+})
+
+/**
+ * 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
+ * */
+const getSource = (item: string | Record<string, any>): string => {
+    if (typeof item === 'string') return item
+    if (typeof item === 'object' && props.keyName) return item[props.keyName]
+    return ''
+}
+
+/**
+ * 轮播切换事件
+ */
+const change = (e: SwiperVo) => {
+    // 当前的激活索引
+    const { current } = e.detail
+    pauseVideo(currentIndex.value)
+    currentIndex.value = current
+    emit('update:current', currentIndex.value)
+    emit('change', e.detail)
+}
+
+/**
+ * 切换轮播时，暂停视频播放
+ * */
+const pauseVideo = (index: number | string) => {
+    const lastItem = getSource(props.list[Number(index)])
+    if (isVideo(lastItem)) {
+        // 当视频隐藏时，暂停播放
+        // #ifdef MP-WEIXIN
+        const video = uni.createVideoContext(`video-${index}`, instance)
+        video.pause()
+        // #endif
+    }
+}
+
+/**
+ * 当一个轮播item为视频时，获取它的视频海报
+ * */
+const getPoster = (item: string | SwiperList): string => {
+    return typeof item === 'object' && item.poster ? item.poster : ''
+}
+
+/**
+ * 点击某个item
+ * */
+const clickHandler = (index: number) => {
+    emit('click', index)
+}
+
+/**
+ * 判断链接是视频还是图片
+ * */
+const getItemType = computed(() => {
+    return (item: string | Record<string, unknown>) => {
+        if (typeof item === 'string') return isVideo(item) ? 'video' : 'image'
+        if (typeof item === 'object' && props.keyName) {
+            if (!item.type) return isVideo(item[props.keyName] as string) ? 'video' : 'image'
+            if (item.type === 'image') return 'image'
+            if (item.type === 'video') return 'video'
+            return 'image'
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-swiper/props.ts

@@ -99,7 +99,7 @@ const swiperProps = {
     },
     /** 组件高度 */
     height: {
-        type: Number,
+        type: [String, Number],
         default: 130
     },
     /** 背景颜色 */

package/libs/composables/useShakeService.ts

@@ -1,64 +1,64 @@
-/**
- * 摇一摇传感器hooks
- * */
-import { ref } from "vue";
-import type { Ref } from "vue";
-import { debounce } from "../../libs";
-
-interface Acceleration {
-  x: number;
-  y: number;
-  z: number;
-}
-
-export function useShakeService(shakeThreshold: number = 30) {
-  const lastAcceleration: Ref<Acceleration> = ref({ x: 0, y: 0, z: 0 });
-  const lastTime: Ref<number> = ref(Date.now());
-  const shakeCallback: Ref<null | (() => void)> = ref(null);
-
-  const startShakeListener = (callback: () => void): void => {
-    shakeCallback.value = callback;
-    uni.startAccelerometer({
-      success: () => {
-        uni.onAccelerometerChange(handleShake);
-      },
-      fail: (err: any) => {
-        console.error("加速度传感器启动失败", err.errMsg);
-      },
-    });
-  };
-
-  const stopShakeListener = (): void => {
-    uni.stopAccelerometer().then(
-      (res) => {
-        uni.offAccelerometerChange(handleShake);
-      },
-      (err) => console.error("加速度传感器关闭失败", err.errMsg),
-    );
-  };
-
-  const handleShake = (res: Acceleration): void => {
-    const acceleration = res;
-    const currentTime = Date.now();
-    const timeDiff = (currentTime - lastTime.value) / 1000; // 转换为秒
-
-    // 计算加速度的欧几里得距离
-    const deltaX = acceleration.x - lastAcceleration.value.x;
-    const deltaY = acceleration.y - lastAcceleration.value.y;
-    const deltaZ = acceleration.z - lastAcceleration.value.z;
-    const speed =
-      Math.sqrt(deltaX * deltaX + deltaY * deltaY + deltaZ * deltaZ) / timeDiff;
-
-    if (speed > shakeThreshold && shakeCallback.value) {
-      debounce(shakeCallback.value, 500);
-    }
-
-    lastAcceleration.value = acceleration;
-    lastTime.value = currentTime;
-  };
-
-  return {
-    startShakeListener,
-    stopShakeListener,
-  };
-}
+/**
+ * 摇一摇传感器hooks
+ * */
+import { ref } from "vue";
+import type { Ref } from "vue";
+import { debounce } from "../../libs";
+
+interface Acceleration {
+  x: number;
+  y: number;
+  z: number;
+}
+
+export function useShakeService(shakeThreshold: number = 30) {
+  const lastAcceleration: Ref<Acceleration> = ref({ x: 0, y: 0, z: 0 });
+  const lastTime: Ref<number> = ref(Date.now());
+  const shakeCallback: Ref<null | (() => void)> = ref(null);
+
+  const startShakeListener = (callback: () => void): void => {
+    shakeCallback.value = callback;
+    uni.startAccelerometer({
+      success: () => {
+        uni.onAccelerometerChange(handleShake);
+      },
+      fail: (err: any) => {
+        console.error("加速度传感器启动失败", err.errMsg);
+      },
+    });
+  };
+
+  const stopShakeListener = (): void => {
+    uni.stopAccelerometer().then(
+      (res) => {
+        uni.offAccelerometerChange(handleShake);
+      },
+      (err) => console.error("加速度传感器关闭失败", err.errMsg),
+    );
+  };
+
+  const handleShake = (res: Acceleration): void => {
+    const acceleration = res;
+    const currentTime = Date.now();
+    const timeDiff = (currentTime - lastTime.value) / 1000; // 转换为秒
+
+    // 计算加速度的欧几里得距离
+    const deltaX = acceleration.x - lastAcceleration.value.x;
+    const deltaY = acceleration.y - lastAcceleration.value.y;
+    const deltaZ = acceleration.z - lastAcceleration.value.z;
+    const speed =
+      Math.sqrt(deltaX * deltaX + deltaY * deltaY + deltaZ * deltaZ) / timeDiff;
+
+    if (speed > shakeThreshold && shakeCallback.value) {
+      debounce(shakeCallback.value, 500);
+    }
+
+    lastAcceleration.value = acceleration;
+    lastTime.value = currentTime;
+  };
+
+  return {
+    startShakeListener,
+    stopShakeListener,
+  };
+}

package/libs/utils/utils.ts

@@ -433,6 +433,7 @@ const getRect = <T extends boolean>(
             } else if (!all && rect) {
                 resolve(rect as HyUtils.RectResultType<T>)
             } else {
+                console.log(rect)
                 error(`调用getRect方法，没有找到${selector}对应的元素内容`)
                 reject(new Error('No nodes found'))
             }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hy-app",
-    "version": "0.6.6",
+    "version": "0.6.7",
     "description": "📱一个基于vue3+ts构建的uni-app组件库,拥有八十多个精美组件，适配多端，支持自定义主题",
     "main": "./index.ts",
     "private": false,