更新记录

0.1.3（2023-08-19）

• fix: 修复使用remove导致样式错乱

0.1.2（2023-08-09）

• fix: 修复nvue没有获取节点的问题
• fix: 修复因延时导致卡在中途
• fix: 修复change事件有时失效的问题

0.1.1（2023-07-03）

• chore: 更新文档

平台兼容性

lime-drag 拖拽排序

• 当前为初版 可能会有BUG
• 基于uniapp vue3
• Q群 1169785031

安装

• 在市场导入插件即可在任意页面使用，无须再import

使用

• 提供简单的使用示例，更多请查看下方的demo

<l-drag :list="list" @change="change">
    <!-- // 每一项的插槽 grid 的 content 您传入的数据 -->
    <template #grid="{active, content}">
        <!-- // grid.active 是否为当前拖拽项目 根据自己需要写样式 -->
        <view class="inner" :class="{active: active}">
            <text class="text" :class="{'text-active': active}">{{grid.content}}</text>
        </view>
    </template>
</l-drag> 

const list = new Array(7).fill(0).map((v,i) => i);
// 拖拽后新的数据
const newList = ref([])
const change = v => newList.value = v

增删

• 不要给list赋值，这样只会重新初始化
• 增加数据 调用暴露的push
• 删除某条数据调用暴露的remove方法，需要传入oindex

<l-drag :list="list" @change="change" ref="dragRef" after remove>
    <!-- 每一项插槽 grid 的 content 是您传入的数据 -->
    <template #grid="{active, index, oldindex, oindex}">
        <!-- active 是否为当前拖拽项目 根据自己需要写样式 -->
        <!-- index 排序后列表下标 -->
        <!-- oldindex 排序后列表旧下标 -->
        <!-- oindex 列表原始下标，输入的数据排位不会因为排序而改变 -->
        <view class="remove" @click="onRemove(oindex)"></view>
        <view class="inner" :class="{active}">
            <text class="text" :class="{'text-active': active}">{{content}}</text>
        </view>
    </template>
    <template #after>
        <view class="grid">
            <view class="inner extra" @click="onAdd">
                增加
            </view>
        </view>
    </template>
</l-drag> 

const dragRef = ref(null)
const list = new Array(7).fill(0).map((v,i) => i);
const onAdd = () => {
    dragRef.value.push(Math.round(Math.random() * 1000))
}
const onRemove = (oindex) => {
    if(dragRef.value && oindex >= 0) {
        // 记得oindex为数组的原始index
        dragRef.value.remove(oindex)
    }
}

插槽

<l-drag :list="list">
    <!-- 每一项的插槽 -->
    <template #grid="{active, index, oldindex, oindex, content}"></template>
    <!-- 当前拖拽项幽灵插槽 设置`ghost`后使用 主要为实现拖拽时 有个影子跟着 -->
    <template #ghots></template>

    <!-- 前后方插槽为固定在列表前方和后方，不能拖动 -->
    <!-- 列表前方的插槽 设置`before`后使用 -->
    <template #before></template>
    <!-- 列表后方的插槽 设置`after`后使用 -->
    <template #after></template>
</l-drag> 

查看示例

• 导入后直接使用这个标签查看演示效果

<!-- // 代码位于 uni_modules/lime-drag/compoents/lime-drag -->
<lime-drag />

插件标签

• 默认 l-drag 为 component
• 默认 lime-drag 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置

• 关键代码是: 在main.js中 在vue2部分加上这一段即可,官方是把它单独成了一个文件.

  // vue2
  import Vue from 'vue'
  import VueCompositionAPI from '@vue/composition-api'
  Vue.use(VueCompositionAPI)

• 另外插件也用到了TS，vue2可能会遇过官方的TS版本过低的问题,找到HX目录下的compile-typescript目录

  
  // \HBuilderX\plugins\compile-typescript
  yarn add typescript -D

• or - npm install typescript -D

• 小程序需要在manifest.json启用slotMultipleInstance

  "mp-weixin" : {
  "slotMultipleInstance" : true
  }

API

Props

Events

Expose

TODO

将来实现的功能

• splice

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。