@wot-ui/ui 1.0.0 → 2.0.0-alpha.4

package/components/wd-swiper/types.ts

@@ -0,0 +1,275 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp, numericProp } from '../../common/props'
+import type { SwiperNavProps } from '../wd-swiper-nav/types'
+import type { ImageMode } from '../wd-img/types'
+
+/**
+ * 轮播滑动方向
+ */
+export type DirectionType = 'horizontal' | 'vertical'
+
+/**
+ * 切换动画
+ */
+export type EasingType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic'
+
+/**
+ * 指示器位置
+ */
+export type IndicatorPositionType = 'left' | 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'right'
+
+/**
+ * first：第一个滑块。
+ * current：实时的当前滑块。
+ * highest：高度最大的滑块。
+ * none：不根据滑块调整高度，容器高度取决于自身样式。
+ */
+export type AdjustHeightType = 'first' | 'current' | 'highest' | 'none'
+
+// 资源类型
+export type SwiperItemType = 'image' | 'video'
+
+export interface SwiperItem {
+  [key: string]: any
+  // 图片、视频等资源地址
+  value?: string
+  // 视频资源的封面
+  poster?: string
+  // 资源文件类型，可选值：'image' | 'video'
+  type?: SwiperItemType
+}
+
+export const swiperProps = {
+  ...baseProps,
+
+  /**
+   * 是否自动播放轮播图
+   * 类型：boolean
+   * 默认值：true
+   */
+  autoplay: makeBooleanProp(true),
+
+  /**
+   * 当前轮播在哪一项（下标）
+   * 类型：number
+   * 默认值：0
+   */
+  current: makeNumberProp(0),
+
+  /**
+   * 轮播滑动方向，可选值：'horizontal'（水平）或'vertical'（垂直）
+   * 类型：string
+   * 默认值：'horizontal'
+   */
+  direction: makeStringProp<DirectionType>('horizontal'),
+
+  /**
+   * 同时显示的滑块数量
+   * 类型：number
+   * 默认值：1
+   */
+  displayMultipleItems: makeNumberProp(1),
+
+  /**
+   * 滑动动画时长，单位为毫秒
+   * 类型：number
+   * 默认值：300
+   */
+  duration: makeNumberProp(300),
+
+  /**
+   * 指定 swiper 切换缓动动画类型
+   * 类型：string
+   * 默认值：'default'
+   */
+  easingFunction: makeStringProp<EasingType>('default'),
+
+  /**
+   * 轮播的高度
+   * 类型：number 或 string（数字或可转换为数字的字符串）
+   * 默认值：'192'
+   */
+  height: makeNumericProp('192'),
+
+  /**
+   * 轮播间隔时间，单位为毫秒
+   * 类型：number
+   * 默认值：5000
+   */
+  interval: makeNumberProp(5000),
+
+  /**
+   * 图片列表，可以是一个图片对象数组或字符串数组
+   * 类型：array
+   * 默认值：空数组
+   */
+  list: {
+    type: Array as PropType<SwiperItem[] | string[]>,
+    default: () => []
+  },
+
+  /**
+   * 是否循环播放轮播图
+   * 类型：boolean
+   * 默认值：true
+   */
+  loop: makeBooleanProp(true),
+
+  /**
+   * 视频是否循环播放
+   * 类型：boolean
+   * 默认值：true
+   */
+  videoLoop: makeBooleanProp(true),
+
+  /**
+   * 视频是否静音播放
+   * 类型：boolean
+   * 默认值：true
+   */
+  muted: makeBooleanProp(true),
+
+  /**
+   * 后边距
+   * 类型：number 或 string（数字或可转换为数字的字符串）
+   * 默认值：'0'
+   */
+  nextMargin: makeNumericProp('0'),
+
+  /**
+   * 页码信息展示位置，可选值：'left' | 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'right'
+   * 类型：string
+   * 默认值：'bottom'
+   */
+  indicatorPosition: makeStringProp<IndicatorPositionType>('bottom'),
+  /**
+   * 前边距
+   * 类型：number 或 string（数字或可转换为数字的字符串）
+   * 默认值：'0'
+   */
+  previousMargin: makeNumericProp('0'),
+  /**
+   * 轮播圆角
+   * 类型：number | string
+   */
+  radius: numericProp,
+  /**
+   * 是否应用边距到第一个、最后一个元素
+   * 类型：boolean
+   * 默认值：false
+   */
+  snapToEdge: makeBooleanProp(false),
+  /**
+   * 指示器全部配置，可以是布尔值或指示器配置对象
+   * 类型：boolean 或 object
+   * 默认值：true
+   */
+  indicator: {
+    type: [Boolean, Object] as PropType<boolean | Partial<SwiperNavProps>>,
+    default: true
+  },
+
+  /**
+   * 图片裁剪、缩放的模式
+   * 类型：string
+   * 默认值：'aspectFill'
+   */
+  imageMode: makeStringProp<ImageMode>('aspectFill'),
+  /**
+   * 开启长按图片显示识别小程序码菜单
+   * 类型：boolean
+   * 默认值：false
+   */
+  showMenuByLongpress: makeBooleanProp(false),
+  /**
+   * 选项对象中，value 对应的 key
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 选项对象中，标题 text 对应的 key
+   */
+  textKey: makeStringProp('text'),
+  /**
+   * 视频是否自动播放
+   * 类型：boolean
+   * 默认值：true
+   */
+  autoplayVideo: makeBooleanProp(true),
+  /**
+   * 切换轮播项时是否停止上一个视频的播放
+   * 类型：boolean
+   * 默认值：true
+   */
+  stopPreviousVideo: makeBooleanProp(true),
+  /**
+   * 视频播放时是否停止自动轮播
+   * 类型：boolean
+   * 默认值：false
+   */
+  stopAutoplayWhenVideoPlay: makeBooleanProp(false),
+  /**
+   * 自动以指定滑块的高度为整个容器的高度。当 vertical 为 true 时，默认不调整
+   * 仅支付宝小程序支持
+   * 类型：'first' | 'current' | 'highest' | 'none'
+   * 默认值：false
+   */
+  adjustHeight: makeStringProp<AdjustHeightType>('highest'),
+  /**
+   * vertical 为 true 时强制使 adjust-height 生效。
+   * 仅支付宝小程序支持
+   * 类型：boolean
+   * 默认值：false
+   */
+  adjustVerticalHeight: makeBooleanProp(false),
+  /**
+   * 自定义指示器类名
+   * 类型：string
+   */
+  customIndicatorClass: makeStringProp(''),
+
+  /**
+   * 自定义图片类名
+   * 类型：string
+   */
+  customImageClass: makeStringProp(''),
+
+  /**
+   * 自定义上一个图片类名
+   * 类型：string
+   */
+  customPrevImageClass: makeStringProp(''),
+
+  /**
+   * 自定义下一个图片类名
+   * 类型：string
+   */
+  customNextImageClass: makeStringProp(''),
+
+  /**
+   * 自定义swiper子项类名
+   * 类型：string
+   */
+  customItemClass: makeStringProp(''),
+  /**
+   * 自定义上一个子项类名
+   * 类型：string
+   */
+  customPrevClass: makeStringProp(''),
+  /**
+   * 自定义下一个子项类名
+   * 类型：string
+   */
+  customNextClass: makeStringProp(''),
+  /**
+   * 自定义文字标题类名
+   * 类型：string
+   */
+  customTextClass: makeStringProp(''),
+  /**
+   * 自定义文字标题样式
+   * 类型：string
+   */
+  customTextStyle: makeStringProp('')
+}
+
+export type SwiperProps = ExtractPropTypes<typeof swiperProps>

