2个很酷的 Vue 自由拖拽 缩放组件

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

1、Vue-Drag-Resize

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

安装

$ npm i vue-drag-resize -S

插件使用

<template>  <div>    <VueDragResize :w='200' :h='200' v-on:resizing='resize' v-on:dragging='resize'>      <img src='../assets/logo-vue.png' v-drag height='150px' width='150px' />    </VueDragResize>  </div></template><script>import VueDragResize from 'vue-drag-resize';export default {  components: {    VueDragResize  },    data() {    return {      top: 0, left: 0, width: 0, height: 0    }  },    methods: {    resize(newRect) {      this.width = newRect.width;      this.height = newRect.height;      this.top = newRect.top;      this.left = newRect.left;    }  }};</script><style>  // outline: none：去除拖拽组件的边框  .vdr.active:before{    outline: none  }</style>

*如果使用拖拽缩放后，出现文本框input无法输入的情况，可尝试使用以下方法解决。

<vue-drag-resize @activated='onActivated'>methods: { onActivated() { this.$refs['yourinput'].focus(); }}

附上示例链接及仓库地址

# 预览地址http:///vue-drag-resize/# github地址https://github.com/kirillmurashov/vue-drag-resize

2、VueDraggableResizable

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

安装

$ npm i vue-draggable-resizable -S

插件使用

<template>  <div style='height: 500px; width: 500px; border: 1px solid red; position: relative;'>    <vue-draggable-resizable :w='100' :h='100' @dragging='onDrag' @resizing='onResize' :parent='true'>      <p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>      X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>    </vue-draggable-resizable>  </div></template><script>import VueDraggableResizable from 'vue-draggable-resizable'export default {  components: {    VueDraggableResizable  },  data: function () {    return {      width: 0,      height: 0,      x: 0,      y: 0    }  },  methods: {    onResize: function (x, y, width, height) {      this.x = x      this.y = y      this.width = width      this.height = height    },    onDrag: function (x, y) {      this.x = x      this.y = y    }  }}</script>

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

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

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