hy-app 0.2.13 → 0.2.15

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

@@ -2,7 +2,6 @@
   <!--注意阻止横向滑动的穿透：横向移动时阻止冒泡-->
   <view
     class="hy-swipe-action"
-    :style="customStyle"
     @click.stop="onClick()"
     @touchstart="startDrag"
     @touchmove="onDrag"
@@ -12,30 +11,19 @@
     <!--容器-->
     <view class="hy-swipe-action--wrapper" :style="wrapperStyle">
       <!--左侧操作-->
-      <view
-        :class="['hy-swipe-action--left', leftClass]"
-        @click="onClick('left')"
-      >
+      <view :class="['hy-swipe-action--left', leftClass]" @click="onClick('left')">
         <slot name="left" />
       </view>
       <!--左侧操作-->
 
       <!--内容-->
-      <view
-        :class="[
-          'hy-swipe-action--center',
-          borderBottom && 'hy-border__bottom',
-        ]"
-      >
+      <view :class="['hy-swipe-action--center', borderBottom && 'hy-border__bottom']">
         <slot></slot>
       </view>
       <!--内容-->
 
       <!--右侧操作-->
-      <view
-        :class="['hy-swipe-action--right', rightClass]"
-        @click="onClick('right')"
-      >
+      <view :class="['hy-swipe-action--right', rightClass]" @click="onClick('right')">
         <slot name="right">
           <view v-if="!slots.left" class="hy-swipe-action--right__action">
             <view
@@ -43,8 +31,9 @@
               :style="item.style"
               v-for="(item, i) in options"
               @tap.stop="onActiveClick(item, i)"
-              >{{ item.text }}</view
             >
+              {{ item.text }}
+            </view>
           </view>
         </slot>
       </view>
@@ -54,14 +43,19 @@
 </template>
 
 <script lang="ts">
+/**
+ * 常用于单元格左右滑删除等手势操作。
+ * @displayName hy-swipe-action
+ */
+defineOptions({})
 export default {
-  name: "hy-swipe-action",
+  name: 'hy-swipe-action',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 <script lang="ts" setup>
 import {
@@ -70,90 +64,126 @@ import {
   onBeforeUnmount,
   onMounted,
   ref,
-  toRefs,
   watch,
   useSlots,
-} from "vue";
-import type IProps from "./typing";
-import type {
-  SwipeActionStatus,
-  SwipeActionPosition,
-  SwipeActionReason,
-} from "./typing";
-import defaultProps from "./props";
-import { useTouch } from "../../composables";
-import { closeOther, pushToQueue, removeFromQueue } from "./index";
-import { getRect, guid } from "../../utils";
+  PropType,
+} from 'vue'
+import type { ISwipeActionEmits } from './typing'
+import type { SwipeActionStatus, SwipeActionPosition, SwipeActionReason } from './typing'
+import { useTouch } from '../../composables'
+import { closeOther, pushToQueue, removeFromQueue } from './index'
+import { getRect, guid } from '../../utils'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const {} = toRefs(props);
-const emit = defineEmits(["click", "clickAction", "update:modelValue"]);
-const leftClass = `hy-swipe-action--left--${guid()}`;
-const rightClass = `hy-swipe-action--right--${guid()}`;
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /**
+   * 滑动按钮的状态，使用v-model进行双向绑定。
+   * @values left,close,right
+   * */
+  modelValue: String,
+  /** 是否禁用滑动操作 */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /** 显示底部边框 */
+  borderBottom: {
+    type: Boolean,
+    default: false,
+  },
+  /** 右侧按钮内容 */
+  options: {
+    type: Array as unknown as PropType<SwipeActionStatus>,
+    default() {
+      return [
+        {
+          text: '收藏',
+          style: {
+            backgroundColor: '#3c9cff',
+          },
+        },
+        {
+          text: '删除',
+          style: {
+            backgroundColor: '#f56c6c',
+          },
+        },
+      ]
+    },
+  },
+  /** 动画过渡时间，单位ms */
+  duration: {
+    type: Number,
+    default: 300,
+  },
+})
+const emit = defineEmits<ISwipeActionEmits>()
+const leftClass = `hy-swipe-action--left--${guid()}`
+const rightClass = `hy-swipe-action--right--${guid()}`
 
-const slots = useSlots();
-const wrapperStyle = ref<string>("");
+const slots = useSlots()
+const wrapperStyle = ref<string>('')
 
 // 滑动开始时，wrapper的偏移量
-const originOffset = ref<number>(0);
+const originOffset = ref<number>(0)
 // wrapper现在的偏移量
-const wrapperOffset = ref<number>(0);
+const wrapperOffset = ref<number>(0)
 // 是否处于滑动状态
-const touching = ref<boolean>(false);
+const touching = ref<boolean>(false)
 
-const touch = useTouch();
+const touch = useTouch()
 
