uview-plus 3.4.62 → 3.4.64

package/changelog.md

@@ -1,3 +1,9 @@
+## 3.4.64（2025-07-25）
+feat: 新增dragsort拖动排序组件
+
+## 3.4.63（2025-07-24）
+feat: count-down支持slot传递时间参数
+
 ## 3.4.62（2025-07-24）
 feat: divider支持默认插槽
 

package/components/u-count-down/u-count-down.vue

@@ -1,6 +1,7 @@
 <template>
 	<view class="u-count-down">
-		<slot>
+		<slot :days="timeData.days" :hours="timeData.hours"
+			:minutes="timeData.minutes" :seconds="timeData.seconds">
 			<text class="u-count-down__text">{{ formattedTime }}</text>
 		</slot>
 	</view>
@@ -112,6 +113,7 @@
 				this.remainTime = remain
 				// 根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象
 				const timeData = parseTimeData(remain)
+				this.timeData = timeData;
 				this.$emit('change', timeData)
 				// 得出格式化后的时间
 				this.formattedTime = parseFormat(this.format, timeData)

package/components/u-dragsort/u-dragsort.vue

@@ -1,372 +1,367 @@
 <template>
-  <view class="u-dragsort" :class="direction == 'horizontal' ? 'u-dragsort--horizontal' : ''">
-    <view
-      v-for="(item, index) in list"
-      :key="item.id"
-      :id="`u-dragsort-item-${index}`"
-      :ref="(el) => setItemRef(el, index)"
-      class="u-dragsort-item"
-      :class="{
-        'dragging': dragIndex === index,
-        'nearby': closestIndex === index
-      }"
-      :style="{
-        transform: dragIndex === index ? `translateY(${dragY}px)` : 'none',
-        zIndex: dragIndex === index ? 10 : 'auto'
-      }"
-      @touchstart="onTouchStart(index, $event)"
-      @touchmove="onTouchMove($event)"
-      @touchend="onTouchEnd"
-    >
-      <!-- 默认插槽，用户可自定义 item 渲染内容 -->
-      <slot :item="item" :index="index">
-        <!-- 默认内容 -->
-        <view class="u-dragsort-item-content">
-            {{ item.label }}
-        </view>
-      </slot>
+    <view class="u-dragsort"
+        :class="[direction == 'horizontal' ? 'u-dragsort--horizontal' : '', direction == 'all' ? 'u-dragsort--all' : '']">
+        <movable-area class="u-dragsort-area" :style="movableAreaStyle">
+            <movable-view v-for="(item, index) in list" :key="item.id" :id="`u-dragsort-item-${index}`"
+                class="u-dragsort-item" :class="{ 'dragging': dragIndex === index }"
+                :direction="direction === 'all' ? 'all' : direction" :x="item.x" :y="item.y" :inertia="false"
+                :disabled="!draggable || (item.draggable === false)" @change="onChange(index, $event)"
+                @touchstart="onTouchStart(index)" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
+                <view class="u-dragsort-item-content">
+                    <slot :item="item" :index="index">
+                        {{ item.label }}
+                    </slot>
+                </view>
+            </movable-view>
+        </movable-area>
     </view>
