Vue3中使用 VueDraggableResizable

最新推荐文章于 2026-04-24 09:17:08 发布

原创最新推荐文章于 2026-04-24 09:17:08 发布 · 6.4k 阅读 ·

大模型引用 2 次

本内容遵循CC 4.0 BY-SA版权协议

cheguang03

关注

标签

#前端 #vue.js

分类前端开发

收录于

本文介绍了如何在Vue项目中安装并使用vue-draggable-resizable组件，包括步骤、组件引入、参数说明，以及dragging和resizestop事件的用法。附带了详细文档链接。

一，安装指定依赖 npm install vue-draggable-resizable --save

二，在指定的页面中引入

js代码

<script lang="ts">
//引入组件 注意和vue2中的路径不同
import VueDraggableResizable from 'vue-draggable-resizable/src/components/vue-draggable-resizable.vue'
//引入样式
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'


export default {
  name: 'App',
  components: {
    VueDraggableResizable,
  }
}
</script>

html代码

<div   style="height: 100vh;width:100vw">
    <vue-draggable-resizable
          v-for="(item, index) in chartArr"
          :key="item.id"
          @click="selectChart(item.id, index)"
          @dragging="onDragging(item.id, index)"
          :w="item.width"
          :h="item.height"
          :x="50 + index * 50"
          :y="50"
          :min-width="300"
          :min-height="200"
          :parent="true"
          :grid="[10, 10]"
          @resizestop="onResize"
        >
        
          <!-- 在此区域写入拖拽的内容 -->
        
        </vue-draggable-resizable>
</div>