package/components/wd-swiper/wd-swiper.vue

@@ -0,0 +1,332 @@
+<template>
+  <view :class="`wd-swiper ${customClass}`" :style="customStyle">
+    <!-- #ifdef MP-WEIXIN -->
+    <scroll-view scroll-x scroll-y style="width: 100%; height: 100%">
+      <!-- #endif -->
+      <swiper
+        :adjust-height="adjustHeight"
+        :adjust-vertical-height="adjustVerticalHeight"
+        class="wd-swiper__track"
+        :autoplay="autoplay && !videoPlaying"
+        :current="navCurrent"
+        :interval="interval"
+        :duration="duration"
+        :circular="loop"
+        :vertical="direction == 'vertical'"
+        :easing-function="easingFunction"
+        :previous-margin="addUnit(previousMargin)"
+        :next-margin="addUnit(nextMargin)"
+        :snap-to-edge="snapToEdge"
+        :display-multiple-items="displayMultipleItems"
+        :style="swiperStyle"
+        @change="handleChange"
+        @animationfinish="handleAnimationfinish"
+      >
+        <swiper-item v-for="(item, index) in list" :key="index" :class="swiperItemClass">
+          <slot :item="item" :index="index">
+            <video
+              v-if="isVideo(item)"
+              :id="`video-${index}-${uid}`"
+              :style="{ height: addUnit(height) }"
+              :src="isObj(item) ? item[valueKey] : item"
+              :poster="isObj(item) ? item.poster : ''"
+              :class="`wd-swiper__video ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
+              @play="handleVideoPaly"
+              @pause="handleVideoPause"
+              :enable-progress-gesture="false"
+              :loop="videoLoop"
+              :muted="muted"
+              :autoplay="autoplayVideo"
+              objectFit="cover"
+              @click="handleClick(index, item)"
+            />
+            <image
+              v-else
+              :src="isObj(item) ? item[valueKey] : item"
+              :class="`wd-swiper__image ${customImageClass} ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
+              :style="{ height: addUnit(height) }"
+              :mode="imageMode"
+              :show-menu-by-longpress="showMenuByLongpress"
+              @click="handleClick(index, item)"
+            />
+            <text v-if="isObj(item) && item[textKey]" :class="`wd-swiper__text ${customTextClass}`" :style="customTextStyle">
+              {{ item[textKey] }}
+            </text>
+          </slot>
+        </swiper-item>
+      </swiper>
+      <!-- #ifdef MP-WEIXIN -->
+    </scroll-view>
+    <!-- #endif -->
+
+    <template v-if="indicator">
+      <slot name="indicator" :current="currentValue" :total="list.length"></slot>
+      <wd-swiper-nav
+        v-if="!$slots.indicator"
+        :custom-class="customIndicatorClass"
+        :type="swiperIndicator.type"
+        :current="swiperIndicator.current"
+        :total="swiperIndicator.total"
+        :direction="swiperIndicator.direction"
+        :indicator-position="swiperIndicator.indicatorPosition"
+        :min-show-num="swiperIndicator.minShowNum"
+        :show-controls="swiperIndicator.showControls"
+        @change="handleIndicatorChange"
+      />
+    </template>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-swiper',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdSwiperNav from '../wd-swiper-nav/wd-swiper-nav.vue'
+import { computed, watch, ref, getCurrentInstance, useSlots, type CSSProperties } from 'vue'
+import { addUnit, isObj, isImageUrl, isVideoUrl, uuid, isDef, objToStyle } from '../../common/util'
+import { swiperProps, type SwiperItem } from './types'
+import type { SwiperNavProps } from '../wd-swiper-nav/types'
+const slots = useSlots()
+
+const props = defineProps(swiperProps)
+const emit = defineEmits(['click', 'change', 'animationfinish', 'update:current'])
+const navCurrent = ref<number>(props.current) // 当前滑块 swiper使用
+const currentValue = ref<number>(props.current) // 当前滑块
+
+/**
+ * 更新当前滑块
+ * @param current 当前滑块索引
+ * @param force 是否强制更新swiper绑定的的current
+ */
+const updateCurrent = (current: number, force: boolean = false) => {
+  currentValue.value = current
+  if (force) {
+    navCurrent.value = current
+  }
+  emit('update:current', current)
+}
+
+const videoPlaying = ref<boolean>(false) // 当前是否在播放视频
+
+const { proxy } = getCurrentInstance() as any
+
+const uid = ref<string>(uuid())
+
+watch(
+  () => props.current,
+  (val) => {
+    if (val < 0) {
+      props.loop ? goToEnd() : goToStart()
+    } else if (val >= props.list.length) {
+      props.loop ? goToStart() : goToEnd()
+    } else {
+      navTo(val)
+    }
+  }
+)
+
+const swiperStyle = computed(() => {
+  const style: CSSProperties = {
+    height: addUnit(props.height)
+  }
+
+  if (isDef(props.radius)) {
+    style.borderRadius = addUnit(props.radius)
+  }
+  return objToStyle(style)
+})
+
+const swiperItemClass = computed(() => {
+  return `wd-swiper__item ${slots.default ? 'wd-swiper__item--slot' : ''}`
+})
+
+const swiperIndicator = computed(() => {
+  const { list, direction, indicatorPosition, indicator } = props
+  const swiperIndicator: Partial<SwiperNavProps> = {
+    current: currentValue.value || 0,
+    total: list.length || 0,
+    direction: direction || 'horizontal',
+    indicatorPosition: indicatorPosition || 'bottom'
+  }
+  if (isObj(indicator)) {
+    swiperIndicator.type = indicator.type || 'dots'
+    swiperIndicator.minShowNum = indicator.minShowNum || 2
+    swiperIndicator.showControls = indicator.showControls || false
+  }
+  return swiperIndicator
+})
+
+const getMediaType = (item: string | SwiperItem, type: 'video' | 'image') => {
+  const checkType = (url: string) => (type === 'video' ? isVideoUrl(url) : isImageUrl(url))
+
+  if (isObj(item)) {
+    return item.type && ['video', 'image'].includes(item.type) ? item.type === type : checkType(item[props.valueKey])
+  } else {
+    return checkType(item)
+  }
+}
+
+const isVideo = (item: string | SwiperItem) => {
+  return getMediaType(item, 'video')
+}
+
+const isImage = (item: string | SwiperItem) => {
+  return getMediaType(item, 'image')
+}
+
+function navTo(index: number) {
+  if (index === currentValue.value) return
+  updateCurrent(index, true)
+}
+
+function goToStart() {
+  navTo(0)
+}
+
+function goToEnd() {
+  navTo(props.list.length - 1)
+}
+
+// 视频播放
+function handleVideoPaly() {
+  props.stopAutoplayWhenVideoPlay && (videoPlaying.value = true)
+}
+
+// 视频暂停
+function handleVideoPause() {
+  videoPlaying.value = false
+}
+
+/**
+ * 是否为当前滑块的前一个滑块
+ * @param current
+ * @param index
+ * @param list
+ */
+function isPrev(current: number, index: number, list: string[] | SwiperItem[]) {
+  return (current - 1 + list.length) % list.length === index
+}
+
+/**
+ * 是否为当前滑块的后一个滑块
+ * @param current
+ * @param index
+ * @param list
+ */
+function isNext(current: number, index: number, list: string[] | SwiperItem[]) {
+  return (current + 1 + list.length) % list.length === index
+}
+
+function getCustomItemClass(current: number, index: number, list: string[] | SwiperItem[]) {
+  let customItemClass: string = ''
+  if (isPrev(current, index, list)) {
+    customItemClass = props.customPrevClass || props.customPrevImageClass
+  }
+  if (isNext(current, index, list)) {
+    customItemClass = props.customNextClass || props.customNextImageClass
+  }
+  return customItemClass
+}
+
+/**
+ * 轮播滑块切换时触发
+ */
+function handleChange(e: { detail: { current: number; source: string } }) {
+  const { current, source } = e.detail
+  const previous = currentValue.value
+  emit('change', { current, source })
+  if (current !== currentValue.value) {
+    const forceUpdate = source === 'autoplay' || source === 'touch'
+    updateCurrent(current, forceUpdate)
+  }
+  handleVideoChange(previous, current)
+}
+
+/**
+ * 处理视频切换
+ */
+function handleVideoChange(previous: number, current: number) {
+  handleStopVideoPaly(previous)
+  handleStartVideoPaly(current)
+}
+
+/**
+ * 开始播放指定视频
+ * @param index
+ */
+function handleStartVideoPaly(index: number) {
+  if (props.autoplayVideo) {
+    const currentItem = props.list[index]
+    if (isDef(currentItem) && isVideo(currentItem)) {
+      const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
+      video.play()
+    }
+  }
+}
+
+/**
+ * 停止播放指定视频
+ * @param index
+ */
+function handleStopVideoPaly(index: number) {
+  if (props.stopPreviousVideo) {
+    const previousItem = props.list[index]
+    if (isDef(previousItem) && isVideo(previousItem)) {
+      const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
+      video.pause()
+    }
+  } else if (props.stopAutoplayWhenVideoPlay) {
+    handleVideoPause()
+  }
+}
+
+/**
+ * 滑块动画结束
+ */
+function handleAnimationfinish(e: { detail: { current: any; source: string } }) {
+  const { current, source } = e.detail
+  if (current !== currentValue.value) {
+    const forceUpdate = source === 'autoplay' || source === 'touch'
+    updateCurrent(current, forceUpdate)
+  }
+  /**
+   * 滑块动画结束时触发
+   */
+  emit('animationfinish', { current, source })
+}
+
+/**
+ * 点击滑块事件
+ * @param index 点击的滑块下标
+ * @param item 点击的滑块内容
+ */
+function handleClick(index: number, item: string | SwiperItem) {
+  emit('click', { index, item })
+}
+
+function handleIndicatorChange({ dir }: { dir: 'prev' | 'next' }) {
+  const { list, loop } = props
+  const total = list.length
+  let nextPos = dir === 'next' ? currentValue.value + 1 : currentValue.value - 1
+  if (loop) {
+    nextPos = dir === 'next' ? (currentValue.value + 1) % total : (currentValue.value - 1 + total) % total
+  } else {
+    nextPos = nextPos < 0 || nextPos >= total ? currentValue.value : nextPos
+  }
+  if (nextPos === currentValue.value) return
+  navTo(nextPos)
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>