基于Vue3实现鼠标按下某个元素进行移动，实时改变左侧或右侧元素的宽度，以及点击收起或展开的功能

帅龍之龍2023-07-29 9:05

其原理主要是利用JavaScript中的鼠标事件来控制CSS样式。大致就是监听某个DOM元素的鼠标按下事件，以及按下之后的移动事件和松开事件。在鼠标按下且移动过程中，可实时获得鼠标的X轴坐标的值，通过简单计算，可计算出目标元素的宽度，然后再用CSS赋值就实现该效果了。

一、示例代码

html 复制代码 
<template>
  <div class="index">
    <div class="index-left" ref="indexLeftRef">
      <div class="index-left-box">

      </div>
      <div class="left-resize-bar">⋮</div>
    </div>

    <div class="index-middle" ref="indexRightRef">
      <div class="index-middle-box">
        <div class="left-view-more" @click="handleViewMoreLeftClick">
          <div class="left-view-more-false" v-if="!isExpandLeft" />
          <div class="left-view-more-true" v-else />
        </div>

        <div class="index-middle-box_main">

        </div>

        <div class="right-view-more" @click="handleViewMoreRightClick">
          <div class="right-view-more-false" v-if="!isExpandRight" />
          <div class="right-view-more-true" v-else />
        </div>
      </div>
    </div>

    <div class="index-right" ref="indexRightRef">
      <div class="right-resize-bar">⋮</div>
      <div class="index-right-box">
        
      </div>
    </div>
  </div>
</template>
 
<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'

// 代理对象
const { proxy } = getCurrentInstance()

// 左侧是否收起或展开
const isExpandLeft = ref(false)

/**
 * 左侧点击收起或展开事件句柄方法
 */
const handleViewMoreLeftClick = async () => {
  const indexLeftRef = await proxy.$refs.indexLeftRef
  isExpandLeft.value = !isExpandLeft.value
  if (isExpandLeft.value) {
    indexLeftRef.style.width = '0'
    indexLeftRef.style.borderRight = '0px solid #dcdfe6'
  } else {
    indexLeftRef.style.width = '400px'
    indexLeftRef.style.borderRight = '1px solid #dcdfe6'
  }
}

// 右侧是否收起或展开
const isExpandRight = ref(false)

/**
 * 右侧点击收起或展开事件句柄方法
 */
const handleViewMoreRightClick = async () => {
  const indexRightRef = await proxy.$refs.indexRightRef
  isExpandRight.value = !isExpandRight.value
  if (isExpandRight.value) {
    indexRightRef.style.width = '0'
    indexRightRef.style.borderRight = '0px solid #dcdfe6'
  } else {
    indexRightRef.style.width = '400px'
    indexRightRef.style.borderRight = '1px solid #dcdfe6'
  }
}

/**
 * 左侧拖动事件句柄方法
 */
const handleDragLeftResizeBar = () => {
  var leftResizeBar = document.getElementsByClassName("left-resize-bar")[0]
  var wholeArea = document.getElementsByClassName("index")[0]
  var leftArea = document.getElementsByClassName("index-left")[0]
  var middleArea = document.getElementsByClassName("index-middle")[0]
  var rightArea = document.getElementsByClassName("index-right")[0]
  console.log('leftResizeBar =>', leftResizeBar)
  console.log('wholeArea =>', wholeArea)
  console.log('leftArea =>', leftArea)
  console.log('middleArea =>', middleArea)
  console.log('rightArea =>', rightArea)

  // 鼠标按下事件
  leftResizeBar.onmousedown = function (eventDown) {
    // 颜色提醒
    leftResizeBar.style.backgroundColor = "#5e7ce0"
    leftResizeBar.style.color = "#ffffff"

    // 鼠标移动事件
    document.onmousemove = function (eventMove) {
      
      let width = eventMove.clientX
      console.log('width =>', width)
      if (width >= 600) {
        width = 600 // 设置最大拉伸宽度为600
      } else if (width <= 0) {
        // 当拉伸宽度为小于或等于0，最小拉伸宽度为0，同时是否收起图标向右
        width = 0
        isExpandLeft.value = true
      } else {
        // 当拉伸宽度为大于0且小于600，是否收起图标向左
        isExpandLeft.value = false
      }
      leftArea.style.width = width + 'px'
    }

    // 鼠标松开事件
    document.onmouseup = function (evt) {
      // 颜色恢复
      leftResizeBar.style.backgroundColor = "#ffffff"
      leftResizeBar.style.color = "#40485c"

      document.onmousemove = null
      document.onmouseup = null
      leftResizeBar.releaseCapture && leftResizeBar.releaseCapture() // ReleaseCapture()函数用于释放该元素捕获的鼠标
    }
    leftResizeBar.setCapture && leftResizeBar.setCapture() // setCapture()函数用于设置该元素捕获的鼠标为空
    // 说明：一般情况下，SetCapture()和ReleaseCapture()函数是成对使用的。在使用SetCapture()函数捕获鼠标之后，需要在适当的时候调用ReleaseCapture()函数释放鼠标，否则可能会导致鼠标失去响应或者其他异常情况
    
    return false
  }
}

