@tplc/wot 0.0.1

package/components/wd-swipe-action/wd-swipe-action.vue

@@ -0,0 +1,307 @@
+<template>
+  <!--注意阻止横向滑动的穿透：横向移动时阻止冒泡-->
+  <view
+    :class="`wd-swipe-action ${customClass}`"
+    :style="customStyle"
+    @click.stop="onClick()"
+    @touchstart="startDrag"
+    @touchmove="onDrag"
+    @touchend="endDrag"
+    @touchcancel="endDrag"
+  >
+    <!--容器-->
+    <view class="wd-swipe-action__wrapper" :style="wrapperStyle">
+      <!--左侧操作-->
+      <view class="wd-swipe-action__left" @click="onClick('left')">
+        <slot name="left" />
+      </view>
+      <!--内容-->
+      <slot />
+      <!--右侧操作-->
+      <view class="wd-swipe-action__right" @click="onClick('right')">
+        <slot name="right" />
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-swipe-action',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+<script lang="ts" setup>
+import {
+  getCurrentInstance,
+  inject,
+  onBeforeMount,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue'
+import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
+import { type Queue, queueKey } from '../composables/useQueue'
+import { useTouch } from '../composables/useTouch'
+import { getRect } from '../common/util'
+import {
+  swipeActionProps,
+  type SwipeActionPosition,
+  type SwipeActionReason,
+  type SwipeActionStatus,
+} from './types'
+
+const props = defineProps(swipeActionProps)
+const emit = defineEmits(['click', 'update:modelValue'])
+
+const queue = inject<Queue | null>(queueKey, null)
+
+const wrapperStyle = ref<string>('')
+
+// 滑动开始时，wrapper的偏移量
+const originOffset = ref<number>(0)
+// wrapper现在的偏移量
+const wrapperOffset = ref<number>(0)
+// 是否处于滑动状态
+const touching = ref<boolean>(false)
+
+const touch = useTouch()
+
+const { proxy } = getCurrentInstance() as any
+
+watch(
+  () => props.modelValue,
+  (value, old) => {
+    changeState(value, old)
+  },
+  {
+    deep: true,
+  },
+)
+
+onBeforeMount(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy)
+  } else {
+    pushToQueue(proxy)
+  }
+  // 滑动开始时，wrapper的偏移量
+  originOffset.value = 0
+  // wrapper现在的偏移量
+  wrapperOffset.value = 0
+  // 是否处于滑动状态
+  touching.value = false
+})
+
+onMounted(() => {
+  touching.value = true
+  changeState(props.modelValue)
+  touching.value = false
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+function changeState(value: SwipeActionStatus, old?: SwipeActionStatus) {
+  if (props.disabled) {
+    return
+  }
+  getWidths().then(([leftWidth, rightWidth]) => {
+    switch (value) {
+      case 'close':
+        // 调用此函数时，偏移量本就是0
+        if (wrapperOffset.value === 0) return
+        close('value', old)
+        break
+      case 'left':
+        swipeMove(leftWidth)
+        break
+      case 'right':
+        swipeMove(-rightWidth)
+        break
+    }
+  })
+}
+
+/**
+ * @description 获取左/右操作按钮的宽度
+ * @return {Promise<[Number, Number]>} 左宽度、右宽度
+ */
+function getWidths() {
+  return Promise.all([
+    getRect('.wd-swipe-action__left', false, proxy).then((rect) => {
+      return rect.width ? rect.width : 0
+    }),
+    getRect('.wd-swipe-action__right', false, proxy).then((rect) => {
+      return rect.width ? rect.width : 0
+    }),
+  ])
+}
+/**
+ * @description wrapper滑动函数
+ * @param {Number} offset 滑动漂移量
+ */
+function swipeMove(offset = 0) {
+  // this.offset = offset
+  const transform = `translate3d(${offset}px, 0, 0)`
+  // 跟随手指滑动，不需要动画
+  const transition = touching.value ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)'
+  wrapperStyle.value = `
+        -webkit-transform: ${transform};
+        -webkit-transition: ${transition};
+        transform: ${transform};
+        transition: ${transition};
+      `
+  // 记录容器当前偏移的量
+  wrapperOffset.value = offset
+}
+/**
+ * @description click的handler
+ * @param event
+ */
+function onClick(position?: SwipeActionPosition) {
+  if (props.disabled || wrapperOffset.value === 0) {
+    return
+  }
+
+  position = position || 'inside'
+  close('click', position)
+  emit('click', {
+    value: position,
+  })
+}
+/**
+ * @description 开始滑动
+ */
+function startDrag(event: TouchEvent) {
+  if (props.disabled) return
+
+  originOffset.value = wrapperOffset.value
+  touch.touchStart(event)
+  if (queue && queue.closeOther) {
+    queue.closeOther(proxy)
+  } else {
+    closeOther(proxy)
+  }
+}
+/**
+ * @description 滑动时，逐渐展示按钮
+ * @param event
+ */
+function onDrag(event: TouchEvent) {
+  if (props.disabled) return
+
+  touch.touchMove(event)
+  if (touch.direction.value === 'vertical') {
+    return
+  } else {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  touching.value = true
+
+  // 本次滑动，wrapper应该设置的偏移量
+  const offset = originOffset.value + touch.deltaX.value
+  getWidths().then(([leftWidth, rightWidth]) => {
+    // 如果需要想滑出来的按钮不存在，对应的按钮肯定滑不出来，容器处于初始状态。此时需要模拟一下位于此处的start事件。
+    if ((leftWidth === 0 && offset > 0) || (rightWidth === 0 && offset < 0)) {
+      swipeMove(0)
+      return startDrag(event)
+    }
+    // 按钮已经展示完了，再滑动没有任何意义，相当于滑动结束。此时需要模拟一下位于此处的start事件。
+    if (leftWidth !== 0 && offset >= leftWidth) {
+      swipeMove(leftWidth)
+      return startDrag(event)
+    } else if (rightWidth !== 0 && -offset >= rightWidth) {
+      swipeMove(-rightWidth)
+      return startDrag(event)
+    }
+    swipeMove(offset)
+  })
+}
+/**
+ * @description 滑动结束，自动修正位置
+ */
+function endDrag() {
+  if (props.disabled) return
+  // 滑出"操作按钮"的阈值
+  const THRESHOLD = 0.3
+  touching.value = false
+
+  getWidths().then(([leftWidth, rightWidth]) => {
+    if (
+      originOffset.value < 0 && // 之前展示的是右按钮
+      wrapperOffset.value < 0 && // 目前仍然是右按钮
+      wrapperOffset.value - originOffset.value < rightWidth * THRESHOLD // 并且滑动的范围不超过右边框阀值
+    ) {
+      swipeMove(-rightWidth) // 回归右按钮
+      emit('update:modelValue', 'right')
+    } else if (
+      originOffset.value > 0 && // 之前展示的是左按钮
+      wrapperOffset.value > 0 && // 现在仍然是左按钮
+      originOffset.value - wrapperOffset.value < leftWidth * THRESHOLD // 并且滑动的范围不超过左按钮阀值
+    ) {
+      swipeMove(leftWidth) // 回归左按钮
+      emit('update:modelValue', 'left')
+    } else if (
+      rightWidth > 0 &&
+      originOffset.value >= 0 && // 之前是初始状态或者展示左按钮显
+      wrapperOffset.value < 0 && // 现在展示右按钮
+      Math.abs(wrapperOffset.value) > rightWidth * THRESHOLD // 视图中已经展示的右按钮长度超过阀值
+    ) {
+      swipeMove(-rightWidth)
+      emit('update:modelValue', 'right')
+    } else if (
+      leftWidth > 0 &&
+      originOffset.value <= 0 && // 之前初始状态或者右按钮显示
+      wrapperOffset.value > 0 && // 现在左按钮
+      Math.abs(wrapperOffset.value) > leftWidth * THRESHOLD // 视图中已经展示的左按钮长度超过阀值
+    ) {
+      swipeMove(leftWidth)
+      emit('update:modelValue', 'left')
+    } else {
+      // 回归初始状态
+      close('swipe')
+    }
+  })
+}
+/**
+ * @description 关闭操过按钮，并在合适的时候调用 beforeClose
+ */
+function close(reason: SwipeActionReason, position?: SwipeActionPosition) {
+  if (reason === 'swipe' && originOffset.value === 0) {
+    // offset：0 ——> offset：0
+    return swipeMove(0)
+  } else if (reason === 'swipe' && originOffset.value > 0) {
+    // offset > 0 ——> offset：0
+    position = 'left'
+  } else if (reason === 'swipe' && originOffset.value < 0) {
+    // offset < 0 ——> offset：0
+    position = 'right'
+  }
+
+  if (reason && position) {
+    props.beforeClose && props.beforeClose(reason, position)
+  }
+
+  swipeMove(0)
+  if (props.modelValue !== 'close') {
+    emit('update:modelValue', 'close')
+  }
+}
+
+defineExpose({ close })
+</script>
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-swiper/index.scss

@@ -0,0 +1,23 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(swiper) {
+  position: relative;
+  @include e(track) {
+    overflow: hidden;
+    border-radius: $-swiper-radius;
+    transform: translateY(0);
+  }
+
+  @include e(item) {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding: $-swiper-item-padding;
+  }
+
+  @include e(image) {
+    width: 100%;
+    transition: all 0.3s ease;
+  }
+}

package/components/wd-swiper/types.ts

@@ -0,0 +1,189 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import {
+  baseProps,
+  makeBooleanProp,
+  makeNumberProp,
+  makeNumericProp,
+  makeStringProp,
+} 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'
+
+export interface SwiperList {
+  [key: string]: any
+  value?: string
+}
+
+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<SwiperList[] | string[]>,
+    default: () => [],
+  },
+
+  /**
+   * 是否循环播放轮播图
+   * 类型：boolean
+   * 默认值：true
+   */
+  loop: makeBooleanProp(true),
+
+  /**
+   * 后边距
+   * 类型：number 或 string（数字或可转换为数字的字符串）
+   * 默认值：'0'
+   */
+  nextMargin: makeNumericProp('0'),
+
+  /**
+   * 页码信息展示位置，可选值：'bottom'（底部）等
+   * 类型：string
+   * 默认值：'bottom'
+   */
+  indicatorPosition: makeStringProp<IndicatorPositionType>('bottom'),
+
+  /**
+   * 前边距
+   * 类型：number 或 string（数字或可转换为数字的字符串）
+   * 默认值：'0'
+   */
+  previousMargin: makeNumericProp('0'),
+
+  /**
+   * 是否应用边距到第一个、最后一个元素
+   * 类型：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'),
+  /**
+   * 选项对象中，value 对应的 key
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 自定义指示器类名
+   * 类型：string
+   */
+  customIndicatorClass: makeStringProp(''),
+
+  /**
+   * 自定义图片类名
+   * 类型：string
+   */
+  customImageClass: makeStringProp(''),
+
+  /**
+   * 自定义上一个图片类名
+   * 类型：string
+   */
+  customPrevImageClass: makeStringProp(''),
+
+  /**
+   * 自定义下一个图片类名
+   * 类型：string
+   */
+  customNextImageClass: makeStringProp(''),
+}
+
+export type SwiperProps = ExtractPropTypes<typeof swiperProps>

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

