自定义拖拽条，上下、左右拖拽

最新推荐文章于 2024-07-25 09:24:40 发布

№~1

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量75

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_45445453/article/details/139836588

版权

<div class="midResize" id="midResize" title="收缩侧边栏" @mousedown.stop="startResize" v-if="showbottomResize">

//上下clientY  左右 clientX
startResize(event) {
      this.isResizing = true;
      const containerHeight = this.$refs.midTop.clientHeight; // 获取容器高度
      const startTopHeight = parseFloat(this.topDivHeight);
      const startY = event.clientY;
      // 在移动和松开鼠标时进行相应的操作
      const handleMouseMove = (moveEvent) => {
        if (!this.isResizing) return;
        const deltaY = (moveEvent.clientY - startY) / (containerHeight) * 100;
        // 计算新的高度
        //newBottomHeight  根据自己项目实际情况，我这边是有侧边栏占了36px
        let newBottomHeight = 36 /(containerHeight) *100
        let newTopHeight = startTopHeight + deltaY;
        // 应用最小高度限制
        if (newTopHeight < this.minPercentageHeight) {
          newTopHeight = this.minPercentageHeight;
        } else if (newTopHeight > 96) {
          newTopHeight = 100 - newBottomHeight;
        }
        // 更新高度
        this.topDivHeight = newTopHeight + '%';
        this.bottomDivHeight = 100 - newTopHeight + '%';
      };