hy-app 0.6.5 → 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">
-                <HySwiperIndicator
-                    v-if="!loading && indicator && !showTitle"
-                    :indicatorActiveColor="indicatorActiveColor"
-                    :indicatorInactiveColor="indicatorInactiveColor"
-                    :length="list.length"
-                    :current="currentIndex"
-                    :indicatorMode="indicatorMode"
-                ></HySwiperIndicator>
-            </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/index.scss

@@ -51,14 +51,14 @@
 
 
 @include b(swiper-indicator) {
-  &__wrapper {
+  @include e(wrapper) {
     @include flex;
 
-    &--line {
+    @include m(line){
       border-radius: 100px;
       height: 4px;
 
-      &__bar {
+      @include e(bar) {
         width: 22px;
         height: 4px;
         border-radius: $hy-border-radius-semicircle;
@@ -67,13 +67,13 @@
       }
     }
 
-    &__dot {
+    @include m(dot) {
       width: 5px;
       height: 5px;
       border-radius: $hy-border-radius-semicircle;
       margin: 0 $hy-border-margin-padding-sm;
 
-      &--active {
+      @include e(active) {
         width: 12px;
       }
     }

package/components/hy-swiper/props.ts

@@ -1,6 +1,5 @@
 import type { SwiperList } from './typing'
 import type { CSSProperties, PropType } from 'vue'
-import type { SwiperEasingFunction } from '@uni-helper/uni-types'
 
 const swiperProps = {
     /** 轮播图数据 */
@@ -100,7 +99,7 @@ const swiperProps = {
     },
     /** 组件高度 */
     height: {
-        type: Number,
+        type: [String, Number],
         default: 130
     },
     /** 背景颜色 */

package/components/hy-tabs/hy-tabs.vue

@@ -58,24 +58,24 @@
                                             item?.badge?.value)
                                     )
                                 "
-                                :isDot="(item?.badge && item?.badge?.isDot) || propsBadge?.isDot"
-                                :value="(item?.badge && item?.badge?.value) || propsBadge?.value"
-                                :max="(item?.badge && item?.badge?.max) || propsBadge?.max"
-                                :type="(item?.badge && item?.badge?.type) || propsBadge?.type"
+                                :isDot="(item?.badge && item?.badge?.isDot) || badgeProps?.isDot"
+                                :value="(item?.badge && item?.badge?.value) || badgeProps?.value"
+                                :max="(item?.badge && item?.badge?.max) || badgeProps?.max"
+                                :type="(item?.badge && item?.badge?.type) || badgeProps?.type"
                                 :showZero="
-                                    (item?.badge && item?.badge?.showZero) || propsBadge?.showZero
+                                    (item?.badge && item?.badge?.showZero) || badgeProps?.showZero
                                 "
                                 :bgColor="
-                                    (item?.badge && item?.badge?.bgColor) || propsBadge?.bgColor
+                                    (item?.badge && item?.badge?.bgColor) || badgeProps?.bgColor
                                 "
-                                :color="(item?.badge && item?.badge?.color) || propsBadge?.color"
-                                :shape="(item?.badge && item?.badge?.shape) || propsBadge?.shape"
+                                :color="(item?.badge && item?.badge?.color) || badgeProps?.color"
+                                :shape="(item?.badge && item?.badge?.shape) || badgeProps?.shape"
                                 :numberType="
                                     (item?.badge && item?.badge?.numberType) ||
-                                    propsBadge?.numberType
+                                    badgeProps?.numberType
                                 "
                                 :inverted="
-                                    (item?.badge && item?.badge?.inverted) || propsBadge?.inverted
+                                    (item?.badge && item?.badge?.inverted) || badgeProps?.inverted
                                 "
                                 :customStyle="{
                                     marginLeft: '4px'
@@ -103,20 +103,20 @@
             </view>
             <slot name="right" />
         </view>
-
-        <!-- 内容轮播图	-->
-        <slot v-if="$slots.main" name="main"></slot>
-        <swiper
-            v-else-if="list.length"
-            :current="innerCurrent"
-            @animationfinish="animationFinish"
-            :style="{ height: swiperHeight }"
-        >
-            <swiper-item class="swiper-item" v-for="(item, i) in list" :key="i">
-                <slot :record="item" :index="i" />
-            </swiper-item>
-        </swiper>
     </view>
+
+    <!-- 内容轮播图	-->
+    <slot v-if="$slots.main" name="main"></slot>
+    <swiper
+        v-else-if="isSwiper || list.length"
+        :current="innerCurrent"
+        @animationfinish="animationFinish"
+        :style="{ height: swiperHeight }"
+    >
+        <swiper-item class="swiper-item" v-for="(item, i) in list" :key="i">
+            <slot :record="item" :index="i" />
+        </swiper-item>
+    </swiper>
 </template>
 
 <script lang="ts">
@@ -325,6 +325,7 @@ const animationFinish = (e: any) => {
     innerCurrent.value = e.detail.current
     resize()
     if (e.detail.source === 'touch') {
+        emit('update:current', innerCurrent.value)
         emit('change', props.list[innerCurrent.value], innerCurrent.value)
     }
 }

package/components/hy-tabs/props.ts

@@ -55,7 +55,7 @@ const tabsProps = {
     /** 轮播图高度 */
     swiperHeight: {
         type: [String, Number],
-        default: 'calc(100vh - 44px)'
+        default: 'calc(100% - 44px)'
     },
     /** 菜单是否可滚动 */
     scrollable: {
@@ -63,9 +63,16 @@ const tabsProps = {
         default: true
     },
     /**
-     * @description 徽标props全局定义
+     * 徽标props全局定义
      * */
-    propsBadge: Object as PropType<HyBadgeProps>,
+    badgeProps: Object as PropType<HyBadgeProps>,
+    /**
+     * 是否出现内容轮播
+     * */
+    isSwiper: {
+        type: Boolean,
+        default: false
+    },
     /** 标签左侧图标样式自定义 */
     iconStyle: Object as PropType<CSSProperties>,
     /** 定义需要用到的外部样式 */