hy-app 0.2.13 → 0.2.15

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

@@ -30,16 +30,9 @@
       :displayMultipleItems="list.length > 0 ? displayMultipleItems : 0"
       :easingFunction="easingFunction"
     >
-      <swiper-item
-        class="hy-swiper__wrapper__item"
-        v-for="(item, index) in list"
-        :key="index"
-      >
+      <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)]"
-          >
+          <view class="hy-swiper__wrapper__item__wrapper" :style="[itemStyle(index)]">
             <!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
             <image
               class="hy-swiper__wrapper__item__wrapper__image"
@@ -92,142 +85,254 @@
 </template>
 
 <script lang="ts">
+/**
+ * 一般用于导航轮播，广告展示等场景,可开箱即用
+ * @displayName hy-swiper
+ */
+defineOptions({})
 export default {
   name: 'hy-swiper',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import {
-  computed,
-  toRefs,
-  ref,
-  watch,
-  getCurrentInstance,
-  type CSSProperties,
-} from "vue";
-import { addUnit, isVideo } from "../../utils";
-import defaultProps from "./props";
-import { IconConfig } from "../../config";
-import type IProps from "./typing";
-import type { SwiperVo } from "./typing";
+import { computed, toRefs, ref, watch, getCurrentInstance, type CSSProperties, PropType } from 'vue'
+import { addUnit, isVideo } from '../../utils'
+import { IconConfig } from '../../config'
+import type { ISwiperEmits, SwiperVo } from './typing'
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
-import HySwiperIndicator from "./hy-swiper-indicator.vue";
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HySwiperIndicator from './hy-swiper-indicator.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { keyName, list, current, nextMargin, previousMargin, radius } =
-  toRefs(props);
-const emit = defineEmits(["click", "update:current", "change"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = defineProps({
+  /** 轮播图数据 */
+  list: {
+    type: Array as unknown as PropType<(string | Record<string, any>)[]>,
+    default() {
+      return []
+    },
+  },
+  /** list数组中指定对象的目标属性名 */
+  keyName: {
+    type: String,
+    default: 'url',
+  },
+  /** 是否显示面板指示器 */
+  indicator: {
+    type: Boolean,
+    default: false,
+  },
+  /** 指示器非激活颜色 */
+  indicatorActiveColor: {
+    type: String,
+    default: '#FFFFFF',
+  },
+  /** 指示器的激活颜色 */
+  indicatorInactiveColor: {
+    type: String,
+    default: 'rgba(255, 255, 255, 0.35)',
+  },
+  /** 指示器样式，可通过bottom，left，right进行定位 */
+  indicatorStyle: Object as PropType<CSSProperties>,
+  /** 指示器模式 */
+  indicatorMode: {
+    type: String,
+    default: 'line',
+  },
+  /** 是否自动切换 */
+  autoplay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 当前所在滑块的 index */
+  current: {
+    type: Number,
+    default: 0,
+  },
+  /** 当前所在滑块的 item-id ，不能与 current 被同时指定 */
+  currentItemId: String,
+  /** 滑块自动切换时间间隔（ms） */
+  interval: {
+    type: Number,
+    default: 3000,
+  },
+  /** 滑块切换过程所需时间（ms） */
+  duration: {
+    type: Number,
+    default: 300,
+  },
+  /** 播放到末尾后是否重新回到开头 */
+  circular: {
+    type: Boolean,
+    default: false,
+  },
+  /** 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持 */
+  previousMargin: {
+    type: Number,
+    default: 0,
+  },
+  /** 后边距，可用于露出后一项的一小部分，nvue和支付宝不支持 */
+  nextMargin: {
+    type: Number,
+    default: 0,
+  },
+  /** 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持 */
+  acceleration: {
+    type: Boolean,
+    default: false,
+  },
+  /** 同时显示的滑块数量，nvue、支付宝小程序不支持 */
+  displayMultipleItems: {
+    type: Number,
+    default: 1,
+  },
+  /** 指定swiper切换缓动动画类型， 只对微信小程序有效 */
+  easingFunction: {
+    type: String,
+    default: 'default',
+  },
+  /** 图片的裁剪模式 */
+  imgMode: {
+    type: String,
+    default: 'aspectFill',
+  },
+  /** 组件高度 */
+  height: {
+    type: Number,
+    default: 130,
+  },
+  /** 背景颜色 */
+  bgColor: {
+    type: String,
+    default: '#f3f4f6',
+  },
+  /** 组件圆角，数值或带单位的字符串 */
+  radius: {
+    type: Number,
+    default: 4,
+  },
+  /** 轮播图是否加载中数据 */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否显示标题，要求数组对象中有title属性 */
+  showTitle: {
+    type: Boolean,
+    default: false,
+  },
+})
+const { keyName, list, current, nextMargin, previousMargin, radius } = toRefs(props)
+const emit = defineEmits<ISwiperEmits>()
 
-const instance = getCurrentInstance();
-const currentIndex = ref<string | number>(0);
+const instance = getCurrentInstance()
+const currentIndex = ref<string | number>(0)
 
 watch(
   () => current.value,
   (newVal) => {
-    currentIndex.value = newVal;
+    currentIndex.value = newVal
   },
-);
+)
 
 const hasTitle = computed(() => {
   return (item: string | Record<string, any>) => {
-    if (typeof item === "object") {
-      return item.title ?? "";
+    if (typeof item === 'object') {
+      return item.title ?? ''
     } else {
-      return "";
+      return ''
     }
-  };
-});
+  }
+})
 
 /**
  * @description 轮播图3D效果
  * */
 const itemStyle = computed(() => {
   return (index: number): CSSProperties => {
-    const style: CSSProperties = {};
+    const style: CSSProperties = {}
     // #ifndef APP-NVUE || MP-TOUTIAO
     // 左右流出空间的写法不支持nvue和头条
     // 只有配置了此二值，才加上对应的圆角，以及缩放
     if (nextMargin.value && previousMargin.value) {
-      style.borderRadius = addUnit(radius.value);
-      if (index !== currentIndex.value) style.transform = "scale(0.92)";
+      style.borderRadius = addUnit(radius.value)
+      if (index !== currentIndex.value) style.transform = 'scale(0.92)'
     }
     // #endif
-    return style;
-  };
-});
+    return style
+  }
+})
 
 /**
  * @description 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
  * */
 const getSource = (item: string | Record<string, any>): string => {
-  if (typeof item === "string") return item;
-  if (typeof item === "object" && keyName.value) return item[keyName.value];
-  return "";
-};
+  if (typeof item === 'string') return item
+  if (typeof item === 'object' && keyName.value) return item[keyName.value]
+  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);
-};
+  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(list.value[Number(index)]);
+  const lastItem = getSource(list.value[Number(index)])
   if (isVideo(lastItem)) {
     // 当视频隐藏时，暂停播放
-    const video = uni.createVideoContext(`video-${index}`, instance);
-    video.pause();
+    const video = uni.createVideoContext(`video-${index}`, instance)
+    video.pause()
   }