/**
 * 右侧拖动事件句柄方法
 */
const handleDragRightResizeBar = () => {
  var rightResizeBar = document.getElementsByClassName("right-resize-bar")[0]
  var wholeArea = document.getElementsByClassName("index")[0]
  var leftArea = document.getElementsByClassName("index-left")[0]
  var middleArea = document.getElementsByClassName("index-middle")[0]
  var rightArea = document.getElementsByClassName("index-right")[0]
  console.log('rightResizeBar =>', rightResizeBar)
  console.log('wholeArea =>', wholeArea)
  console.log('leftArea =>', leftArea)
  console.log('middleArea =>', middleArea)
  console.log('rightArea =>', rightArea)

  // 鼠标按下事件
  rightResizeBar.onmousedown = function (eventDown) {
    // 颜色提醒
    rightResizeBar.style.backgroundColor = "#5e7ce0"
    rightResizeBar.style.color = "#ffffff"

    // 鼠标移动事件
    document.onmousemove = function (eventMove) {

      let width = wholeArea.clientWidth - eventMove.clientX
      if (width >= 600) {
        width = 600 // 设置最大拉伸宽度为600
      } else if (width <= 0) {
        // 当拉伸宽度为小于或等于0，最小拉伸宽度为0，同时是否收起图标向左
        width = 0
        isExpandRight.value = true
      } else {
        // 当拉伸宽度为大于0且小于600，是否收起图标向右
        isExpandRight.value = false
      }
      rightArea.style.width = width + 'px'
    }

    // 鼠标松开事件
    document.onmouseup = function (evt) {
      // 颜色恢复
      rightResizeBar.style.backgroundColor = "#ffffff"
      rightResizeBar.style.color = "#40485c"

      document.onmousemove = null
      document.onmouseup = null
      rightResizeBar.releaseCapture && rightResizeBar.releaseCapture() // ReleaseCapture()函数用于释放该元素捕获的鼠标
    }
    rightResizeBar.setCapture && rightResizeBar.setCapture() // setCapture()函数用于设置该元素捕获的鼠标为空
    // 说明：一般情况下，SetCapture()和ReleaseCapture()函数是成对使用的。在使用SetCapture()函数捕获鼠标之后，需要在适当的时候调用ReleaseCapture()函数释放鼠标，否则可能会导致鼠标失去响应或者其他异常情况
    
    return false
  }
}

onMounted(() => {
  handleDragLeftResizeBar()
  handleDragRightResizeBar()
})
</script>
 
