feat: ✨ Swiper 支持指定轮播项的文件类型 (#720)

✅ Closes: #712
Moonofweisheng · Nov 18, 2024 · 1e039cb · 1e039cb
1 parent 314c2e8
commit 1e039cb
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 16 deletions.
diff --git a/docs/component/swiper.md b/docs/component/swiper.md
@@ -346,7 +346,13 @@ const isLoop = ref(false)
 
 ### SwiperList
 
-轮播图项的列表配置，包括 图片或视频地址`value`、视频封面`poster` 等属性，支持扩展属性。
+轮播图项的列表配置，包括 图片或视频地址`value`、视频封面`poster` 、文件资源的类型`type`等属性，支持扩展属性。指定`type`后组件将不在内部判断文件类型，以`type`为准。
+| name      | 说明          | 最低版本 |
+| --------- | ------------ | -------- |
+| value | 图片或视频地址 |-   |
+| poster | 视频封面 |-   |
+| type | 用于指定文件资源的类型，可选值`image`、`video` | $LOWEST_VERSION$ |
+
 
 ### SwiperIndicatorProps
 

diff --git a/src/uni_modules/wot-design-uni/components/wd-swiper/types.ts b/src/uni_modules/wot-design-uni/components/wd-swiper/types.ts
@@ -26,12 +26,17 @@ export type IndicatorPositionType = 'left' | 'top-left' | 'top' | 'top-right' |
  */
 export type AdjustHeightType = 'first' | 'current' | 'highest' | 'none'
 
+// 资源类型
+export type SwiperItemType = 'image' | 'video'
+
 export interface SwiperList {
   [key: string]: any
   // 图片、视频等资源地址
   value?: string
   // 视频资源的封面
   poster?: string
+  // 资源文件类型，可选值：'image' | 'video'
+  type?: SwiperItemType
 }
 
 export const swiperProps = {

diff --git a/src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue b/src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue
@@ -21,14 +21,14 @@
     >
       <swiper-item v-for="(item, index) in list" :key="index" class="wd-swiper__item" @click="handleClick(index, item)">
         <image
-          v-if="isImageUrl(isObj(item) ? item[valueKey] : item)"
+          v-if="isImage(item)"
           :src="isObj(item) ? item[valueKey] : item"
           :class="`wd-swiper__image ${customImageClass} ${customItemClass} ${getCustomItemClass(navCurrent, index, list)}`"
           :style="{ height: addUnit(height) }"
           :mode="imageMode"
         />
         <video
-          v-else
+          v-else-if="isVideo(item)"
           :id="`video-${index}-${uid}`"
           :style="{ height: addUnit(height) }"
           :src="isObj(item) ? item[valueKey] : item"
@@ -77,7 +77,7 @@ export default {
 <script lang="ts" setup>
 import wdSwiperNav from '../wd-swiper-nav/wd-swiper-nav.vue'
 import { computed, watch, ref, getCurrentInstance } from 'vue'
-import { addUnit, isObj, isImageUrl, isVideoUrl, uuid } from '../common/util'
+import { addUnit, isObj, isImageUrl, isVideoUrl, uuid, isDef } from '../common/util'
 import { swiperProps, type SwiperList } from './types'
 import type { SwiperNavProps } from '../wd-swiper-nav/types'
 
@@ -122,6 +122,22 @@ const swiperIndicator = computed(() => {
   return swiperIndicator
 })
 
+const getMediaType = (item: string | SwiperList, type: 'video' | 'image') => {
+  if (isObj(item)) {
+    return item.type ? item.type === type : type === 'video' ? isVideoUrl(item[props.valueKey]) : isImageUrl(item[props.valueKey])
+  } else {
+    return type === 'video' ? isVideoUrl(item) : isImageUrl(item)
+  }
+}
+
+const isVideo = (item: string | SwiperList) => {
+  return getMediaType(item, 'video')
+}
+
+const isImage = (item: string | SwiperList) => {
+  return getMediaType(item, 'image')
+}
+
 function go(index: number) {
   navCurrent.value = index
 }
@@ -205,12 +221,9 @@ function handleVideoChange(previous: number, current: number) {
 function handleStartVideoPaly(index: number) {
   if (props.autoplayVideo) {
     const currentItem = props.list[index]
-    if (currentItem) {
-      const url = isObj(currentItem) ? currentItem.url : currentItem
-      if (isVideoUrl(url)) {
-        const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
-        video.play()
-      }
+    if (isDef(currentItem) && isVideo(currentItem)) {
+      const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
+      video.play()
     }
   }
 }
@@ -222,12 +235,9 @@ function handleStartVideoPaly(index: number) {
 function handleStopVideoPaly(index: number) {
   if (props.stopPreviousVideo) {
     const previousItem = props.list[index]
-    if (previousItem) {
-      const url = isObj(previousItem) ? previousItem.url : previousItem
-      if (isVideoUrl(url)) {
-        const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
-        video.pause()
-      }
+    if (isDef(previousItem) && isVideo(previousItem)) {
+      const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
+      video.pause()
     }
   } else if (props.stopAutoplayWhenVideoPlay) {
     handleVideoPause()