-  </view>
 </template>
 
 <script>
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle, addUnit, sleep } from '../../libs/function/index';
 export default {
-  name: 'u-dragsort',
-  props: {
-    initialList: {
-        type: Array,
-        required: true,
-        default: () => []
-    },
-    // 新增 draggable 属性
-    draggable: {
-        type: Boolean,
-        default: true
-    },
-    direction: {
-        type: String,
-        default: 'vertical', // 可选值：'vertical' / 'horizontal'
-        validator: value => ['vertical', 'horizontal'].includes(value)
-    }
-  },
-  data() {
-    return {
-      list: [...this.initialList],
-      itemRefs: [], // 存储每个 item 的 ref
-      itemRects: [], // 缓存所有 item 的 rect
-      dragIndex: -1,
-      dragX: 0,
-      dragY: 0,
-      startX: 0,
-      startY: 0,
-      itemWidth: 0, // 横向拖动需要宽度
-      itemHeight: 80,
-      isDragging: false,
-      closestIndex: -1, // 用于临时存储最接近的 index
-      lastSwapTime: 0, // 新增：记录上次交换时间
-      initialTouchY: 0, // 新增：记录初始触摸位置
-      minDragDistance: 15, // 新增：最小拖动距离阈值
-      dragStartY: 0, // 新增：记录拖动开始位置
-      confirmedDirection: null, // 新增：确认的拖动方向
-    };
-  },
-  emits: ['drag-end'],
-  async mounted() {
-    await this.$nextTick();
-    const rect = await this.calculateItemSize(0);
-    this.itemWidth = rect.width;
-    this.itemHeight = rect.height;
-  },
-  methods: {
-    setItemRef(el, index) {
-        this.itemRefs[index] = el;
+    name: 'u-dragsort',
+    // #ifdef MP
+    mixins: [mpMixin, mixin,],
+    // #endif
+    // #ifndef MP
+    mixins: [mixin],
+    // #endif
+    props: {
+        initialList: {
+            type: Array,
+            required: true,
+            default: () => []
+        },
+        draggable: {
+            type: Boolean,
+            default: true
+        },
+        direction: {
+            type: String,
+            default: 'vertical',
+            validator: value => ['vertical', 'horizontal', 'all'].includes(value)
+        },
+        // 新增列数属性，用于all模式
+        columns: {
+            type: Number,
+            default: 3
+        }
     },
-    async calculateItemSize(index) {
-      return new Promise((resolve) => {
-        uni.createSelectorQuery()
-          .in(this)
-          .select(`#u-dragsort-item-${index}`)
-          .boundingClientRect(res => {
-            resolve(res || { width: 80, height: 80 });
-          })
-          .exec();
-      });
+    data() {
+        return {
+            list: [],
+            dragIndex: -1,
+            itemHeight: 40,
+            itemWidth: 80,
+            areaWidth: 0, // 可拖动区域宽度
+            areaHeight: 0, // 可拖动区域高度
+            originalPositions: [], // 保存原始位置
+            currentPosition: {
+                x: 0,
+                y: 0
+            }
+        };
     },
-    async updateItemRects() {
-        const rects = await this.getAllItemRects();
-        this.itemRects = rects;
+    computed: {
+        movableAreaStyle() {
+            if (this.direction === 'vertical') {
+                return {
+                    height: `${this.list.length * this.itemHeight}px`,
+                    width: '100%'
+                };
+            } else if (this.direction === 'horizontal') {
+                return {
+                    height: '100%',
+                    width: `${this.list.length * this.itemWidth}px`
+                };
+            } else {
+                // all模式，计算网格布局所需的高度
+                const rows = Math.ceil(this.list.length / this.columns);
+                return {
+                    height: `${rows * this.itemHeight}px`,
+                    width: '100%'
+                };
+            }
+        }
     },
-    async getAllItemRects() {
-        return new Promise(resolve => {
-            uni.createSelectorQuery()
-            .in(this)
-            .selectAll('.u-dragsort-item')
-            .boundingClientRect(res => {
-                resolve(res || []);
-            })
-            .exec();
-        });
+    emits: ['drag-end'],
+    async mounted() {
+        await this.$nextTick();
+        this.initList();
+        this.calculateItemSize();
+        this.calculateAreaSize();
     },
-    onTouchStart(index, event) {
-      // ⚠️ 如果禁止拖动，则直接返回
-      if (!this.draggable || (this.list[index]?.draggable == false)) return;
+    methods: {
+        initList() {
+            // 初始化列表项的位置
+            this.list = this.initialList.map((item, index) => {
+                let x = 0, y = 0;
 
-      const touch = event.touches[0];
-      this.dragIndex = index;
-      this.startX = touch.clientX;
-      this.startY = touch.clientY;
-      // 记录初始触摸位置
-      this.initialTouchY = touch.clientY;
-      this.dragX = 0;
-      this.dragY = 0;
-      this.isDragging = true;
+                if (this.direction === 'horizontal') {
+                    x = index * this.itemWidth;
+                    y = 0;
+                } else if (this.direction === 'vertical') {
+                    x = 0;
+                    y = index * this.itemHeight;
+                } else {
+                    // all模式，网格布局
+                    const col = index % this.columns;
+                    const row = Math.floor(index / this.columns);
+                    x = col * this.itemWidth;
+                    y = row * this.itemHeight;
+                }
 
-      // 记录拖动开始位置
-      this.dragStartY = touch.clientY;
-      this.confirmedDirection = null;
+                return {
+                    ...item,
+                    x,
+                    y
+                };
+            });
+            // 保存初始位置
+            this.saveOriginalPositions();
+        },
+        saveOriginalPositions() {
+            // 保存当前位置作为原始位置
+            this.originalPositions = this.list.map(item => ({
+                x: item.x,
+                y: item.y
+            }));
+        },
+        async calculateItemSize() {
+            // 计算项目尺寸
+            await sleep(30);
+            return new Promise((resolve) => {
+                uni.createSelectorQuery()
+                    .in(this)
+                    .select('.u-dragsort-item-content')
+                    .boundingClientRect(res => {
+                        if (res) {
+                            this.itemHeight = res.height || 40;
+                            this.itemWidth = res.width || 80;
 
-      this.updateItemRects(); // 更新缓存
-    },
-    // throttle(func, delay) {
-    //     let lastCall = 0;
-    //     return (...args) => {
-    //     const now = new Date().getTime();
-    //     if (now - lastCall >= delay) {
-    //         lastCall = now;
-    //         func.apply(this, args);
-    //     }
-    //     };
-    // },
-    handleDragMove(event) {
-        if (this.dragIndex === -1 || !this.draggable) return;
+                            // 更新所有项目的位置
+                            this.updatePositions();
+                            // 保存原始位置
+                            this.saveOriginalPositions();
+                        }
+                        resolve(res);
+                    })
+                    .exec();
+            });
+        },
+        async calculateAreaSize() {
+            // 计算可拖动区域尺寸
+            await sleep(30);
+            return new Promise((resolve) => {
+                uni.createSelectorQuery()
+                    .in(this)
+                    .select('.u-dragsort-area')
+                    .boundingClientRect(res => {
+                        if (res) {
+                            this.areaWidth = res.width || 300;
+                            this.areaHeight = res.height || 300;
+                        }
+                        resolve(res);
+                    })
+                    .exec();
+            });
+        },
+        updatePositions() {
+            // 更新所有项目的位置
+            this.list.forEach((item, index) => {
+                if (this.direction === 'vertical') {
+                    item.y = index * this.itemHeight;
+                    item.x = 0;
+                } else if (this.direction === 'horizontal') {
+                    item.x = index * this.itemWidth;
+                    item.y = 0;
+                } else {
+                    // all模式，网格布局
+                    const col = index % this.columns;
+                    const row = Math.floor(index / this.columns);
+                    item.x = col * this.itemWidth;
+                    item.y = row * this.itemHeight;
+                }
+            });
+        },
+        onTouchStart(index) {
+            this.dragIndex = index;
+            // 保存当前位置作为原始位置
+            this.saveOriginalPositions();
+        },
+        onChange(index, event) {
+            if (!event.detail.source || event.detail.source !== 'touch') return;
 
-        const touch = event.touches[0];
-        const currentX = touch.clientX;
-        const currentY = touch.clientY;
+            this.currentPosition.x = event.detail.x;
+            this.currentPosition.y = event.detail.y;
 
-        const deltaX = currentX - this.startX;
-        
-        // 1. 计算总拖动距离
-        const totalDragDistance = Math.abs(currentY - this.dragStartY);
-        
-        // 2. 如果拖动距离小于阈值，不进行位置检测
-        if (totalDragDistance < this.minDragDistance) {
-            // 只更新位置，不检测交换
-            this.dragY = currentY - this.initialTouchY;
-            return;
-        }
-        
-        // 3. 确认拖动方向（只做一次）
-        if (!this.confirmedDirection) {
-            this.confirmedDirection = currentY > this.dragStartY ? 'down' : 'up';
-        }
-        
-        this.dragY = currentY - this.initialTouchY;
+            // all模式下使用更智能的位置计算
+            if (this.direction === 'all') {
+                this.handleAllModeChange(index);
+            } else {
+                // 原有的垂直和水平模式逻辑
+                let itemSize = 0;
+                let targetIndex = -1;
 
-        if (this.direction === 'horizontal') {
-            this.dragX = deltaX;
+                if (this.direction === 'vertical') {
+                    itemSize = this.itemHeight;
+                    targetIndex = Math.max(0, Math.min(
+                        Math.round(this.currentPosition.y / itemSize),
+                        this.list.length - 1
+                    ));
+                } else if (this.direction === 'horizontal') {
+                    itemSize = this.itemWidth;
+                    targetIndex = Math.max(0, Math.min(
+                        Math.round(this.currentPosition.x / itemSize),
+                        this.list.length - 1
+                    ));
+                }
 
-            // 只缓存 rect，不立即交换
-            let closestIndex = this.dragIndex;
-            let minDistance = Infinity;
+                // 如果位置发生变化，则重新排序
+                if (targetIndex !== index) {
+                    this.reorderItems(index, targetIndex);
+                }
+            }
+        },
+        handleAllModeChange(index) {
+            // 在all模式下，根据当前位置计算最近的网格位置
+            const col = Math.max(0, Math.min(Math.round(this.currentPosition.x / this.itemWidth), this.columns - 1));
+            const row = Math.max(0, Math.round(this.currentPosition.y / this.itemHeight));
 
-            this.itemRects.forEach((rect, index) => {
-            if (index === this.dragIndex) return;
+            // 计算目标索引
+            let targetIndex = row * this.columns + col;
+            targetIndex = Math.max(0, Math.min(targetIndex, this.list.length - 1));
 
-            const centerX = rect.left + rect.width / 2;
-            const centerY = rect.top + rect.height / 2;
-            const dist = Math.hypot(currentX - centerX, currentY - centerY);
+            // 如果位置发生变化，则重新排序
+            if (targetIndex !== index) {
+                this.reorderItems(index, targetIndex);
+            }
+        },
+        reorderItems(fromIndex, toIndex) {
+            const movedItem = this.list.splice(fromIndex, 1)[0];
+            this.list.splice(toIndex, 0, movedItem);
 
-            if (dist < minDistance) {
-                minDistance = dist;
-                closestIndex = index;
+            // 震动反馈
+            if (uni.vibrateShort) {
+                uni.vibrateShort();
             }
-            });
 
-            // 设置临时高亮/排序索引，并立即修改 list
-            if (closestIndex !== this.closestIndex && closestIndex !== this.dragIndex) {
-                const temp = this.list[this.dragIndex];
-                this.list.splice(this.dragIndex, 1);
-                this.list.splice(closestIndex, 0, temp);
+            // 更新当前拖拽项目的新索引
+            this.dragIndex = toIndex;
 
-                this.dragIndex = closestIndex;
-                this.closestIndex = closestIndex;
-            }
-        } else {
-            // 4. 添加更严格的防抖
-            const now = Date.now();
-            if (now - this.lastSwapTime < 200) return; // 延长防抖时间
-            
-            // 5. 使用方向感知的目标位置计算
-            const targetIndex = this.calculateTargetPosition(currentY);
-            
-            if (targetIndex !== -1 && targetIndex !== this.dragIndex) {
-                this.lastSwapTime = now;
-                this.swapItems(targetIndex, event);
+            // 更新所有项目的位置
+            this.updatePositions();
+
+            // 保存当前位置作为原始位置
+            this.saveOriginalPositions();
+        },
+        onTouchEnd() {
+            // 0.001是为了解决拖动过快等某些极限场景下位置还原不生效问题
+            if (this.direction === 'horizontal') {
+                this.list[this.dragIndex].x = this.currentPosition.x + 0.001;
+            } else if (this.direction === 'vertical' || this.direction === 'all') {
+                this.list[this.dragIndex].y = this.currentPosition.y + 0.001;
+                this.list[this.dragIndex].x = this.currentPosition.x + 0.001;
             }
+
+            // 重置到位置，需要延迟触发动，否则无效。
+            sleep(50).then(() => {
+                this.list.forEach((item, index) => {
+                    item.x = this.originalPositions[index].x;
+                    item.y = this.originalPositions[index].y;
+                });
+                this.dragIndex = -1;
+                this.$emit('drag-end', [...this.list]);
+            });
         }
     },
-    // 优化：更精准的方向感知位置计算
-    calculateTargetPosition(currentY) {
-        // 获取拖动项的中心Y坐标
-        const dragCenterY = currentY;
-        let closestIndex = -1;
-        let minDistance = Infinity;
-        
-        // 获取拖动项的高度
-        const dragHeight = this.itemRects[this.dragIndex]?.height || this.itemHeight;
-        
-        for (let i = 0; i < this.itemRects.length; i++) {
-            if (i === this.dragIndex) continue;
-            
-            const rect = this.itemRects[i];
-            if (!rect) continue;
-            
-            const rectCenterY = rect.top + rect.height / 2;
-            const distance = Math.abs(dragCenterY - rectCenterY);
-            
-            // 6. 方向过滤：只考虑当前拖动方向上的元素
-            const isDirectionMatch = 
-                (this.confirmedDirection === 'down' && i > this.dragIndex) ||
-                (this.confirmedDirection === 'up' && i < this.dragIndex);
-                
-            if (!isDirectionMatch) continue;
-            
-            // 7. 使用更大的阈值（元素高度的1.2倍）
-            const threshold = dragHeight * 1.2;
-            
-            if (distance < minDistance && distance < threshold) {
-                minDistance = distance;
-                closestIndex = i;
+    watch: {
+        initialList: {
+            handler() {
+                this.$nextTick(() => {
+                    this.initList();
+                });
+            },
+            deep: true
+        },
+        direction: {
+            handler() {
+                this.$nextTick(() => {
+                    this.initList();
+                    this.calculateItemSize();
+                    this.calculateAreaSize();
+                });
             }
-        }
-        
-        return closestIndex;
-    },
-    
-    // 优化：添加平滑交换
-    swapItems(targetIndex, event) {
-        const originalIndex = this.dragIndex;
-        
-        // 6. 执行交换前保存当前样式
-        const originalTransform = this.$refs[`u-dragsort-item-${originalIndex}`]?.style.transform;
-        
-        // 执行交换
-        const temp = this.list[originalIndex];
-        this.list.splice(originalIndex, 1);
-        this.list.splice(targetIndex, 0, temp);
-        
-        // 更新索引
-        this.dragIndex = targetIndex;
-        this.closestIndex = targetIndex;
-        
-        // 7. 使用当前触摸位置更新初始位置
-        if (event && event.touches && event.touches[0]) {
-            this.initialTouchY = event.touches[0].clientY;
-            this.dragY = 0;
-        }
-        
-        // 8. 添加位置平滑过渡
-        this.$nextTick(() => {
-            const dragItem = this.$refs[`u-dragsort-item-${targetIndex}`];
-            if (dragItem) {
-                // 保存当前位置
-                const currentTransform = dragItem.style.transform;
-                
-                // 临时添加过渡效果
-                dragItem.style.transition = 'transform 0.15s ease';
-                dragItem.style.transform = currentTransform;
-                
-                // 过渡结束后移除效果
-                setTimeout(() => {
-                    dragItem.style.transition = '';
-                }, 150);
+        },
+        columns: {
+            handler() {
+                if (this.direction === 'all') {
+                    this.$nextTick(() => {
+                        this.initList();
+                        this.updatePositions();
+                        this.saveOriginalPositions();
+                    });
+                }
             }
-        });
-        
-        // 更新位置缓存
-        this.updateItemRects();
-    },
-    
-    onTouchMove(event) {
-        // 记录当前Y坐标用于方向判断
-        if (event.touches && event.touches[0]) {
-            this.prevY = event.touches[0].clientY;
-        }
-        
-        // 使用requestAnimationFrame确保流畅性
-        if (!this.rafId) {
-            this.rafId = requestAnimationFrame(() => {
-                this.handleDragMove(event);
-                this.rafId = null;
-            });
-        }
-    },
-    onTouchEnd() {
-        // 取消动画帧
-        if (this.rafId) {
-            cancelAnimationFrame(this.rafId);
-            this.rafId = null;
         }
-
-        // if (this.isDragging && this.closestIndex !== -1 && this.closestIndex !== this.dragIndex) {
-        //     const temp = this.list[this.dragIndex];
-        //     this.list.splice(this.dragIndex, 1);
-        //     this.list.splice(this.closestIndex, 0, temp);
-        //     this.dragIndex = this.closestIndex;
-        // }
-
-        this.$emit('drag-end', this.list);
-        this.dragIndex = -1;
-        this.dragX = 0;
-        this.dragY = 0;
-        this.isDragging = false;
-        this.closestIndex = -1;
     }
-  }
 };
 </script>
 
 <style scoped lang="scss">
 .u-dragsort {
-  width: 100%;
+    width: 100%;
 
-  .u-dragsort-item {
-    // transition: transform 0.15s ease, margin-top 0.15s ease;
-    transition: transform 0.25s cubic-bezier(0.33, 1, 0.68, 1);
-    &.dragging {
-        // 拖动时禁用过渡
-        // transition: none;
-        // 确保在最上层
-        z-index: 1000;
-        // transform: scale(1.05);
-        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
-    }
-    &.nearby {
-        opacity: 95;
-        transform: scale(1.02);
+    .u-dragsort-area {
+        width: 100%;
+        position: relative;
     }
-    .u-dragsort-item-content {
-        padding: 10px;
-        text-align: center;
-        background-color: #f5f5f5;
-        border-radius: 8rpx;
-        transition: all 0.3s ease;
-    }
-  }
 
-  &.u-dragsort--horizontal { 
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    overflow: visible; // 取消滚动条，允许自然换行
     .u-dragsort-item {
-        flex-shrink: 0;
-        box-sizing: border-box;
+        position: absolute;
+        width: 100%;
+
+        &.dragging {
+            z-index: 1000;
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+        }
+
         .u-dragsort-item-content {
-            margin: 1px;
+            padding: 0px;
+            text-align: center;
+            box-sizing: border-box;
+            padding-bottom: 6px;
+            border-radius: 8rpx;
+            transition: all 0.3s ease;
+        }
+    }
+
+    &.u-dragsort--horizontal {
+        .u-dragsort-area {
+            display: flex;
+            white-space: nowrap;
+            height: auto;
+        }
+
+        .u-dragsort-item {
+            display: flex;
+            width: auto;
+            height: 100%;
+        }
+    }
+
+    &.u-dragsort--all {
+        .u-dragsort-area {
+            height: auto;
+        }
+
+        .u-dragsort-item {
+            width: auto;
+            height: auto;
         }
     }
-  }
 }
-</style>
+</style>

package/package.json

@@ -2,7 +2,7 @@
   "id": "uview-plus",
   "name": "uview-plus",
   "displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙移动组件库。",
-  "version": "3.4.62",
+  "version": "3.4.64",
   "description": "零云®uview-plus已兼容vue3，全面的组件和便捷的工具会让您信手拈来，如鱼得水。",
   "keywords": [
     "uview",