hy-app 0.1.2 → 0.1.4

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

@@ -0,0 +1,294 @@
+<template>
+  <view class="hy-swipe-action" :style="customStyle">
+    <template
+      v-for="(fatherItem, fatherI) in swipeActionList"
+      :key="fatherItem?.[key] || fatherI"
+    >
+      <view class="u-swipe-action-item" ref="u-swipe-action-item">
+        <!--	右侧操作按钮	-->
+        <view class="u-swipe-action-item__right">
+          <slot name="button">
+            <view
+              v-for="(item, index) in options"
+              :key="index"
+              class="u-swipe-action-item__right__button"
+              :ref="`u-swipe-action-item__right__button-${index}`"
+              :style="{
+                alignItems: item?.style?.borderRadius ? 'center' : 'stretch',
+              }"
+              @tap="buttonClickHandler(item, index, fatherI)"
+            >
+              <view
+                class="u-swipe-action-item__right__button__wrapper"
+                :style="operateItemStyle(item?.style)"
+              >
+                <u-icon
+                  v-if="item.icon"
+                  :name="item.icon"
+                  :color="item?.style?.color || '#ffffff'"
+                  :size="
+                    item.iconSize
+                      ? addUnit(item.iconSize)
+                      : item.style && item.style.fontSize
+                        ? getPx(item.style.fontSize) * 1.2
+                        : 17
+                  "
+                  :customStyle="{
+                    marginRight: item.text ? '2px' : 0,
+                  }"
+                ></u-icon>
+                <text
+                  v-if="item.text"
+                  class="u-swipe-action-item__right__button__wrapper__text u-line-1"
+                  :style="operateTextStyle(item?.style)"
+                  >{{ item.text }}</text
+                >
+              </view>
+            </view>
+          </slot>
+        </view>
+        <!--	右侧操作按钮	-->
+
+        <!--  左侧内容  -->
+        <!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5  -->
+        <view
+          class="u-swipe-action-item__content"
+          @touchstart="wxs.touchstart"
+          @touchmove="wxs.touchmove"
+          @touchend="wxs.touchend"
+          :status="fatherItem.status"
+          :change:status="wxs.statusChange"
+          :size="size"
+          :change:size="wxs.sizeChange"
+        >
+          <slot :record="fatherItem"> </slot>
+        </view>
+        <!-- #endif -->
+        <!--  左侧内容  -->
+      </view>
+    </template>
+  </view>
+</template>
+<!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 -->
+<script src="./index.wxs" module="wxs" lang="wxs"></script>
+<!-- #endif -->
+
+<script setup lang="ts">
+import type IProps from "./typing";
+import defaultProps from "./props";
+import {
+  computed,
+  type CSSProperties,
+  onMounted,
+  ref,
+  toRefs,
+  watch,
+} from "vue";
+// #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5
+import { getRect, sleep, addUnit, getPx } from "@/package";
+// #endif
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  list,
+  show,
+  disabled,
+  autoClose,
+  threshold,
+  options,
+  duration,
+  closeOnClick,
+} = toRefs(props);
+const emit = defineEmits(["update:show", "click"]);
+
+type OpenStatus = "open" | "close" | "";
+
+// 按钮的尺寸信息
+const size = ref({});
+const sliderStyle = ref({});
+const swipeActionList = ref<AnyObject[]>([]);
+
+watch(
+  () => list.value,
+  (newValue) => {
+    swipeActionList.value = newValue.map((item) => ({
+      ...item,
+      status: "close",
+    }));
+  },
+  { immediate: true },
+);
+
+const operateTextStyle = computed(() => {
+  return (temp?: CSSProperties): CSSProperties => {
+    return {
+      color: temp?.color || "#ffffff",
+      fontSize: temp?.fontSize || "16px",
+      lineHeight: temp?.fontSize || "16px",
+    };
+  };
+});
+
+const operateItemStyle = computed(() => {
+  return (temp?: CSSProperties): CSSProperties => {
+    return {
+      backgroundColor: temp?.backgroundColor || "#C7C6CD",
+      borderRadius: temp?.borderRadius || "0",
+      padding: temp?.borderRadius ? 0 : "0 15px",
+      ...temp,
+    };
+  };
+});
+
+const wxsInit = computed(() => {
+  return [
+    disabled.value,
+    autoClose.value,
+    threshold.value,
+    options.value,
+    duration.value,
+  ];
+});
+
+/**
+ * @description 查询节点
+ * */
+const queryRect = () => {
+  getRect(".u-swipe-action-item__right__button", true).then((buttons) => {
+    size.value = {
+      buttons,
+      show: show.value,
+      disabled: disabled.value,
+      threshold: threshold.value,
+      duration: duration.value,
+    };
+  });
+};
+
+watch(
+  () => wxsInit.value,
+  () => queryRect(),
+);
+
+// watch(
+//   () => status.value,
+//   (newValue: OpenStatus) => {
+//     if (newValue === "open") {
+//       emit("update:show", true);
+//     } else {
+//       emit("update:show", false);
+//     }
+//   },
+// );
+//
+// watch(
+//   () => show.value,
+//   (newValue: boolean) => {
+//     if (newValue) {
+//       status.value = "open";
+//     } else {
+//       status.value = "close";
+//     }
+//   },
+// );
+
+onMounted(() => {
+  init();
+});
+
+const init = () => {
+  // 初始化父组件数据
+  updateParentData();
+  // #ifndef APP-NVUE
+  sleep().then(() => {
+    queryRect();
+  });
+  // #endif
+};
+
+const updateParentData = () => {
+  // 此方法在mixin中
+  // getParentData("u-swipe-action");
+};
+
+/**
+ * @description 按钮被点击
+ */
+const buttonClickHandler = (
+  item: AnyObject,
+  index: number,
+  fatherI: number,
+) => {
+  emit(
+    "click",
+    {
+      item,
+      index,
+    },
+    () => {},
+  );
+  if (closeOnClick.value) {
+    closeHandler(fatherI);
+  }
+};
+
+/**
+ * @description 关闭时执行
+ * */
+const closeHandler = (index: number) => {
+  swipeActionList.value = swipeActionList.value.map((item, i) => ({
+    ...item,
+    status: i === index ? "close" : "open",
+  }));
+  console.log(swipeActionList.value);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+
+.u-swipe-action-item {
+  position: relative;
+  overflow: hidden;
+  /* #ifndef APP-NVUE || MP-WEIXIN */
+  touch-action: pan-y;
+  /* #endif */
+
+  &__content {
+    transform: translateX(0px); // 修复某些情况下默认右侧按钮是展开的问题
+    background-color: #ffffff;
+    z-index: 10;
+  }
+
+  &__right {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    @include flex;
+
+    &__button {
+      @include flex;
+      justify-content: center;
+      overflow: hidden;
+      align-items: center;
+
+      &__wrapper {
+        @include flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 15px;
+
+        &__text {
+          @include flex;
+          align-items: center;
+          color: #ffffff;
+          font-size: 15px;
+          text-align: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}
+</style>

package/components/hy-swipe-action/index.scss

@@ -0,0 +1,9 @@
+
+.hy-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+}

package/components/hy-swipe-action/index.wxs

@@ -0,0 +1,235 @@
+/**
+ * 此为wxs模块，只支持APP-VUE，微信和QQ小程序以及H5平台
+ * wxs内部不支持es6语法，变量只能使用var定义，无法使用解构，箭头函数等特性
+ */
+
+
+// 开始触摸
+function touchstart(event, ownerInstance) {
+	// 触发事件的组件的ComponentDescriptor实例
+	var instance = event.instance
+	// wxs内的局部变量快照，此快照是属于整个组件的，在touchstart和touchmove事件中都能获取到相同的结果
+	var state = instance.getState()
+	if (state.disabled) return
+	var touches = event.touches
+	// 如果进行的是多指触控，不允许进行操作
+	if (touches && touches.length > 1) return
+	// 标识当前为滑动中状态
+	state.moving = true
+	// 记录触摸开始点的坐标值
+	state.startX = touches[0].pageX
+	state.startY = touches[0].pageY
+	
+	ownerInstance.callMethod('closeOther')
+}
+
+// 触摸滑动
+function touchmove(event, ownerInstance) {
+	// 触发事件的组件的ComponentDescriptor实例
+	var instance = event.instance
+	// wxs内的局部变量快照
+	var state = instance.getState()
+	if (state.disabled || !state.moving) return
+	var touches = event.touches
+	var pageX = touches[0].pageX
+	var pageY = touches[0].pageY
+	var moveX = pageX - state.startX
+	var moveY = pageY - state.startY
+	var buttonsWidth = state.buttonsWidth
+
+	// 移动的X轴距离大于Y轴距离，也即终点与起点位置连线，与X轴夹角小于45度时，禁止页面滚动
+	if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > state.threshold) {
+		event.preventDefault && event.preventDefault()
+		event.stopPropagation && event.stopPropagation()
+	}
+	// 如果移动的X轴距离小于Y轴距离，也即终点位置与起点位置连线，与Y轴夹角小于45度时，认为是页面上下滑动，而不是左右滑动单元格
+	if (Math.abs(moveX) < Math.abs(moveY)) return
+
+	// 限制右滑的距离，不允许内容部分往右偏移，右滑会导致X轴偏移值大于0，以此做判断
+	// 此处不能直接return，因为滑动过程中会缺失某些关键点坐标，会导致错乱，最好的办法就是
+	// 在超出后，设置为0
+	if (state.status === 'open') {
+		// 在开启状态下，向左滑动，需忽略
+		if (moveX < 0) moveX = 0
+		// 想要收起菜单，最大能移动的距离为按钮的总宽度
+		if (moveX > buttonsWidth) moveX = buttonsWidth
+		// 如果是已经打开了的状态，向左滑动时，移动收起菜单
+		moveSwipeAction(-buttonsWidth + moveX, instance, ownerInstance)
+	} else {
+		// 关闭状态下，右滑动需忽略
+		if (moveX > 0) moveX = 0
+		// 滑动的距离不允许超过所有按钮的总宽度，此时只能是左滑，最终设置按钮的总宽度，同时为负数
+		if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth
+		// 只要是在滑过程中，就不断移动单元格内容部分，从而使隐藏的菜单显示出来
+		moveSwipeAction(moveX, instance, ownerInstance)
+	}
+}
+
+// 触摸结束
+function touchend(event, ownerInstance) {
+	// 触发事件的组件的ComponentDescriptor实例
+	var instance = event.instance
+	// wxs内的局部变量快照
+	var state = instance.getState()
+	if (!state.moving || state.disabled) return
+	var touches = event.changedTouches ? event.changedTouches[0] : {}
+	var pageX = touches.pageX
+	var pageY = touches.pageY
+	var moveX = pageX - state.startX
+	if (state.status === 'open') {
+		// 在展开的状态下，继续左滑，无需操作
+		if (moveX < 0) return
+		// 在开启状态下，点击一下内容区域，moveX为0，也即没有进行移动，这时执行收起菜单逻辑
+		if (moveX === 0) {
+			return closeSwipeAction(instance, ownerInstance)
+		}
+		// 在开启状态下，滑动距离小于阈值，则默认为不关闭，同时恢复原来的打开状态
+		if (Math.abs(moveX) < state.threshold) {
+			openSwipeAction(instance, ownerInstance)
+		} else {
+			// 如果滑动距离大于阈值，则执行收起逻辑
+			closeSwipeAction(instance, ownerInstance)
+		}
+	} else {
+		// 在关闭的状态下，右滑，无需操作
+		if (moveX > 0) return
+		// 理由同上
+		if (Math.abs(moveX) < state.threshold) {
+			closeSwipeAction(instance, ownerInstance)
+		} else {
+			openSwipeAction(instance, ownerInstance)
+		}
+	}
+}
+
+// 获取过渡时间
+function getDuration(value) {
+	if (value.toString().indexOf('s') >= 0) return value
+	return value > 30 ? value + 'ms' : value + 's'
+}
+
+// 滑动结束时判断滑动的方向
+function getMoveDirection(instance, ownerInstance) {
+	var state = instance.getState()
+}
+
+// 移动滑动选择器内容区域，同时显示出其隐藏的菜单
+function moveSwipeAction(moveX, instance, ownerInstance) {
+	var state = instance.getState()
+	// 获取所有按钮的实例，需要通过它去设置按钮的位移
+	var buttons = ownerInstance.selectAllComponents('.hy-swipe-action-item__right__button')
+
+	// 设置菜单内容部分的偏移
+	instance.requestAnimationFrame(function() {
+		instance.setStyle({
+			// 设置translateX的值
+			'transition': 'none',
+			transform: 'translateX(' + moveX + 'px)',
+			'-webkit-transform': 'translateX(' + moveX + 'px)'
+		})
+	})
+}
+
+// 一次性展开滑动菜单
+function openSwipeAction(instance, ownerInstance) {
+	var state = instance.getState()
+	// 获取所有按钮的实例，需要通过它去设置按钮的位移
+	var buttons = ownerInstance.selectAllComponents('.hy-swipe-action-item__right__button')
+	// 处理duration单位问题
+	var duration = getDuration(state.duration)
+	// 展开过程中，是向左移动，所以X的偏移应该为负值
+	var buttonsWidth = -state.buttonsWidth
+	instance.requestAnimationFrame(function() {
+		// 设置菜单主体内容
+		instance.setStyle({
+			'transition': 'transform ' + duration,
+			'transform': 'translateX(' + buttonsWidth + 'px)',
+			'-webkit-transform': 'translateX(' + buttonsWidth + 'px)',
+		})
+	})
+	setStatus('open', instance, ownerInstance)
+}
+
+// 标记菜单的当前状态，open-已经打开，close-已经关闭
+function setStatus(status, instance, ownerInstance) {
+	var state = instance.getState()
+	state.status = status
+	ownerInstance.callMethod('setState', status)
+}
+
+// 一次性收起滑动菜单
+function closeSwipeAction(instance, ownerInstance) {
+	var state = instance.getState()
+	// 获取所有按钮的实例，需要通过它去设置按钮的位移
+	var buttons = ownerInstance.selectAllComponents('.hy-swipe-action-item__right__button')
+	var len = buttons.length
+	// 处理duration单位问题
+	var duration = getDuration(state.duration)
+	instance.requestAnimationFrame(function() {
+		// 设置菜单主体内容
+		instance.setStyle({
+			'transition': 'transform ' + duration,
+			'transform': 'translateX(0px)',
+			'-webkit-transform': 'translateX(0px)'
+		})
+		// 设置各个隐藏的按钮为收起的状态
+		for (var i = len - 1; i >= 0; i--) {
+			buttons[i].setStyle({
+				'transition': 'transform ' + duration,
+				'transform': 'translateX(0px)',
+				'-webkit-transform': 'translateX(0px)'
+			})
+		}
+	})
+	setStatus('close', instance, ownerInstance)
+}
+
+// status的状态发生变化
+function statusChange(newValue, oldValue, ownerInstance, instance) {
+	var state = instance.getState()
+	if (state.disabled) return
+	// 打开或关闭单元格
+	if (newValue === 'close' && state.status === 'open') {
+		closeSwipeAction(instance, ownerInstance)
+	} else if(newValue === 'open' && state.status === 'close') {
+		openSwipeAction(instance, ownerInstance)
+	}
+}
+
+// 菜单尺寸发生变化
+function sizeChange(newValue, oldValue, ownerInstance, instance) {
+	// wxs内的局部变量快照
+	var state = instance.getState()
+	// 临时防止nv_disabled报错
+	if (!state || !newValue) {
+		return;
+	}
+	state.disabled = newValue.disabled
+	state.duration = newValue.duration
+	state.show = newValue.show
+	state.threshold = newValue.threshold
+	state.buttons = newValue.buttons
+
+	if (state.buttons) {
+		var len = state.buttons.length
+		var buttonsWidth = 0
+		var buttons = newValue.buttons
+		for (var i = 0; i < len; i++) {
+			buttonsWidth += buttons[i].width
+		}
+	}
+	state.buttonsWidth = buttonsWidth
+
+	// 支持默认打开
+	if (state.show) {
+		openSwipeAction(instance, ownerInstance)
+	}
+}
+
+module.exports = {
+	touchstart: touchstart,
+	touchmove: touchmove,
+	touchend: touchend,
+	sizeChange: sizeChange,
+	statusChange: statusChange
+}

package/components/hy-swipe-action/props.ts

@@ -0,0 +1,16 @@
+import type IProps from "./typing";
+
+const defaultProps: IProps = {
+  list: [],
+  show: false,
+  name: "",
+  key: "id",
+  disabled: false,
+  threshold: 20,
+  autoClose: true,
+  options: [{ text: "删除" }],
+  duration: 300,
+  closeOnClick: true,
+};
+
+export default defaultProps;

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

@@ -0,0 +1,55 @@
+import type { CSSProperties } from "vue";
+
+interface SwipeActionOptionsVo {
+  text: string;
+  style?: CSSProperties;
+  icon?: string;
+  iconSize?: string | number;
+}
+
+export default interface IProps {
+  /**
+   * @description 数据列表
+   * */
+  list: Record<string, any>[];
+  /**
+   * @description 控制打开或者关闭（默认 false ）
+   * */
+  show?: boolean;
+  /**
+   * @description 标识符，如果是v-for，可用index索引值
+   * */
+  name?: string;
+  /**
+   * @description 唯一键值
+   * */
+  key?: string;
+  /**
+   * @description 是否禁用（默认 false ）
+   * */
+  disabled?: boolean;
+  /**
+   * @description 滑动距离阈值，只有大于此值，才被认为是要打开菜单（默认 30 ）
+   * */
+  threshold?: number;
+  /**
+   * @description 是否自动关闭其他swipe按钮组（默认 true ）
+   * */
+  autoClose?: boolean;
+  /**
+   * @description 右侧按钮内容
+   * */
+  options?: SwipeActionOptionsVo[];
+  /**
+   * @description 动画过渡时间，单位ms（默认 350 ）
+   * */
+  duration?: number;
+  /**
+   * @description 是否关闭
+   * */
+  closeOnClick: boolean;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-swipe-action/wxs.js

@@ -0,0 +1,15 @@
+export default {
+    methods: {
+        // 关闭时执行
+        closeHandler() {
+            this.status = 'close'
+        },
+        setState(status) {
+            this.status = status
+        },
+        closeOther() {
+            // 尝试关闭其他打开的单元格
+            this.parent && this.parent.closeOther(this)
+        }
+    }
+}

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

@@ -4,11 +4,11 @@
       v-if="indicatorMode === 'line'"
       :class="[
         'hy-swiper-indicator__wrapper',
-        `hy-swiper-indicator__wrapper--${indicatorMode}`
+        `hy-swiper-indicator__wrapper--${indicatorMode}`,
       ]"
       :style="{
         width: addUnit(lineWidth * length),
-        backgroundColor: indicatorInactiveColor
+        backgroundColor: indicatorInactiveColor,
       }"
     >
       <view
@@ -22,7 +22,7 @@
         v-for="(item, index) in length"
         :key="index"
         :class="[
-          index === current && 'hy-swiper-indicator__wrapper__dot--active'
+          index === current && 'hy-swiper-indicator__wrapper__dot--active',
         ]"
         :style="[dotStyle(index)]"
       >
@@ -52,7 +52,7 @@ const lineStyle = computed<CSSProperties>(() => {
   let style: CSSProperties = {};
   style.width = addUnit(lineWidth.value);
   style.transform = `translateX(${addUnit(
-    Number(current.value) * lineWidth.value
+    Number(current.value) * lineWidth.value,
   )})`;
   style.backgroundColor = indicatorActiveColor.value;
   return style;
@@ -71,35 +71,5 @@ const dotStyle = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-
-.hy-swiper-indicator {
-  &__wrapper {
-    @include flex;
-
-    &--line {
-      border-radius: 100px;
-      height: 4px;
-
-      &__bar {
-        width: 22px;
-        height: 4px;
-        border-radius: 100px;
-        background-color: #ffffff;
-        transition: transform 0.3s;
-      }
-    }
-
-    &__dot {
-      width: 5px;
-      height: 5px;
-      border-radius: 100px;
-      margin: 0 4px;
-
-      &--active {
-        width: 12px;
-      }
-    }
-  }
-}
+@import "./index.scss";
 </style>