当前位置：首页 > article >正文

vue3+elementPlus使用vuedraggable实现照片墙拖拽调整位置

article 2025/3/19 23:20:31

一.什么是vuedraggable？

1.简介：vuedraggable是一个可以实现元素拖拽的vue组件，该组件轻便、实用、简单易上手。通常用于各种表格、表单、看板、列表等功能中

2.下载vuedraggable的命令

npm install vuedraggable --save

下载成功后，可在package.json 文件中查看

二.使用vuedraggable结合el-upload图片上传照片墙，实现图片上传后可拖拽调整位置

1.切记，引入组件再使用

import draggable from "vuedraggable";

2.html部分

<draggable v-model="fileList" class="drag_img" item-key="url">
                                    <template #item="{ element }">
                                        <div class="img_item">
                                            <img :src="element.url" alt="" style="width: 100%;height: 100%;">
                                            <!-- 图片的遮罩 预览 和 删除 -->
                                            <div class="shade">
                                                <div class="img_operate">
                                                    <el-icon>
                                                        <ZoomIn @click="handlePictureCardPreview(element)"
                                                            style="cursor:pointer;" />
                                                    </el-icon>
                                                    <el-icon style="margin: 0 10px;">
                                                        <DeleteFilled @click="handleRemove(element)"
                                                            style="cursor: pointer;" />
                                                    </el-icon>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
</draggable>
<!-- 用组件标签包裹住照片墙部分，下方上传图片不用包裹，否则会让上传图片图标也能拖拽 -->
<el-upload v-model:file-list="fileList"
                                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                    list-type="picture-card" :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove" :show-file-list="false">
                                    <el-icon>
                                        <Picture />
                                    </el-icon>
</el-upload>
<el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>

3.js部分

import type { UploadProps, UploadUserFile } from 'element-plus'
const fileList = ref<UploadUserFile[]>([
    // 可放置初始图片
])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
// elementPlus 原删除方法
// const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
//     console.log(uploadFile, uploadFiles)
// }
interface UploadFile {
    status: string;
    url: string;
}
const handleRemove = (uploadFile: UploadFile) => {
    // console.log(uploadFile);
    if (uploadFile?.status && uploadFile?.status === "success") {
        const address = uploadFile.url
        fileList.value = fileList.value.filter(i => i.url !== address)
    }
};

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}