博客

直接上代码

<template>
  <div>
    <div class="box">
      <div :class="'tinydemo css'"></div>
      <div class="resize" @mousedown="dragEagle">
        <div></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  defineComponent,
  reactive,
  toRefs,
  watch,
  ref,
  computed,
  onMounted,
  getCurrentInstance,
  onBeforeMount,
} from 'vue'
const { proxy, ctx } = getCurrentInstance()
import { defineProps, defineEmits } from 'vue'

function dragEagle(e) {
  //鼠标拖动改变div大小
  var targetDiv = document.getElementsByClassName('tinydemo')
  //得到点击时该地图容器的宽高：
  var targetDivHeight = targetDiv[0].offsetHeight
  var startX = e.clientX
  var startY = e.clientY
  var _this = this
  document.onmousemove = function (e) {
    e.preventDefault()
    //得到鼠标拖动的宽高距离：取绝对值
    var distX = Math.abs(e.clientX - startX)
    var distY = Math.abs(e.clientY - startY)
    //往下方拖动：
    if (e.clientY > startY) {
      targetDiv[0].style.height = targetDivHeight + distY + 'px'
    }
    //往上方拖动：
    if (e.clientX > startX && e.clientY < startY) {
      targetDiv[0].style.height = targetDivHeight - distY + 'px'
    }
    if (parseInt(targetDiv[0].style.height) >= 700) {
      targetDiv[0].style.height = 700 + 'px'
    }
    if (parseInt(targetDiv[0].style.height) <= 100) {
      targetDiv[0].style.height = 100 + 'px'
    }
  }
  document.onmouseup = function () {
    document.onmousemove = null
  }
}
</script>



<style scoped>
.box {
  position: relative;
  margin-bottom: 6px;
}
.css {
  width: 100%;
  border: 1px solid #000;
  text-align: left;
  overflow: auto;
  position: relative;
}
.resize {
  width: 100%;
  height: 5px;
  cursor: n-resize;
  position: absolute;
  bottom: 0;
  left: 0;
  border: 1px solid #ccc;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.resize div {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: rgb(187, 186, 186);
}
</style>