vue拉伸div边框加高div 类似于浏览器F12控制台那样的拉高效果
直接上代码了 复制过去即可使用
<template>
<div>
<div id="app">
<div class="box-bottom" ref="drag_box" :style="'height:'+realBoxHeight+'px'" @mouseup="mouseUpHandleelse($event)">
<div
class="box-click"
@mousedown="mouseDownHandleelse($event)"
@mouseup="mouseUpHandleelse($event)"
></div>1
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
boxHeight: undefined, //当前容器高度
boxTopHeight: undefined, //容器距离顶部距离
realBoxHeight: undefined //实际高度
};
},
methods: {
mouseDownHandleelse(e) {
this.boxTopHeight = this.$refs.drag_box.offsetTop; //容器距离顶部距离
this.boxHeight = this.$refs.drag_box.offsetHeight; //当前容器高度
console.log(this.boxHeight);
window.onmousemove = this.mouseMoveHandleelse;
},
// 鼠标移动
mouseMoveHandleelse(event) {
this.realBoxHeight = this.boxHeight + (this.boxTopHeight - event.clientY +86);
},
mouseUpHandleelse(e) {
console.log(1);
window.onmousemove = null;
}
}
};
</script>
<style lang="scss" scoped>
.box-bottom {
position: absolute;
background-color: #FFF;
z-index: 999;
bottom: 0;
height: 40%;
width: 100%;
.box-click {
height: 2px;
background-color: gray;
cursor: n-resize;
}
}
</style>
//----vastwu