element ui 侧边栏手动缩放

html代码

<div @mousemove="shrinkMove" @mouseup="shrinkUp" style="width:100%; height:100%">
    <el-container>
        <el-aside :width="fatherWidth" class="bd-top flex" style="position:relative;">
            <aside-component></aside-component>
            <div class="resize" @mousedown="shrinkDown" title="Shrink sidebar"></div>
        </el-aside>
        <el-main style="background-color: var(--color-background)">
            <component :is="mainComponent"></component>
        </el-main>
    </el-container>
</div>

js代码

data() {
    return {
        mainComponent: "mainStartCom",
        isShrink: false,//控制是否改变宽度
    }
},
methods: {
    shrinkMove(e) {
        if (this.isShrink) {
            let wid = e.screenX + 5//误差值
            if (wid <= 65) {// 设定65为最短宽度
                this.$store.commit('changeCollapse', true)
                this.$store.commit('changeFatherWidth', '65px')
            }else {
                this.$store.commit('changeCollapse', false)
                this.$store.commit('changeFatherWidth', wid + 'px')
            }
        }
    },
    shrinkDown(e) {
        this.isShrink = true
    },
    shrinkUp(e) {
        this.isShrink = false
    }
}

css代码：

.resize {
    cursor: col-resize;
    position: absolute;
    right: 0;
    height: 100%;
    width: 5px;
}

copy其他人的，在自己项目里面使用了，没有问题，记录一下，方便后期查阅