下载安装vue-drag-resize
yarn add vue-drag-resize
或
npm install vue-drag-resize
在main.js里面全局引入组件
import VueDragResize from "vue-drag-resize"
Vue.component('vue-drag-resize', VueDragResize)
组件内引入组件
import VueDragResize from "vue-drag-resize";
components: { VueDragResize }
html部分
<template>
<div class="music">
你好
<VueDragResize :isActive="true" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
<!--将这个div的宽高动态设置==VueDrangResize的宽高这样可实时完成缩放-->
<div class="box" :style="{width: + vw+ 'px',height:+vh+'px'}">
<img
src="https://www.apple.com.cn/v/iphone-11/c/images/overview/display/inline_compare_display__fbiiqsjjs0ii_large.jpg"
style="width: 100%;height: 100%"
/>
</div>
</VueDragResize>
<div>
<h3>Hello World!</h3>
<p>{{ vw }} х {{ vh }}</p>
<p>{{ top }} х {{ left }}</p>
</div>
</div>
</template>
js
data() {
// 这里存放数据
return {
vw: 0,
vh: 0,
top: 0,
left: 0,
};
},
created() {
this.vw = 200 + "px";
this.vh = 200 + "px";
},
methods: {
resize(newRect) {
this.vw = newRect.width;
this.vh = newRect.height;
this.top = newRect.top;
this.left = newRect.left;
},
},
vue-drag-resize 参数介绍
1.isActive 是否激活状态
Type: Boolean || Required: false || Default: false
处于激活状态的组件才能进行拖拽与缩放等操作,状态呈现激活状态
isDraggable 是否允许拖拽
Type: Boolean || Required: false || Default: true
isResizable 是否允许缩放
Type: Boolean || Required: false || Default: true
aspectRatio 是否等比例缩放
Type: Boolean || Required: false || Default: false
w 组件宽度
Type: Number || Required: false || Default: 200
h 组件高度
Type: Number || Required: false || Default: 200
minw 最小宽度
Type: Number || Required: false || Default: 50
minh 最小高度
Type: Number || Required: false || Default: 50
注意, minw minh 不能设置为0,因为这个组件里面属性要求大于0
x 定位left
Type: Number || Required: false || Default: 0
y 定位top
Type: Number || Required: false || Default: 0
z 层级
Type: Number || Required: false || Default: auto
注意在元素激活的时候,z会被设置为最高的,所以在管理z的时候要注意
preventActiveBehavior 单击组件外区域来禁止组件行为
Type: Boolean || Required: false || Default: false
设置这个属性true,就可以解决在其他区域操作返回到组件区域的时候,不需要再次点击就激活组件
parentLimitation 是否超出父级元素
Type: Boolean || Required: false || Default: false
设置为true,则限制操作组件不能超出父级元素
parentW 父级宽度
Type: Number || Required: false || Default: 0
该值限制了元素可以拖动的水平最大宽度,前提是parentLimitation=true
parentH 父级高度
Type: Number || Required: false || Default: 0
该值限制了元素可以拖动的水平最大高度,前提是parentLimitation=true
parentScaleX
Type: Number || Required: false || Default: 1
parentScaleY
Type: Number || Required: false || Default: 1
axis 允许拖拽的方向
Type: String || Required: false || Default: both
取值可以为x、 y、 both、none
dragHandle 定义拖拽时的classname
Type: String || Required: false
dragCancel 定义取消拖拽时的classname
Type: String || Required: false
事件
clicked 组件点击事件
Required: false || Parameters: 组件实例
activated 点击组件外事件
Required: false || Parameters: 无
resizing 缩放时事件
Required: false || Parameters: object
{
left: Number, //the X position of the component
top: Number, //the Y position of the component
width: Number, //the width of the component
height: Number //the height of the component
}
resizestop 缩放结束
Required: false || Parameters: object
object 同resizing的object
dragging 拖拽时事件
Required: false || Parameters: object
object 同resizing的object
dragstop 拖拽结束事件
Required: false || Parameters: object
object 同resizing的object