vue实现鼠标选中div拖拽缩放功能

实现功能：

鼠标选中一个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>