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其他人的,在自己项目里面使用了,没有问题,记录一下,方便后期查阅