vue 2个方法先后执行_2个很酷的 Vue 自由拖拽+缩放组件

今天给小伙伴们推荐2个很棒的基于 Vue.js 拖拽与缩放组件VueDragResize，并贴上Github地址和代码示例。

1、Vue-Drag-Resize

vue-drag-resize 是一款高质量的基于 Vue.js 用于可调整大小和可拖动元素插件，没有外部依赖。

安装

$ 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

2、VueDraggableResizable

vue-draggable-resizable 基于 Vue2 的高定制化拖拽缩放组件，让页面拖拽缩放变得如此简单！

安装

$ 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 }}

提供各种演示示例及源码展示，总有一个适合你。

# 预览地址https://mauricius.github.io/vue-draggable-resizable/# github地址https://github.com/mauricius/vue-draggable-resizable

ok，今天的分享就到这里。如果感兴趣可以自己去尝试一下哈~~~