vue3.0拖拽缩放组件

最新推荐文章于 2025-07-16 14:54:54 发布

置顶

张一西-告白confession

最新推荐文章于 2025-07-16 14:54:54 发布

阅读量4.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：杂七杂八文章标签： vue3.0 拖拽缩放组件 vue3.0组件

本文链接：https://blog.csdn.net/qq_42459742/article/details/113091121

本人开发vue3.0拖拽缩放组件，持续更新中（最新版本 0.3.0 支持拖拽、缩放、旋转、移动辅助线、激活和取消激活、复制粘贴、删除、键盘移动等功能，预计加入撤回操作、多选全选等功能）

github地址： https://github.com/zzz0908/vue3-resize-drag
npmjs地址: https://www.npmjs.com/package/vue3-resize-drag

demo:
在这里插入图片描述

文档

vue3.0拖拽缩放插件

下载并引入
npm i vue3-resize-drag -S
yarn add vue3-resize-drag -S

import vue3ResizeDrag from 'vue3-resize-drag'
const app = createApp(App)
app.use(vue3ResizeDrag)

## 注意:
如果vue3.0中使用ts了,那么请在src/shims-vue.d.ts声明文件中加入此插件声明:
declare module 'vue3-resize-drag'

组件用法: setup代码可抽离到其他文件，这里为了方便观看就放一起了

<template>
    <vue3ResizeDrag 
        v-for="item in data.data" 
        :key="item.name" 
        :x="item.x"   <!-- x 为组件left位置 -->
        :y="item.y"   <