-const { proxy } = getCurrentInstance() as any;
+const { proxy } = getCurrentInstance() as any
 
 watch(
   () => props.modelValue,
   (value, old) => {
-    changeState(value, old);
+    changeState(value, old)
   },
   {
     deep: true,
   },
-);
+)
 
 onBeforeMount(() => {
-  pushToQueue(proxy);
+  pushToQueue(proxy)
   // 滑动开始时，wrapper的偏移量
-  originOffset.value = 0;
+  originOffset.value = 0
   // wrapper现在的偏移量
-  wrapperOffset.value = 0;
+  wrapperOffset.value = 0
   // 是否处于滑动状态
-  touching.value = false;
-});
+  touching.value = false
+})
 
 onMounted(() => {
-  touching.value = true;
-  changeState(props.modelValue);
-  touching.value = false;
-});
+  touching.value = true
+  changeState(props.modelValue)
+  touching.value = false
+})
 
 onBeforeUnmount(() => {
-  removeFromQueue(proxy);
-});
+  removeFromQueue(proxy)
+})
 
 function changeState(value: SwipeActionStatus, old?: SwipeActionStatus) {
   if (props.disabled) {
-    return;
+    return
   }
   getWidths().then(([leftWidth, rightWidth]) => {
     switch (value) {
-      case "close":
+      case 'close':
         // 调用此函数时，偏移量本就是0
-        if (wrapperOffset.value === 0) return;
-        close("value", old);
-        break;
-      case "left":
-        swipeMove(leftWidth);
-        break;
-      case "right":
-        swipeMove(-rightWidth);
-        break;
+        if (wrapperOffset.value === 0) return
+        close('value', old)
+        break
+      case 'left':
+        swipeMove(leftWidth)
+        break
+      case 'right':
+        swipeMove(-rightWidth)
+        break
     }
-  });
+  })
 }
 
 /**
@@ -162,103 +192,99 @@ function changeState(value: SwipeActionStatus, old?: SwipeActionStatus) {
  */
 const getWidths = (): Promise<number[]> => {
   return Promise.all([
-    getRect("." + leftClass, false, proxy).then((rect) => {
-      return rect.width ? rect.width : 0;
+    getRect('.' + leftClass, false, proxy).then((rect) => {
+      return rect.width ? rect.width : 0
     }),
-    getRect("." + rightClass, false, proxy).then((rect) => {
-      return rect.width ? rect.width : 0;
+    getRect('.' + rightClass, 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 transform = `translate3d(${offset}px, 0, 0)`
   // 跟随手指滑动，不需要动画
-  const transition = touching.value
-    ? "none"
-    : ".6s cubic-bezier(0.18, 0.89, 0.32, 1)";
+  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;
+  wrapperOffset.value = offset
 }
 /**
  * @description click的handler
- * @param event
+ * @param position
  */
 function onClick(position?: SwipeActionPosition) {
   if (props.disabled || wrapperOffset.value === 0) {
-    return;
+    return
   }
 
-  position = position || "inside";
-  close("click", position);
-  emit("click", {
-    value: position,
-  });
+  position = position || 'inside'
+  close('click', position)
+  emit('click', position)
 }
 /**
  * @description 开始滑动
  */
 function startDrag(event: TouchEvent) {
-  if (props.disabled) return;
+  if (props.disabled) return
 
-  originOffset.value = wrapperOffset.value;
-  touch.touchStart(event);
-  closeOther(proxy);
+  originOffset.value = wrapperOffset.value
+  touch.touchStart(event)
+  closeOther(proxy)
 }
 /**
  * @description 滑动时，逐渐展示按钮
  * @param event
  */
 function onDrag(event: TouchEvent) {
-  if (props.disabled) return;
+  if (props.disabled) return
 
-  touch.touchMove(event);
-  if (touch.direction.value === "vertical") {
-    return;
+  touch.touchMove(event)
+  if (touch.direction.value === 'vertical') {
+    return
   } else {
-    event.preventDefault();
-    event.stopPropagation();
+    event.preventDefault()
+    event.stopPropagation()
   }
 
-  touching.value = true;
+  touching.value = true
 
   // 本次滑动，wrapper应该设置的偏移量
-  const offset = originOffset.value + touch.deltaX.value;
+  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);
+      swipeMove(0)
+      return startDrag(event)
     }
     // 按钮已经展示完了，再滑动没有任何意义，相当于滑动结束。此时需要模拟一下位于此处的start事件。
     if (leftWidth !== 0 && offset >= leftWidth) {
-      swipeMove(leftWidth);
-      return startDrag(event);
+      swipeMove(leftWidth)
+      return startDrag(event)
     } else if (rightWidth !== 0 && -offset >= rightWidth) {
-      swipeMove(-rightWidth);
-      return startDrag(event);
+      swipeMove(-rightWidth)
+      return startDrag(event)
     }
-    swipeMove(offset);
-  });
+    swipeMove(offset)
+  })
 }
 /**
  * @description 滑动结束，自动修正位置
  */
 function endDrag() {
-  if (props.disabled) return;
+  if (props.disabled) return
   // 滑出"操作按钮"的阈值
-  const THRESHOLD = 0.3;
-  touching.value = false;
+  const THRESHOLD = 0.3
+  touching.value = false
 
   getWidths().then(([leftWidth, rightWidth]) => {
     if (
@@ -266,69 +292,69 @@ function endDrag() {
       wrapperOffset.value < 0 && // 目前仍然是右按钮
       wrapperOffset.value - originOffset.value < rightWidth * THRESHOLD // 并且滑动的范围不超过右边框阀值
     ) {
-      swipeMove(-rightWidth); // 回归右按钮
-      emit("update:modelValue", "right");
+      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");
+      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");
+      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");
+      swipeMove(leftWidth)
+      emit('update:modelValue', 'left')
     } else {
       // 回归初始状态
-      close("swipe");
+      close('swipe')
     }
-  });
+  })
 }
 /**
  * @description 关闭操过按钮，并在合适的时候调用 beforeClose
  */
 function close(reason: SwipeActionReason, position?: SwipeActionPosition) {
-  if (reason === "swipe" && originOffset.value === 0) {
+  if (reason === 'swipe' && originOffset.value === 0) {
     // offset：0 ——> offset：0
-    return swipeMove(0);
-  } else if (reason === "swipe" && originOffset.value > 0) {
+    return swipeMove(0)
+  } else if (reason === 'swipe' && originOffset.value > 0) {
     // offset > 0 ——> offset：0
-    position = "left";
-  } else if (reason === "swipe" && originOffset.value < 0) {
+    position = 'left'
+  } else if (reason === 'swipe' && originOffset.value < 0) {
     // offset < 0 ——> offset：0
-    position = "right";
+    position = 'right'
   }
 
   if (reason && position) {
-    props.beforeClose && props.beforeClose(reason, position);
+    props.beforeClose && props.beforeClose(reason, position)
   }
 
-  swipeMove(0);
-  if (props.modelValue !== "close") {
-    emit("update:modelValue", "close");
+  swipeMove(0)
+  if (props.modelValue !== 'close') {
+    emit('update:modelValue', 'close')
   }
 }
 
 const onActiveClick = (item: any, index: number) => {
-  close("click", "right");
-  emit("clickAction", index, item);
-};
+  close('click', 'right')
+  emit('clickAction', item, index)
+}
 
-defineExpose({ close });
+defineExpose({ close })
 </script>
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-swipe-action/typing.d.ts

@@ -1,53 +1,62 @@
-import type { CSSProperties, PropType } from "vue";
+import type { CSSProperties, PropType } from 'vue'
 
 interface SwipeActionOptionsVo {
-  text: string;
-  style?: CSSProperties;
-  icon?: string;
-  iconSize?: string | number;
+  text: string
+  style?: CSSProperties
+  icon?: string
+  iconSize?: string | number
 }
-export type SwipeActionStatus = "close" | "left" | "right";
+export type SwipeActionStatus = 'close' | 'left' | 'right'
 // 点击关闭按钮、滑动关闭按钮、通过控制value关闭按钮
-export type SwipeActionReason = "click" | "swipe" | "value";
-export type SwipeActionPosition = SwipeActionStatus | "inside";
+export type SwipeActionReason = 'click' | 'swipe' | 'value'
+export type SwipeActionPosition = SwipeActionStatus | 'inside'
 export type SwipeActionBeforeClose = (
   reason: SwipeActionReason,
   position: SwipeActionPosition,
-) => void;
+) => void
 
 export default interface SwipeActionProps {
   /**
    * @description 滑动按钮的状态，使用v-model进行双向绑定。
    * 选值为：'left'（左滑）、'close'（关闭状态）、'right'（右滑）。
    * */
-  modelValue?: SwipeActionStatus;
+  modelValue?: SwipeActionStatus
   /**
    * @description 是否禁用滑动操作
    * */
-  disabled?: boolean;
+  disabled?: boolean
   /**
    * @description 是否自动关闭其他swipe按钮组（默认 true ）
    * */
-  autoClose?: boolean;
+  autoClose?: boolean
   /**
    * @description 显示底部边框
    * */
-  borderBottom?: boolean;
+  borderBottom?: boolean
   /**
    * @description 右侧按钮内容
    * */
-  options?: SwipeActionOptionsVo[];
+  options?: SwipeActionOptionsVo[]
   /**
    * @description 动画过渡时间，单位ms（默认 350 ）
    * */
-  duration?: number;
+  duration?: number
   /**
    * @description 在关闭滑动按钮前调用的钩子函数
    * @desc 可以在此函数中执行一些关闭前的操作，如确认提示等。
    * */
-  beforeClose?: funtion | PropType<SwipeActionBeforeClose>;
+  beforeClose?: funtion | PropType<SwipeActionBeforeClose>
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface ISwipeActionEmits {
+  /** 当滑动按钮打开时，点击整个滑动操作容器触发 click 事件 */
+  (e: 'click', value: SwipeActionPosition): void
+  /** 点击动作执行函数 */
+  (e: 'clickAction', temp: any, index: number): void
+  /** 点击动作 */
+  (e: 'update:modelValue', value: SwipeActionStatus): void
 }