你生活在光亮里，你就觉得全世界都是光亮的
前言
1 介绍
常用属性 props
isActive
// 是否激活
//激活状态可拖拽和缩放
:isActive="true"
w/h
// 可拖拽容器宽高
// 默认100 * 100
:w="100"
:h="100"
parentLimitation
// 是否被父级容器限制
// 必须自定可拖拽区域宽高(w/h)
:parentLimitation="true"
常用事件 events
activated
//点击拖拽容器时触发
// 激活容器
@activated = “activated”
deactivated
// 点击拖拽容器以外区域时触发
// 置灰容器
@deactivated = “deactivated”
resizing
// 改变区域大小时触发
@resizing = “resizing”
dragging
// 拖拽容器时触发
@dragging = “dragging”
dragstop
// 拖拽结束时触发
@dragstop = “dragstop”
常用样式 style
active:before
// 取消默认外边框虚线
.vdr.active:before {
display：none；
}
2 使用
安装
npm install vue-drag-resize --save
弹窗拖拽
<template>
<div class="BaseDragResize">
<VueDragResize
:w="76"
:h="40"
:z="999"
:isActive="isActive"
:isResizable="true"
class="BaseDragResize-drag"
parentLimitation
@resizing="resize"
@dragging="resize"
@dragstop="dragstop"
@activated="isActive = true"
@deactivated="isActive = false"
>
<h3>Hello World!</h3>
<p>{{ top }} х {{ left }}</p>
<p>{{ width }} х {{ height }}</p>
</VueDragResize>
</div>
</template>
<script>
import VueDragResize from 'vue-drag-resize'
export default {
components: {
VueDragResize
},
data() {
return {
isActive: false,
width: 0,
height: 0,
top: 0,
left: 0
}
},
methods: {
resize(newRect) {
this.width = newRect.width
this.height = newRect.height
this.top = newRect.top
this.left = newRect.left
},
dragstop(newRect) {
console.log('dragstop', newRect)
},
deactivated(e) {
console.log('deactivated', e)
}
}
}
</script>
<style lang="scss" scoped>
.BaseDragResize {
position: relative;
margin: auto;
width: 500px;
height: 500px;
border: 1px solid salmon;
&-drag {
&.active:before {
display: none;
}
}
}
</style>
3.注意
1.使用 parentLimitation 限制拖拽范围
2.h/w必须给固定值，否则限制范围有误
尾声
今晚的风有些轻柔，请不要关窗，我怕在梦里找不到你~
晚安 ^_^
