更新记录

1.0.0（2025-08-07）

暂无

平台兼容性

uni-app(4.07)

其他

ting-drag

<template>
    <view class="content">
        <ting-drag ref="tingDrag" @touchMove="touchMove" @touchEnd="touchEnd" 
        @touchStart="touchStart" :opt="options" @batchDelete="batchDelete" 
        @handleMove="handleMove" @selectedImage="selectedImage"></ting-drag>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                options:{
                    isSafe:true, //是否需要开启安全底部距离
                    delBtnTitle:"批量删除",  //删除按钮的名称
                    showImageView:true,  //是否开启点击展示图片
                    deleteColor:"red",  //删除按钮的背景色
                    openDelete:true,  //是否开启删除图片的功能
                    openMove:true,  //是否开启移动功能
                    alreadyMove:"确定移动",  //移动按钮在移动状态下的名称
                    noMove:"点我移动", //移动按钮在未移动状态下的名称
                    alreadyMoveColor:"#5eb93d", //移动状态下的移动按钮的背景色
                    noMoveColor:"#ff843f", //未移动状态下的移动按钮的背景色
                    classStyle:"", //移动时，跟随鼠标移动的图片的样式
                    viewImageStyle:"" //点击展示的图片样式
                },
                demoList: [{
                    id: 1,
                    src: "../../../../static/demo/0.jpg",
                    selected: false
                }, {
                    id: 2,
                    src: "../../../../static/demo/1.jpg",
                    selected: false
                }, {
                    id: 3,
                    src: "../../../../static/demo/2.jpg",
                    selected: false
                }, {
                    id: 4,
                    src: "../../../../static/demo/3.jpg",
                    selected: false
                }, {
                    id: 5,
                    src: "../../../../static/demo/4.jpg",
                    selected: false
                }, {
                    id: 6,
                    src: "../../../../static/demo/5.jpg",
                    selected: false
                }, {
                    id: 7,
                    src: "../../../../static/demo/6.jpg",
                    selected: false
                }, {
                    id: 8,
                    src: "../../../../static/demo/7.jpg",
                    selected: false
                }, {
                    id: 9,
                    src: "../../../../static/demo/8.jpg",
                    selected: false
                }, {
                    id: 10,
                    src: "../../../../static/demo/9.jpg",
                    selected: false
                }, {
                    id: 11,
                    src: "../../../../static/demo/10.jpg",
                    selected: false
                }, {
                    id: 12,
                    src: "../../../../static/demo/11.jpg",
                    selected: false
                }, {
                    id: 13,
                    src: "../../../../static/demo/12.jpg",
                    selected: false
                }, {
                    id: 14,
                    src: "../../../../static/demo/13.jpg",
                    selected: false
                }, {
                    id: 15,
                    src: "../../../../static/demo/14.jpg",
                    selected: false
                }]
            }
        },
        onLoad() {

        },
        mounted(){
            this.$refs.tingDrag.setDataList(this.demoList);
        },
        methods: {
            touchMove(event,item){
                // console.log(event,"移动中的事件");
                // console.log(item,"移动中的图片");
            },
            touchEnd(event,item){
                // console.log(event,"结束移动的事件");
                // console.log(item,"结束移动的图片");
            },
            touchStart(event,item){
                // console.log(event,"开始移动的事件");
                // console.log(item,"开始移动的图片");
            },
            handleMove(isMove){
                // console.log(isMove,"是否点击移动操作");
            },
            batchDelete(deleted,demoList){
                // console.log(deleted,"删除的图片");
                // console.log(demoList,"剩余的图片");
            },
            selectedImage(item){
                // console.log(item,"选择的图片");
            }
        }
    }
</script>