更新记录

1.0.2（2022-01-14） 下载此版本

使用transition-group实现动画效果

1.0.1（2022-01-14） 下载此版本

使用transition-group实现动画效果

平台兼容性

uni-app

1.使用案列

<template>
    <view class="content">
        <drag-sort v-model="arr" :disabled="true" @change="click" :touchTime="1000" lable="lable" :dragStyle="{background:'yellow'}" :dragName="['tianjia']" height="100rpx" :num="3">
            <template #default="{item}">
                <view style="font-size: 20rpx;color: #fff;text-align: center;line-height: 100rpx;" :style="{background:item.background}">{{item.lable}}</view>
            </template>
        </drag-sort>
    </view>
</template>

<script>
    import dragSort from '@/pages/components/dragSort/dragSort.vue'
    export default {
        components:{
            dragSort
        },
        data() {
            return {
                arr:[
                    {lable:'hello1',background:'#a9dd7a'},
                    {lable:'hello2',background:'#299ff3'},
                    {lable:'hello3',background:'#5069e3'},
                    {lable:'hello4',background:'#b34ee7'},
                    {lable:'hello5',background:'#df589d'},
                    {lable:'hello6',background:'#dfaf58'},
                    {lable:'hello7',background:'#ff0000'},
                    {lable:'hello8',background:'#ede368'},
                    {lable:'hello9',background:'#9e9e9e'},
                    {lable:'hello10',background:'#795548'}
                ]
            }
        },
        methods: {
            click(e){
                console.log(e.item,e.index)
            },
        }
    }
</script>

2.注意事项

    （1）插槽为每块内容，使用时添加 #default="{item}"，item为数组的每项内容；
    （2）由于内部使用flex布局，宽度根据父级元素宽度而定，使用样式参数时不要设置宽度；
    （3）动画时长设置的是0.5s