前言

其原理主要是利用JavaScript中的鼠標(biāo)事件來控制CSS樣式。大致就是監(jiān)聽某個DOM元素的鼠標(biāo)按下事件，以及按下之后的移動事件和松開事件。在鼠標(biāo)按下且移動過程中，可實(shí)時獲得鼠標(biāo)的X軸坐標(biāo)的值，通過簡單計(jì)算，可計(jì)算出目標(biāo)元素的寬度，然后再用CSS賦值就實(shí)現(xiàn)該效果了。

一、示例代碼

（1）/src/views/Example/MouseResizeWidth/index.vue

<template>
  <div class="index">
    <div class="index-left" ref="indexLeftRef">
      <div class="left-area-box"></div>
 
      <div class="left-resize-bar">?</div>
 
      <div class="left-view-more" @click="handleViewMoreLeftClick">
        <div class="left-view-more-content">
          <div class="left-view-more-false" v-if="!isCollapseLeft" />
          <div class="left-view-more-true" v-else />
        </div>
      </div>
    </div>
 
    <div class="index-middle" ref="indexRightRef">
      <div class="middle-area-box">
        <div class="middle-area-box_main">
          <div class="middle-area-box_main_up">
            <div class="middle-area-box_main_up_wrapper">
              <!-- ^ 工具欄 -->
              <div class="index-tools-container">
                <el-form :inline="true" style="display: flex">
                  <div class="tools-left"></div>
          
                  <div class="tools-right">
                    <el-form-item style="margin: 0 0 7px 7px">
                      <el-button size="small" type="primary">
                        <el-icon :size="12" style="margin-right: 5px"><ElementPlus /></el-icon>
                        <small>ElementPlus</small>
                      </el-button>
                    </el-form-item>
                  </div>
                </el-form>
              </div>
              <!-- / 工具欄 -->
 
              <!-- ^ 內(nèi)容區(qū) -->
              <div class="index-table-container">
                <el-table
                  border
                  size="small"
                  row-key="id"
                  ref="tableRef"
                  height="100%"
                  highlight-current-row
                  :data="tableList"
                >
 
                  <el-table-column fixed type="selection" :resizable="false" width="30" reserve-selection align="center" />
                  <el-table-column prop="name" label="英雄名稱" align="center" width="200" show-overflow-tooltip />
                  <el-table-column prop="description" label="英雄描述" align="center" width="auto" show-overflow-tooltip />
                  <el-table-column prop="firstSkill" label="一技能" align="center" width="200" show-overflow-tooltip />
                  <el-table-column prop="secondSkill" label="二技能" align="center" width="200" show-overflow-tooltip />
                  <el-table-column prop="thirdSkill" label="三技能" align="center" width="200" show-overflow-tooltip />
 
                  <template #empty v-if="tableList == undefined || tableList.length == 0">Nothing ~</template>
                </el-table>
              </div>
              <!-- / 內(nèi)容區(qū) -->
            </div>
          </div>
        </div>
      </div>
    </div>
 
    <div class="index-right" ref="indexRightRef">
      <div class="right-view-more" @click="handleViewMoreRightClick">
        <div class="right-view-more-content">
          <div class="right-view-more-false" v-if="!isCollapseRight" />
          <div class="right-view-more-true" v-else />
        </div>
      </div>
 
      <div class="right-resize-bar">?</div>
 
      <div class="right-area-box"></div>
    </div>
  </div>
</template>
 
<script setup>
import { h, onMounted, onUnmounted, ref, getCurrentInstance, reactive, watch, nextTick } from 'vue'
 
// 代理對象
const { proxy } = getCurrentInstance()
 
// 是否收起左側(cè)
const isCollapseLeft = ref(false)
// 左側(cè)模塊箭頭點(diǎn)擊事件句柄方法
const handleViewMoreLeftClick = async () => {
  const indexLeftRef = await proxy.$refs.indexLeftRef
  isCollapseLeft.value = !isCollapseLeft.value
  if (isCollapseLeft.value) {
    indexLeftRef.style.width = '23px'
  } else {
    indexLeftRef.style.width = '400px'
  }
}
 
// 表格實(shí)例
const tableRef = ref(null)
 
// 表格數(shù)據(jù)
const tableList = ref([])
 
