Vue 鼠标拖动改变Element抽屉组件el-drawer高度

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变量

1. 在包裹组建的父级div增加cssVars样式

<div :style="cssVars"></div>

2. 在computed中写入

computed: {
  cssVars() {
    return {
      "--drawerHeight": `${this.drawerHeight}px`, // 获取的是数字，需要加单位px
    }
  },
},

3. 在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>