更新记录

1.0.0（2025-03-24）

feat: 拖拽组件1.0

平台兼容性

wsd-draggable 可拖拽列表

Props

Events

Slots

Example

<template>
    <view class="wsd-demo-page">
        <scroll-view
            :scroll-y="!disableScroll"
            id="demo-scroll-view"
            class="wsd-demo-page__scroll"
        >
            <wsd-draggable
                :grid="3"
                :gap="10"
                :viewport="viewport"
                :longpress="false"
                v-model:dataSource="dataSource"
                customItemClass="demo-draggable-item"
                @onDrag="disableScroll = true"
                @onDrop="disableScroll = false"
            ></wsd-draggable>
        </scroll-view>
    </view>
</template>

<script setup>
import { getCurrentInstance, nextTick, onMounted, ref } from "vue";
import { getNodeRect } from "../utils";

const data = [];
for (let i = 0; i <= 42; i++) {
    data.push({
        id: i,
        label: `label-${i}`,
    });
}

const _instance = getCurrentInstance();
const dataSource = ref(data);
const viewport = ref(null);
const disableScroll = ref(false);

onMounted(() => {
    nextTick(async () => {
        viewport.value = await getNodeRect("#demo-scroll-view", _instance);
    });
});
</script>

<style lang="scss" scoped>
.wsd-demo-page {
    position: relative;
    box-sizing: border-box;
    padding: 15vh 20px 5vh;
    height: 100vh;
    width: 100vw;

    &__scroll {
        position: relative;
        height: 100%;
        width: 100%;
    }

    :deep(.demo-draggable-item) {
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        height: 60px;
    }
}
</style>

Infos

使用作用域插槽进行渲染时，如果数据存在增加/删除这类操作，插槽内容会被复用渲染，可能存在渲染更新异常。建议直接拷贝组件，直接在拷贝的组件中实现列表项渲染以及数据更新