// 是否收起右側(cè)
const isCollapseRight = ref(false)
// 右側(cè)模塊箭頭點(diǎn)擊事件句柄方法
const handleViewMoreRightClick = async () => {
  const indexRightRef = await proxy.$refs.indexRightRef
  isCollapseRight.value = !isCollapseRight.value
  if (isCollapseRight.value) {
    indexRightRef.style.width = '23px'
  } else {
    indexRightRef.style.width = '400px'
  }
}
 
/**
 * 左側(cè)拖動改變寬度事件句柄方法
 */
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)
 
  // 鼠標(biāo)按下事件
  leftResizeBar.onmousedown = function (eventDown) {
    // 顏色提醒
    leftResizeBar.style.backgroundColor = "#5e7ce0"
    leftResizeBar.style.color = "#ffffff"
 
    // 鼠標(biāo)拖動事件
    document.onmousemove = function (eventMove) {
      
      let width = eventMove.clientX + 20
      console.log('width =>', width)
      if (width >= 800) {
        width = 800 // 設(shè)置最大拉伸寬度為800
      } else if (width <= 23) {
        // 當(dāng)拉伸寬度為小于或等于23，最小拉伸寬度為23，同時是否收起圖標(biāo)向右
        width = 23
        isCollapseLeft.value = true
      } else {
        // 當(dāng)拉伸寬度為大于23且小于600，是否收起圖標(biāo)向左
        isCollapseLeft.value = false
      }
      leftArea.style.width = width + 'px'
    }
 
    // 鼠標(biāo)松開事件
    document.onmouseup = function (evt) {
      // 顏色恢復(fù)
      leftResizeBar.style.backgroundColor = "#ffffff"
      leftResizeBar.style.color = "#40485c"
 
      document.onmousemove = null
      document.onmouseup = null
      leftResizeBar.releaseCapture && leftResizeBar.releaseCapture();
    }
 
    leftResizeBar.setCapture && leftResizeBar.setCapture();
    return false
  }
}
 
/**
 * 右側(cè)拖動改變寬度事件句柄方法
 */
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)
 
  // 鼠標(biāo)按下事件
  rightResizeBar.onmousedown = function (eventDown) {
    // 顏色提醒
    rightResizeBar.style.backgroundColor = "#5e7ce0"
    rightResizeBar.style.color = "#ffffff"
 
    // 開始x坐標(biāo)
    // let startX = eventDown.clientX
    // console.log('startX =>', startX)
 
    // 鼠標(biāo)拖動事件
    document.onmousemove = function (eventMove) {
      // 方式一：基于移動距離方式實(shí)現(xiàn)
      // const endX = eventMove.clientX // 結(jié)束坐標(biāo)
      // const len = startX - endX // 移動距離
      // rightArea.style.width = rightArea.clientWidth + len + 'px' // 改變寬度
      // startX = endX // 重新對開始x坐標(biāo)賦值
 
      // 方式二：基于總長度和結(jié)束x坐標(biāo)方式實(shí)現(xiàn)
      let width = wholeArea.clientWidth + 20 - eventMove.clientX
      if (width >= 800) {
        width = 800 // 設(shè)置最大拉伸寬度為800
      } else if (width <= 23) {
        // 當(dāng)拉伸寬度為小于或等于23，最小拉伸寬度為23，同時是否收起圖標(biāo)向左
        width = 23
        isCollapseRight.value = true
      } else {
        // 當(dāng)拉伸寬度為大于23且小于600，是否收起圖標(biāo)向右
        isCollapseRight.value = false
      }
      rightArea.style.width = width + 'px'
    }
 
    // 鼠標(biāo)松開事件
    document.onmouseup = function (evt) {
      // 顏色恢復(fù)
      rightResizeBar.style.backgroundColor = "#ffffff"
      rightResizeBar.style.color = "#40485c"
 
      document.onmousemove = null
      document.onmouseup = null
      rightResizeBar.releaseCapture && rightResizeBar.releaseCapture();
    }
 
    rightResizeBar.setCapture && rightResizeBar.setCapture();
    return false
  }
}
 
onMounted(() => {
  handleDragLeftResizeBar()
  handleDragRightResizeBar()
})
 
onUnmounted(() => {
  // ...
})
</script>
 
