今天给小伙伴们推荐2个很棒的基于 Vue.js 拖拽与缩放组件VueDragResize,并贴上Github地址和代码示例。
![6aabc6c07d1a476aba990ed910519d7e.png](https://i-blog.csdnimg.cn/blog_migrate/17e0eec65a44b3469434d1c68ff4f82d.jpeg)
1、Vue-Drag-Resize
vue-drag-resize 是一款高质量的基于 Vue.js 用于可调整大小和可拖动元素插件,没有外部依赖。
![d09328c3a02a251cf42cbf5daf02a62b.png](https://i-blog.csdnimg.cn/blog_migrate/ed5be15f2723999d2b29dd4497019aac.jpeg)
安装
$ npm i vue-drag-resize -S
插件使用
![]()
*如果使用拖拽缩放后,出现文本框input无法输入的情况,可尝试使用以下方法解决。
methods: { onActivated() { this.$refs['yourinput'].focus(); }}
附上示例链接及仓库地址
# 预览地址http://kirillmurashov.com/vue-drag-resize/# github地址https://github.com/kirillmurashov/vue-drag-resize
![45767c91e5eba65962910f35487d3820.png](https://i-blog.csdnimg.cn/blog_migrate/5ba1ba97cc7f86fbbe946e33514c53ec.jpeg)
2、VueDraggableResizable
vue-draggable-resizable 基于 Vue2 的高定制化拖拽缩放组件,让页面拖拽缩放变得如此简单!
![e8521b9499253150a880674ba144e5de.png](https://i-blog.csdnimg.cn/blog_migrate/198cfbffe345362d4e0c2a4cce52b3ed.jpeg)
![0881e5ec292d37adaa9b8960d84ad1c4.png](https://i-blog.csdnimg.cn/blog_migrate/14981b309c3ffcdf1cc04d1a3a1d0598.jpeg)
安装
$ npm i vue-draggable-resizable -S
插件使用
Hello! I'm a flexible component. You can drag me around and you can resize me.
X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}
提供各种演示示例及源码展示,总有一个适合你。
![85e3dd14b98f727ebec0b45b6894ac1a.png](https://i-blog.csdnimg.cn/blog_migrate/dca7e0775f85df4d1b33e41722ed2ce5.jpeg)
# 预览地址https://mauricius.github.io/vue-draggable-resizable/# github地址https://github.com/mauricius/vue-draggable-resizable
ok,今天的分享就到这里。如果感兴趣可以自己去尝试一下哈~~~