@@ -0,0 +1,202 @@
+<template>
+  <view :class="`wd-swiper ${customClass}`" :style="customStyle">
+    <swiper
+      class="wd-swiper__track"
+      :autoplay="autoplay"
+      :current="current"
+      :interval="interval"
+      :duration="duration"
+      :circular="loop"
+      :vertical="direction == 'vertical'"
+      :easing-function="easingFunction"
+      :previous-margin="previousMargin"
+      :next-margin="nextMargin"
+      :snap-to-edge="snapToEdge"
+      :display-multiple-items="displayMultipleItems"
+      :style="{ height: addUnit(height) }"
+      @change="handleChange"
+      @animationfinish="handleAnimationfinish"
+    >
+      <swiper-item
+        v-for="(item, index) in list"
+        :key="index"
+        class="wd-swiper__item"
+        @click="handleClick(index, item)"
+      >
+        <image
+          :src="isObj(item) ? item[valueKey] : item"
+          :class="`wd-swiper__image ${customImageClass} ${getCustomImageClass(navCurrent, index, list)}`"
+          :style="{ height: addUnit(height) }"
+          :mode="imageMode"
+        />
+      </swiper-item>
+    </swiper>
+
+    <template v-if="indicator">
+      <slot name="indicator" :current="navCurrent" :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" setup>
+import { computed, watch, ref } from 'vue'
+import { addUnit, isObj } from '../common/util'
+import { swiperProps, type SwiperList } from './types'
+import type { SwiperNavProps } from '../wd-swiper-nav/types'
+
+const props = defineProps(swiperProps)
+const emit = defineEmits(['click', 'change', 'animationfinish', 'update:current'])
+const navCurrent = ref<number>(0) // 当前滑块
+
+watch(
+  () => props.current,
+  (val) => {
+    if (val < 0) {
+      props.loop ? goToEnd() : goToStart()
+    } else if (val >= props.list.length) {
+      props.loop ? goToStart() : goToEnd()
+    } else {
+      go(val)
+    }
+    emit('update:current', navCurrent.value)
+  },
+  { immediate: true },
+)
+
+const swiperIndicator = computed(() => {
+  const { list, direction, indicatorPosition, indicator } = props
+  const swiperIndicator: Partial<SwiperNavProps> = {
+    current: navCurrent.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
+})
+
+function go(index: number) {
+  navCurrent.value = index
+}
+
+function goToStart() {
+  navCurrent.value = 0
+}
+
+function goToEnd() {
+  navCurrent.value = props.list.length - 1
+}
+
+/**
+ * 是否为当前滑块的前一个滑块
+ * @param current
+ * @param index
+ * @param list
+ */
+function isPrev(current: number, index: number, list: string[] | SwiperList[]) {
+  return (current - 1 + list.length) % list.length === index
+}
+
+/**
+ * 是否为当前滑块的后一个滑块
+ * @param current
+ * @param index
+ * @param list
+ */
+function isNext(current: number, index: number, list: string[] | SwiperList[]) {
+  return (current + 1 + list.length) % list.length === index
+}
+
+function getCustomImageClass(current: number, index: number, list: string[] | SwiperList[]) {
+  let customImageClass: string = ''
+  if (isPrev(current, index, list)) {
+    customImageClass = props.customPrevImageClass
+  }
+  if (isNext(current, index, list)) {
+    customImageClass = props.customNextImageClass
+  }
+  return customImageClass
+}
+
+/**
+ * 轮播滑块切换时触发
+ * @param e
+ */
+function handleChange(e: { detail: { current: any; source: string } }) {
+  const { current, source } = e.detail
+  navCurrent.value = current
+  // #ifndef MP-WEIXIN
+  emit('update:current', navCurrent.value)
+  // #endif
+  emit('change', { current, source })
+}
+
+/**
+ * 滑块动画结束
+ */
+function handleAnimationfinish(e: { detail: { current: any; source: string } }) {
+  const { current, source } = e.detail
+  // #ifdef MP-WEIXIN
+  // 兼容微信swiper抖动的问题
+  emit('update:current', navCurrent.value)
+  // #endif
+
+  /**
+   * 滑块动画结束时触发
+   */
+  emit('animationfinish', { current, source })
+}
+
+/**
+ * 点击滑块事件
+ * @param index 点击的滑块下标
+ * @param item 点击的滑块内容
+ */
+function handleClick(index: number, item: string | SwiperList) {
+  emit('click', { index, item })
+}
+
+function handleIndicatorChange(e: { dir: any; source: string }) {
+  const { dir, source } = e
+  doIndicatorBtnChange(dir, source)
+}
+
+function doIndicatorBtnChange(dir: string, source: string) {
+  const { list, loop } = props
+  const total = list.length
+  let nextPos = dir === 'next' ? navCurrent.value + 1 : navCurrent.value - 1
+
+  if (loop) {
+    nextPos =
+      dir === 'next' ? (navCurrent.value + 1) % total : (navCurrent.value - 1 + total) % total
+  } else {
+    nextPos = nextPos < 0 || nextPos >= total ? navCurrent.value : nextPos
+  }
+
+  if (nextPos === navCurrent.value) return
+
+  navCurrent.value = nextPos
+  emit('change', { current: nextPos, source })
+  emit('update:current', navCurrent.value)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>