vue-draggable-resizable 可拖拽缩放组件的使用

需求：实现这个天气风险提醒框可以拖拽可改变大小

实现：利用vue-draggable-resizable组件
官网链接：https:/u二恶/developer.aliyun.com/mirror/npm/package/vue-draggable-resizable#live-playground

实现方法：
1.在vue项目中安装

npm install --save vue-draggable-resizable

2.全局注册组件main.js中写入

import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
 
// 可选择导入默认样式
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable)

3.局部注册：在使用的组件里引入

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

在需要的组件中引入

  <template>
      <div id="app">
      <vue-drag-resize></vue-drag-resize>
  </template>
  import VueDragResize from 'vue-drag-resize';
  export default {
      name: 'app',
      components: {
          VueDragResize
      },
  }
复制代码

我用到的是拖拽和缩放以及设置初始宽高，可拖拽的最小宽高，以及限制不能拖出父元素

部分代码如下：

  <vue-drag-resize
    :parent="true"// 限制不能拖出父元素
    :draggable="true"//可拖拽
    :resizable="true"// 可缩放
    :w="495"// 默认宽度
    :h="384" //默认高度
    :min-width="380"//最小宽度
    :min-height="240"//最小高度
    class="risk-remind">
    ....
  </vue-drag-resize>

注意：我的这个框是用了定位，如果他外面有父元素，记得要给父元素设置宽高，不然拖拽会出错。如果缩放，布局最好采用百分比布局。

常用属性

: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" 单击组件时调用，以显示句柄。备注：句柄就是点击组件后上下左右的可以拉伸的方块点