实现功能:
鼠标选中一个div,并且有选中样式,点击八个角实现鼠标拖拽div进行缩放
代码如下:
<template>
<div id="pageBox">
<div id="container" @click="clickBox" :style="isselect ? selectStyle : ''">
<div class="point top" v-show="isselect"></div>
<div class="point left" v-show="isselect"></div>
<div class="point right" v-show="isselect"></div>
<div class="point bottom" v-show="isselect"></div>
<div class="point top-left" v-show="isselect"></div>
<div class="point top-right" v-show="isselect"></div>
<div class="point bottom-left" v-show="isselect"></div>
<div class="point bottom-right" v-show="isselect"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 页面对象
pageObj: null,
// 缩放元素
zoomBox: null,
// 是否允许缩放
resizeable: false,
// 鼠标按下时的坐标,并在修改尺寸时保存上一个鼠标的位置
clientX: 0,
clientY: 0,
// div可修改的最小宽高
minW: 8,
minH: 8,
// 鼠标按下时的位置,使用n、s、w、e表示
direc: '',
isselect: false,
selectStyle: {
border: '1px dashed #19be6b',
cursor: 'pointer'
}
}
},
created() {},
mounted() {
this.pageObj = document.getElementById('pageBox')
},
methods: {
clickBox() {
console.log('点击选中')
console.log('可拖拽', this.resizeable)
this.isselect = true
// 需要调整尺寸的div
this.zoomBox = document.getElementById('container')
// 鼠标按下事件
this.zoomBox.onmousedown = this.zoomDown
// 页面监听移动事件
this.pageObj.onmousemove = this.zoomMove
// 鼠标松开事件
this.pageObj.onmouseup = this.zoomUp
},
// 鼠标按下
zoomDown(e) {
console.log('鼠标按下', e)
// 去除鼠标默认事件
document.oncontextmenu = function(e) {
e.preventDefault()
}
// 阻止冒泡
e.stopPropagation()
let oEvent = e || event
let d = this.getDirection(oEvent)
// 当位置为四个边和四个角时才开启尺寸修改
if (d !== '') {
this.resizeable = true
this.direc = d
this.clientX = e.clientX
this.clientY = e.clientY
}
},
// 缩放移动
zoomMove(e) {
let oEvent = e || event
let d = this.getDirection(oEvent)
let cursor = ''
if (d === '') {
// 默认移动鼠标样式
cursor = 'move'
} else {
// 缩放鼠标样式
cursor = d + '-resize'
}
// 修改鼠标显示效果
this.zoomBox.style.cursor = cursor
// 当开启尺寸修改时,鼠标移动会修改div尺寸
if (this.resizeable) {
// 鼠标按下的位置在右边,修改宽度
if (this.direc.indexOf('e') !== -1) {
this.zoomBox.style.width = Math.max(this.minW, this.zoomBox.offsetWidth + (e.clientX - this.clientX)) + 'px'
this.clientX = e.clientX
}
// 鼠标按下的位置在上部,修改高度
if (this.direc.indexOf('n') !== -1) {
this.zoomBox.style.height = Math.max(this.minH, this.zoomBox.offsetHeight + (this.clientY - e.clientY)) + 'px'
this.clientY = e.clientY
}
// 鼠标按下的位置在底部,修改高度
if (this.direc.indexOf('s') !== -1) {
this.zoomBox.style.height = Math.max(this.minH, this.zoomBox.offsetHeight + (e.clientY - this.clientY)) + 'px'
this.clientY = e.clientY
}
// 鼠标按下的位置在左边,修改宽度
if (this.direc.indexOf('w') !== -1) {
this.zoomBox.style.width = Math.max(this.minW, this.zoomBox.offsetWidth + (this.clientX - e.clientX)) + 'px'
this.clientX = e.clientX
}
}
},
// 鼠标抬起
zoomUp() {
console.log('鼠标抬起')
this.resizeable = false
this.isselect = false
this.zoomBox.onmousedown = null
this.pageObj.onmousemove = null
this.pageObj.onmouseup = null
},
// 获取鼠标所在div的位置
getDirection(ev) {
let dir = ''
if (ev.target.className.indexOf('top') >= 0) {
dir += 'n'
} else if (ev.target.className.indexOf('bottom') >= 0) {
dir += 's'
}
if (ev.target.className.indexOf('left') >= 0) {
dir += 'w'
} else if (ev.target.className.indexOf('right') >= 0) {
dir += 'e'
}
if (ev.target.className.indexOf('item') >= 0) {
dir = 'move'
}
return dir
}
}
}
</script>
<style lang="less" scoped>
#container {
width: 200px;
height: 200px;
padding: 15px;
box-sizing: border-box;
position: relative;
margin: 40px;
cursor: default;
background: #757575;
}
.point{
width: 10px;
height: 10px;
border-radius: 2px;
border: 1px solid #19be6b;
position: absolute;
}
.top{
top: -5px;
left: 50%;
}
.bottom{
bottom: -5px;
left: 50%;
}
.left{
left: -5px;
top: 50%;
}
.right{
right: -5px;
top: 50%;
}
.top-left{
top: -5px;
left: -5px;
}
.bottom-left{
bottom: -5px;
left: -5px;
}
.top-right{
top: -5px;
right: -5px;
}
.bottom-right{
bottom: -5px;
right: -5px;
}
</style>