<style lang="less" scoped>
  .index {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* ---- ^ 左边 ---- */
    :deep(.index-left) {
      position: relative;
      z-index: 0;
      display: flex;
      flex-direction: row;
      width: 400px;
      border-right: 1px solid #dcdfe6;

      .index-left-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 7px 0 7px 7px;
        overflow: hidden;
        background-color: #f3f6f8;

        .index-left-box_header {
          width: 100%;
          min-width: 400px - 14px;
          height: auto;

          .header__navbar {
            display: flex;
            width: 100%;
            align-items: center;
            font-size: 13px;
            text-align: center;
            margin-bottom: 7px;

            .header__navbar_panorama {
              flex: 1;
              margin-right: 5px;
              padding: 5px 0;
              border: 1px solid #dcdfe6;
              transition: all ease 0.3s;
              cursor: pointer;
            }

            .header__navbar_product {
              flex: 1;
              margin-left: 5px;
              padding: 5px 0;
              border: 1px solid #dcdfe6;
              transition: all ease 0.3s;
              cursor: pointer;
            }

            .header__navbar_panorama:hover,
            .header__navbar_product:hover
            {
              border: 1px solid #5e7ce0;
            }

            .header__navbar_actived {
              background-color: #5e7ce0;
              border: 1px solid #5e7ce0;
              color: #fff;
            }
          }

          .header__form {
            border-top: 1px solid #dcdfe6;
            padding-top: 7px;
          }
        }

        .index-left_content {
          flex: 1;
          overflow: hidden;
          border: 1px solid #dcdfe6;
        }
      }

      .left-resize-bar {
        display: flex;
        align-items: center;
        width: 7px;
        height: 100%;
        background-color: rgb(255, 255, 255);
        cursor: col-resize;
        user-select: none;
        transition: all ease 0.3s;
        font-size: 20px;
        color: #40485c;

        &:hover {
          color: #fff !important;
          background-color: #5e7ce0 !important;
        }
      }
    }
    /* ---- / 左边 ---- */

    /* ---- ^ 中间 ---- */
    :deep(.index-middle) {
      position: relative;
      z-index: 1;
      flex: 1;
      height: 100%;
      position: relative;
      transition: all ease 0.3s;
      background-color: #ffffff;

      .index-middle-box {
        display: flex;
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;

        // ^ 是否收起左侧边栏的图标
        .left-view-more {
          width: 12px;
          height: 30px;
          background-color: #ccc;
          border-bottom-right-radius: 4px;
          border-top-right-radius: 4px;
          position: absolute;
          display: block;
          margin: auto;
          left: 0;
          top: 0;
          bottom: 0;
          cursor: pointer;
          z-index: 1;
          transition: all ease 0.3s;

          &:hover {
            background-color: #5e7ce0;
          }

          .left-view-more-true {
            width: 100%;
            height: 10px;
            position: absolute;
            display: block;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;

            &::before {
              display: block;
              height: 2px;
              width: 10px;
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              background-color: #fff;
              transform: rotate(70deg);
            }

            &::after {
              display: block;
              height: 2px;
              width: 10px;
              content: "";
              position: absolute;
              left: 0;
              bottom: 0;
              background-color: #fff;
              transform: rotate(-70deg);
            }
          }

          .left-view-more-false {
            width: 100%;
            height: 10px;
            position: absolute;
            display: block;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;

            &::before {
              display: block;
              height: 2px;
              width: 10px;
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              background-color: #fff;
              transform: rotate(-70deg);
            }

            &::after {
              display: block;
              height: 2px;
              width: 10px;
              content: "";
              position: absolute;
              left: 0;
              bottom: 0;
              background-color: #fff;
              transform: rotate(70deg);
            }
          }
        }
        // / 是否收起左侧边栏的图标

        // ^ 是否收起右侧边栏的图标
        .right-view-more {
          width: 12px;
          height: 30px;
          background-color: #ccc;
          border-bottom-left-radius: 4px;
          border-top-left-radius: 4px;
          position: absolute;
          display: block;
          margin: auto;
          right: 0;
          top: 0;
          bottom: 0;
          cursor: pointer;
          z-index: 1;
          transition: all ease 0.3s;

          &:hover {
            background-color: #5e7ce0;
          }

          .right-view-more-true {
            width: 100%;
            height: 10px;
            position: absolute;
            display: block;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;

            &::before {
              display: block;
              height: 2px;
              width: 10px;
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              background-color: #fff;
              transform: rotate(-70deg);
            }

            &::after {
              display: block;
              height: 2px;
              width: 10px;
              content: "";
              position: absolute;
              left: 0;
              bottom: 0;
              background-color: #fff;
              transform: rotate(70deg);
            }
          }

          .right-view-more-false {
            width: 100%;
            height: 10px;
            position: absolute;
            display: block;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;

            &::before {
              display: block;
              height: 2px;
              width: 10px;
              content: "";
              position: absolute;
              right: 0;
              top: 0;
              background-color: #fff;
              transform: rotate(70deg);
            }

            &::after {
              display: block;
              height: 2px;
              width: 10px;
              content: "";
              position: absolute;
              right: 0;
              bottom: 0;
              background-color: #fff;
              transform: rotate(-70deg);
            }
          }
        }
        // / 是否收起右侧边栏的图标
      }
    }
    /* ---- / 中间 ---- */

    /* ---- ^ 右边 ---- */
    :deep(.index-right) {
      position: relative;
      z-index: 0;
      display: flex;
      flex-direction: row;
      width: 400px;
      border-left: 1px solid #dcdfe6;

      .right-resize-bar {
        display: flex;
        align-items: center;
        width: 7px;
        height: 100%;
        background-color: rgb(255, 255, 255);
        cursor: col-resize;
        user-select: none;
        transition: all ease 0.3s;
        font-size: 20px;
        color: #40485c;

        &:hover {
          color: #fff !important;
          background-color: #5e7ce0 !important;
        }
      }

      .index-right-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 7px 7px 7px 0;
        overflow: hidden;
        background-color: #f3f6f8;
      }
    }
    /* ---- / 右边 ---- */
  }
</style>

二、效果如下 ~

相关推荐
小白小白从不日白5 分钟前
react 组件通讯
前端·react.js
Redstone Monstrosity23 分钟前
字节二面
前端·面试
东方翱翔30 分钟前
CSS的三种基本选择器
前端·css
Fan_web1 小时前
JavaScript高级——闭包应用-自定义js模块
开发语言·前端·javascript·css·html
yanglamei19621 小时前
基于GIKT深度知识追踪模型的习题推荐系统源代码+数据库+使用说明，后端采用flask，前端采用vue
前端·数据库·flask
千穹凌帝1 小时前
SpinalHDL之结构（二）
开发语言·前端·fpga开发
dot.Net安全矩阵1 小时前
.NET内网实战：通过命令行解密Web.config
前端·学习·安全·web安全·矩阵·.net
Hellc0071 小时前
MacOS升级ruby版本
前端·macos·ruby
前端西瓜哥2 小时前
贝塞尔曲线算法：求贝塞尔曲线和直线的交点
前端·算法
又写了一天BUG2 小时前
npm install安装缓慢及npm更换源
前端·npm·node.js
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07Coze扣子平台完整体验和实践（附国内和国际版对比）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10借助 LocatorJS ，快速定位本地代码