1、思路
通过设置css变量,强制改变el-drawer组件高度。
2、方法
在data中设置一个高度变量
data(){
return {
drawerHeight: "389",
}
}
创建一个el-drawer组件,并增加mousedown方法
<el-drawer
title="控制台"
id="consoleBody"
:modal="false"
:show-close="true"
direction="btt"
size="100%"
:wrapperClosable="false"
:visible.sync="consoleDrawVisible"
>
<div
id="line"
@mousedown="getDivHeight"
ref="moveDom"
class="dragLine"
></div>
<div class="console-body">
/* 控制台内容 */
</div>
</el-drawer>
获取组件高度与设置高度
getDivHeight(e) {
// 点击得到容器的高度
let divObject = document.getElementById("consoleBody")
let divHeight = divObject.offsetHeight
this.drawerHeight = divHeight
let startY = e.clientY
let that = this
document.onmousemove = function (res) {
res.preventDefault()
let distX = Math.abs(res.clientY - startY) // 得到鼠标拖动的宽高距离,取绝对值
// 向下拖动
if (res.clientY > startY) {
if (divHeight - distX >= 300) { // 最小高度为300px
that.drawerHeight = divHeight - distX
} else {
that.drawerHeigh = 300
}
}
// 向上拖动
if (res.clientY < startY) {
that.drawerHeight = divHeight + distX
}
}
document.onmouseup = function () {
document.onmousemove = null
}
},
使用css变量
- 在包裹组建的父级div增加cssVars样式
<div :style="cssVars"></div>
- 在computed中写入
computed: {
cssVars() {
return {
"--drawerHeight": `${this.drawerHeight}px`, // 获取的是数字,需要加单位px
}
},
},
- 在style中写入变量
::v-deep .el-drawer__wrapper {
height: var(--drawerHeight);
top: calc(100vh - var(--drawerHeight) - 40px);
}
备注:Vue3.0中css变量使用方法
上述为Vue2.0中css变量使用方法,3.0中直接使用变量即可,代码如下
<template>
<div class="text">测试文本</div>
</template>
<script>
export default {
data(){
return{
color:"red"
}
}
}
</script>
<style scoped vars="{ color }">
.text {
color: var(--color);
}
</style>