<style lang="less" scoped>
  .index {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    overflow: hidden;
 
    /* ---- ^ 左邊 ---- */
    :deep(.index-left) {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: row;
      width: 400px;
      border-right: 1px solid #dcdfe6;
 
      // ^ 左側(cè)區(qū)域
      .left-area-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: #f8f8f8;
      }
      // / 左側(cè)區(qū)域
 
      // ^ 是否收起左側(cè)邊欄的圖標(biāo)
      .left-view-more {
        position: relative;
        width: 15px;
        height: 100%;
        background-color: #f3f6f8;
        border-left: 1px solid #dcdfe6;
 
        .left-view-more-content {
          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);
            }
          }
        }
      }
      // / 是否收起左側(cè)邊欄的圖標(biāo)
 
      // ^ 左側(cè)拖動條
      .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;
        }
      }
      // / 左側(cè)拖動條
    }
    /* ---- / 左邊 ---- */
 
    /* ---- ^ 中間 ---- */
    :deep(.index-middle) {
      position: relative;
      z-index: 1;
      flex: 1;
      overflow: hidden;
      position: relative;
      transition: all ease 0.3s;
      background-color: #f3f6f8;
 
      // ^ 中間區(qū)域
      .middle-area-box {
        display: flex;
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
 
        .middle-area-box_main {
          position: relative;
          flex: 1 1;
          display: flex;
          flex-direction: column;
          width: 100%;
 
          .middle-area-box_main_up {
            flex: 1;
            display: flex;
            overflow: hidden;
            flex-direction: column;
            background-color: #fff;
  
            .middle-area-box_main_up_wrapper {
              flex: 1;
              display: flex;
              flex-direction: column;
              padding: 7px;
              overflow: auto;
 
              .index-tools-container {
                .tools-left {
                  flex: 1;
                }
                .tools-right {
                  height: auto;
                }
              }
 
              .index-table-container {
                flex: 1;
                overflow: auto;
              }
 
              .el-table {
 
                th .cell {
                  padding: 2.5px;
                  font-weight: normal;
                  font-size: 13px;
                }
 
                td .cell {
                  padding: 2.5px 0;
                  color: #000;
                  font-size: 13px;
                }
 
                .el-table__cell {
                  padding: 0;
                }
 
                /* ^ 表格復(fù)選框 */
                .el-table-column--selection {
 
                  .cell {
                    width: 100%;
                    display: block;
 
                    .el-checkbox {
 
                      .el-checkbox__inner {
                        transform: scale(1.2);
                        border-radius: 50%;
                        border: 1px solid #bbb;
                      }
 
                      .el-checkbox__input.is-checked .el-checkbox__inner,
                      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
                        border: 1px solid #5e7ce0;
                      }
                    }
                  }
                }
                /* / 表格復(fù)選框 */
              }
            }
          }

          .middle-area-box_main_down {
            flex: 0;
          }
        }
      }
      // / 中間區(qū)域
    }
    /* ---- / 中間 ---- */
 
    /* ---- ^ 右邊 ---- */
    :deep(.index-right) {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: row;
      width: 400px;
      border-left: 1px solid #dcdfe6;
 
      // ^ 是否收起右側(cè)邊欄的圖標(biāo)
      .right-view-more {
        position: relative;
        width: 15px;
        height: 100%;
        background-color: #f3f6f8;
        border-right: 1px solid #dcdfe6;
        
        .right-view-more-content {
          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);
            }
          }
        }
      }
      // / 是否收起右側(cè)邊欄的圖標(biāo)
 
      // ^ 右側(cè)拖動條
      .right-resize-bar {
        position: relative;
        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;
        }
      }
      // / 右側(cè)拖動條
 
      // ^ 右側(cè)區(qū)域
      .right-area-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: #f8f8f8;
      }
      // / 右側(cè)區(qū)域
    }
    /* ---- / 右邊 ---- */
  }
</style>

二、運(yùn)行效果

文章來源地址http://www.zghlxwxcb.cn/news/detail-652735.html

到了這里，關(guān)于基于Vue3實(shí)現(xiàn)鼠標(biāo)按下某個元素進(jìn)行拖動，實(shí)時改變左側(cè)或右側(cè)元素的寬度，以及點(diǎn)擊收起或展開的功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！