VUE拖动调节

原理就是通过监听鼠标移动事件来动态改变组件的宽度样式，实现拖动。

1. 新建VUE文件dragToAdapt.vue

<template>
    <div class="x-handle" @mousedown="mouseDown"></div>
</template>

<script>
    export default {
        name: "XHandle",
        data() {
            return {
                lastX: ""
            };
        },

        created() {
            document.addEventListener("mouseup", this.mouseUp);
        },

        destroyed() {
            document.removeEventListener("mouseup", this.mouseUp);
        },

        methods: {
            mouseDown(event) {
                document.addEventListener("mousemove", this.mouseMove);
                this.lastX = event.screenX;
            },
            mouseMove(event) {
                this.$emit("widthChange", this.lastX - event.screenX);
                this.lastX = event.screenX;
            },
            mouseUp() {
                this.lastX = "";
                document.removeEventListener("mousemove", this.mouseMove);
            }
        }
    };
</script>
<style lang="less">
    .x-handle {
        width: 3px;
        cursor: w-resize;
        z-index: 10;
        background: #ccc;
    }
</style>

2. 将要拖动的组件外部使用div包裹

<div style="display: flex;">
  <el-aside :style="{ width: dargWidth + 'px' }">
    <Tree @itemClick="handleItemClick"></Tree>
  </el-aside>
  <x-handle class="myxhandle" @widthChange="widthChange"></x-handle>
</div>

3. method中指定对应方法

widthChange(movement) {
   this.dargWidth -= movement;
   if (this.dargWidth < 270) {
     this.dargWidth = 270;
   }
   if (this.dargWidth > 700) {
     this.dargWidth = 700;
   }
 },