-};
+}
 
 /**
  * @description 当一个轮播item为视频时，获取它的视频海报
  * */
 const getPoster = (item: string | Record<string, unknown>): string => {
-  return typeof item === "object" && item.poster ? item.poster : "";
-};
+  return typeof item === 'object' && item.poster ? item.poster : ''
+}
 
 /**
  * @description 点击某个item
  * */
 const clickHandler = (index: number) => {
-  emit("click", index);
-};
+  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" && keyName.value) {
-      if (!item.type)
-        return isVideo(item[keyName.value] as string) ? "video" : "image";
-      if (item.type === "image") return "image";
-      if (item.type === "video") return "video";
-      return "image";
+    if (typeof item === 'string') return isVideo(item) ? 'video' : 'image'
+    if (typeof item === 'object' && keyName.value) {
+      if (!item.type) return isVideo(item[keyName.value] 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";
+@import './index.scss';
 </style>

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

@@ -1,107 +1,116 @@
-import type { CSSProperties, PropType } from "vue";
-import { HyApp } from "@/package/typing/modules/common";
+import type { CSSProperties, PropType } from 'vue'
+import { HyApp } from '@/package/typing/modules/common'
 
 export default interface HySwiperProps {
   /**
    * @description 轮播图数据
    * */
-  list: (string | Record<string, unknown>)[];
+  list: (string | Record<string, unknown>)[]
   /**
    * @description list数组中指定对象的目标属性名（默认 'url' ）
    * */
-  keyName?: string;
+  keyName?: string
   /**
    * @description 是否显示面板指示器（默认 false ）
    * */
-  indicator?: boolean;
+  indicator?: boolean
   /**
    * @description 指示器非激活颜色（默认 '#FFFFFF' ）
    * */
-  indicatorActiveColor?: string;
+  indicatorActiveColor?: string
   /**
    * @description 指示器的激活颜色（默认 'rgba(255, 255, 255, 0.35)' ）
    * */
-  indicatorInactiveColor?: string;
+  indicatorInactiveColor?: string
   /**
    * @description 指示器样式，可通过bottom，left，right进行定位
    * */
-  indicatorStyle?: CSSProperties;
+  indicatorStyle?: CSSProperties
   /**
    * @description 指示器模式（默认 'line' ）
    * */
-  indicatorMode?: HyApp.SwiperIndicatorModeType;
+  indicatorMode?: HyApp.SwiperIndicatorModeType
   /**
    * @description 是否自动切换（默认 true ）
    * */
-  autoplay?: boolean;
+  autoplay?: boolean
   /**
    * @description 当前所在滑块的 index（默认 0 ）
    * */
-  current?: number | string;
+  current?: number | string
   /**
    * @description 当前所在滑块的 item-id ，不能与 current 被同时指定
    * */
-  currentItemId?: string;
+  currentItemId?: string
   /**
    * @description 滑块自动切换时间间隔（ms）（默认 3000 ）
    * */
-  interval?: number;
+  interval?: number
   /**
    * @description 滑块切换过程所需时间（ms）（默认 300 ）
    * */
-  duration?: number;
+  duration?: number
   /**
    * @description 播放到末尾后是否重新回到开头（默认 false ）
    * */
-  circular?: boolean;
+  circular?: boolean
   /**
    * @description 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持（默认 0 ）
    * */
-  previousMargin?: number | string;
+  previousMargin?: number | string
   /**
    * @description 后边距，可用于露出后一项的一小部分，nvue和支付宝不支持（默认 0 ）
    * */
-  nextMargin?: number | string;
+  nextMargin?: number | string
   /**
    * @description 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持（默认 false ）
    * */
-  acceleration?: boolean;
+  acceleration?: boolean
   /**
    * @description 同时显示的滑块数量，nvue、支付宝小程序不支持（默认 1 ）
    * */
-  displayMultipleItems?: number;
+  displayMultipleItems?: number
   /**
    * @description 指定swiper切换缓动动画类型， 只对微信小程序有效（默认 'default' ）
    * */
-  easingFunction?: string;
+  easingFunction?: string
   /**
    * @description 图片的裁剪模式（默认 'aspectFill' ）
    * */
-  imgMode?: HyApp.ImageModeVo;
+  imgMode?: HyApp.ImageModeVo
   /**
    * @description 组件高度（默认 130 ）
    * */
-  height?: number;
+  height?: number
   /**
    * @description 背景颜色（默认 	'#f3f4f6' ）
    * */
-  bgColor?: string;
+  bgColor?: string
   /**
    * @description 组件圆角，数值或带单位的字符串（默认 4 ）
    * */
-  radius?: number | string;
+  radius?: number | string
   /**
    * @description 是否加载中（默认 false ）
    * */
-  loading?: boolean;
+  loading?: boolean
   /**
    * @description 是否显示标题，要求数组对象中有title属性（默认 false ）
    * */
-  showTitle?: boolean;
+  showTitle?: boolean
 }
 
 export interface SwiperVo {
   detail: {
-    current: number;
-  };
+    current: number
+  }
+}
+
+export interface ISwiperEmits {
+  /** 点击轮播图触发 */
+  (e: 'click'): void
+  /** 滑动轮播图触发 */
+  (e: 'change', temp: SwiperVo['detail']): void
+  /** 滑动轮播图触发 */
+  (e: 'update:current', value: string | number): void
 }