vue 拖拽图片调整图片位置

安装依赖:npm install vuedraggable --save

引入:import draggable from 'vuedraggable';

 components: {

        draggable

    },

使用:

<draggable v-model="image" group="people" @change="change" @start="start" @end="end">

                                <div v-for="(item, index) in image" :key="index">

                                    <img style="width: 100%;height: 100%" :src="item" alt="">

                                </div>

</draggable>

js:

监听

change(event) {

            console.log('监听');

            console.log(event);

            console.log(this.image);

},

拖拽

start(event) {

            console.log('拖拽');

            console.log(event);

            console.log(this.image);

},

结束

 end() {

            console.log('结束');

            console.log(event);

            console.log(this.image);

},

纯属个人记录个人不会的,请谅解

### 实现 Vue拖拽上传图片并展示调整位置 为了实现这一功能,可以采用 `Element Plus` 库中的 `el-upload` 组件来处理文件上传,并利用 HTML5 拖放 API 来支持图片位置调整。下面是一个完整的解决方案。 #### 创建新的 Vue 项目 首先,创建一个新的 Vue 项目以便于集成所需的功能: ```bash vue create drag-and-drop-upload ``` 安装必要的依赖项,包括 `element-plus` 和其他可能需要用到的库: ```bash npm install element-plus vuedraggable ``` #### 编写组件代码 接下来,在项目的合适路径下编写用于实现该特性的 Vue 单文件组件 (SFC),例如命名为 `ImageUploader.vue`: ```html <template> <div class="upload-container"> <!-- 文件上传区域 --> <el-upload action="#" :on-change="handleChange" multiple :auto-upload="false" list-type="picture-card" :file-list="images" ref="uploadRef" accept=".jpg,.jpeg,.png" @drop.prevent.native="handleDrop" @dragover.prevent.native="" > <i class="el-icon-plus"></i> </el-upload> <!-- 已上传图片列表 --> <draggable v-model="images" item-key="uid" tag="transition-group" name="fade"> <template #item="{ element }"> <div class="image-item"> <img :src="element.url" alt="" /> <span class="action-icons"> <i class="el-icon-delete" @click.stop="removeImage(element.uid)"></i> <i class="el-icon-zoom-in" @click.stop="viewImage(element.url)"></i> </span> </div> </template> </draggable> <!-- 查看大图对话框 --> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="largeImageUrl" alt="Large Image Preview"/> </el-dialog> </div> </template> <script lang="ts"> import { defineComponent, reactive, toRefs, Ref, ref } from 'vue'; import draggable from 'vuedraggable'; export default defineComponent({ components: { draggable, }, setup() { const state = reactive({ images: [] as any[], dialogVisible: false, largeImageUrl: '' }); function handleChange(file: any): void { file.url = URL.createObjectURL(file.raw); state.images.push(file); } function handleDrop(event: DragEvent): void { Array.from(event.dataTransfer.files).forEach((f) => { if(f.type.startsWith('image/')){ let newFile = {...new File([f], f.name)}; newFile.url = URL.createObjectURL(f); state.images.push(newFile); } }); } function removeImage(uid:string){ state.images = state.images.filter(item=>item.uid !== uid); } function viewImage(url:string){ state.largeImageUrl=url; state.dialogVisible=true; } return { ...toRefs(state), handleChange, handleDrop, removeImage, viewImage }; } }); </script> <style scoped> .upload-container{ display:flex; flex-direction:column; } .image-item img{width:80px;height:auto;} .action-icons i:hover{color:red;cursor:pointer;} </style> ``` 此段代码展示了如何使用 `el-upload` 处理图片上传以及通过 `vuedraggable` 对已上传的图片进行重新排列[^2]。同时提供了删除和预览大图的能力[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值