vue 可拖拽可缩放 vue-draggable-resizable 组件常用总结

一、特征

1、没有依赖
2、使用可拖动，可调整大小或两者兼备
3、定义用于调整大小的句柄
4、限制大小和移动到父元素或自定义选择器
5、将元素捕捉到自定义网格
6、将拖动限制为垂直或水平轴
7、保持纵横比
8、启用触控功能
9、使用自己的样式
10、为句柄提供自己的样式

二、安装

npm install --save vue-draggable-resizable

三、局部注册

import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

四、常用属性总结

:w 默认宽度
:h 默认高度
:x="50" 默认水平坐标 注意相对元素是谁
:y="50" 默认垂直最表 注意相对元素是谁
:min-width="50" 最小宽度
:min-height="50" 最小高度
:parent="true" 限制不能拖出父元素
parent=".p-event" 限制不能拖出class为p-event的元素
:grid 水平和垂直移动 每次分别能够走多少像素
class-name 自定义组件class 下面定义一个dragging1

五、常用事件总结

@dragging="onDrag"  每当拖动组件时调用。
@resizing="onResize" 每当组件调整大小时调用。

@dragstop="onDragstop" 每当组件停止拖动时调用。
@resizestop="onResizstop" 每当组件停止调整大小时调用
@deactivated="onDeactivated" 每当用户单击组件外的任何位置时调用
@activated="onActivated" 单击组件时调用，以显示句柄。备注：句柄就是点击组件后上下左右的可以拉伸的方块点

六、案例

1、html

<div class="helloword">
  <div class="text-event">
    <vue-draggable-resizable
      :w="150"
      :h="150"
      :x="50"
      :y="50"
      :min-width="50"
      :min-height="50"
      :parent="true"
      :grid="[10,10]"
      class-name="dragging1"
      @dragging="onDrag"
      @resizing="onResize"
    >
      <p>
        你好！ 我是一个灵活的组件。 你可以拖我四处，你可以调整我的大小。
        <br />
        X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}
      </p>
    </vue-draggable-resizable>
  </div>

  <!-- 相对于class等于什么的标记拖拽 注意指定 parent -->
  <div class="p-event">
    <vue-draggable-resizable 
    parent=".p-event"
    >
      <p>You can drag me around and resize me as you wish.</p>
    </vue-draggable-resizable>
  </div>
</div>

2、js

export default {
  name: "HelloWorld",
  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;
    }
  }
};

3、css

.helloword {
  overflow: hidden;
}
.text-event {
  float: left;
  height: 500px;
  width: 500px;
  border: 1px solid red;
  position: relative;
　　/* 网格设置 */
　　background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 10px 10px, linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 10px 10px;
}
.p-event {
  float: left;
  height: 300px;
  width: 300px;
  border: 1px solid blue;
  position: relative;
  margin-left: 20px;
}

.dragging1 {
  border: 1px solid #000;
  color: #000;
}