rrj-astra-ui 1.1.1 → 1.1.3

package/components/AuiListItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="aui-list-item">
+    <view class="aui-list-item" ref="listItemRef">
         <view class="aui-list-item-content-wrapper" :style="{ transform: `translateX(${offsetX}px)` }"  @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
             <view class="aui-list-item_befor">
                 <slot name="befor"></slot>
@@ -26,13 +26,7 @@
 </template>
 
 <script setup>
-import { defineProps, ref } from 'vue';
-const __name = 'AuiListItem';
-
-// defineOptions 可能不是 Vue 内置方法，这里注释掉
-defineOptions({
-    name: __name
-})
+import { defineProps, ref, onMounted, onUnmounted } from 'vue';
 
 const props = defineProps({
     text: {
@@ -56,8 +50,11 @@ const props = defineProps({
 const startX = ref(0);
 const offsetX = ref(0);
 const isSliding = ref(false);
-const SLIDE_THRESHOLD = -50; // 滑动阈值
+const SLIDE_THRESHOLD = -50;
+// 新增：获取组件 DOM 引用
+const listItemRef = ref(null);
 
+// 原有滑动逻辑（不变）
 const onTouchStart = (e) => {
     if (!props.allowSlide) return;
     startX.value = e.touches[0].clientX;
@@ -80,14 +77,60 @@ const onTouchMove = (e) => {
 const onTouchEnd = () => {
     if (!props.allowSlide) return;
     if (offsetX.value < SLIDE_THRESHOLD) {
-        offsetX.value = -150; // 自定义内容宽度
+        offsetX.value = -150;
     } else {
         offsetX.value = 0;
         isSliding.value = false;
     }
 };
+
+// 新增：收回滑动区域的核心方法
+const resetSlide = () => {
+    if (!props.allowSlide || !isSliding.value) return;
+    offsetX.value = 0;
+    isSliding.value = false;
+};
+
+// 新增：监听页面点击事件，判断是否点击组件外部
+const handlePageClick = (e) => {
+    if (!listItemRef.value || !isSliding.value) return;
+    
+    // 获取组件 DOM 信息
+    const itemDom = listItemRef.value;
+    const itemRect = itemDom.getBoundingClientRect();
+    
+    // 判断点击坐标是否在组件外部
+    const clickX = e.clientX || e.touches?.[0]?.clientX;
+    const clickY = e.clientY || e.touches?.[0]?.clientY;
+    if (
+        clickX < itemRect.left ||
+        clickX > itemRect.right ||
+        clickY < itemRect.top ||
+        clickY > itemRect.bottom
+    ) {
+        // 点击外部，触发收回
+        resetSlide();
+    }
+};
+
+// 新增：挂载时添加页面点击监听，卸载时移除（防止内存泄漏）
+onMounted(() => {
+    // 监听 uni-app 页面点击（兼容移动端/PC端）
+    uni.onClickOutside(listItemRef, resetSlide); // 优先使用 uni-app 内置方法（更简洁）
+    // 备用：监听 window 点击（兼容更多场景）
+    window.addEventListener('click', handlePageClick);
+    window.addEventListener('touchstart', handlePageClick);
+});
+
+onUnmounted(() => {
+    // 移除监听，防止内存泄漏
+    uni.offClickOutside(listItemRef, resetSlide);
+    window.removeEventListener('click', handlePageClick);
+    window.removeEventListener('touchstart', handlePageClick);
+});
 </script>
 
+<!-- 样式部分不变，保留你的原有样式 -->
 <style scoped lang="scss">
 @import '../style.scss';
 .aui-list-item {
@@ -139,4 +182,4 @@ const onTouchEnd = () => {
     justify-content: center;
     z-index: 999;
 }
-</style>    
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rrj-astra-ui",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "AstraUI - A powerful UI framework for UniApp with global SCSS color variables",
   "main": "index.js",
   "keywords": [
@@ -36,4 +36,4 @@
     "parse5": "^7.3.0",
     "uuid": "^11.1.0"
   }
-}
+}