devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：知新_RL | 2024-03-29 08:28:12

赞

踩

vue3点击按钮左边展示的宽度变短右边宽度变长

前言

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

一、示例代码

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

  1. <template>
  2.   <div class="index">
  3.     <div class="index-left" ref="indexLeftRef">
  4.       <div class="left-area-box"></div>
  5.  
  6.       <div class="left-resize-bar">⋮</div>
  7.  
  8.       <div class="left-view-more" @click="handleViewMoreLeftClick">
  9.         <div class="left-view-more-content">
  10.           <div class="left-view-more-false" v-if="!isCollapseLeft" />
  11.           <div class="left-view-more-true" v-else />
  12.         </div>
  13.       </div>
  14.     </div>
  15.  
  16.     <div class="index-middle" ref="indexRightRef">
  17.       <div class="middle-area-box">
  18.         <div class="middle-area-box_main">
  19.           <div class="middle-area-box_main_up">
  20.             <div class="middle-area-box_main_up_wrapper">
  21.               <!-- ^ 工具栏 -->
  22.               <div class="index-tools-container">
  23.                 <el-form :inline="true" style="display: flex">
  24.                   <div class="tools-left"></div>
  25.           
  26.                   <div class="tools-right">
  27.                     <el-form-item style="margin: 0 0 7px 7px">
  28.                       <el-button size="small" type="primary">
  29.                         <el-icon :size="12" style="margin-right: 5px"><ElementPlus /></el-icon>
  30.                         <small>ElementPlus</small>
  31.                       </el-button>
  32.                     </el-form-item>
  33.                   </div>
  34.                 </el-form>
  35.               </div>
  36.               <!-- / 工具栏 -->
  37.  
  38.               <!-- ^ 内容区 -->
  39.               <div class="index-table-container">
  40.                 <el-table
  41.                   border
  42.                   size="small"
  43.                   row-key="id"
  44.                   ref="tableRef"
  45.                   height="100%"
  46.                   highlight-current-row
  47.                   :data="tableList"
  48.                 >
  49.  
  50.                   <el-table-column fixed type="selection" :resizable="false" width="30" reserve-selection align="center" />
  51.                   <el-table-column prop="name" label="英雄名称" align="center" width="200" show-overflow-tooltip />
  52.                   <el-table-column prop="description" label="英雄描述" align="center" width="auto" show-overflow-tooltip />
  53.                   <el-table-column prop="firstSkill" label="一技能" align="center" width="200" show-overflow-tooltip />
  54.                   <el-table-column prop="secondSkill" label="二技能" align="center" width="200" show-overflow-tooltip />
  55.                   <el-table-column prop="thirdSkill" label="三技能" align="center" width="200" show-overflow-tooltip />
  56.  
  57.                   <template #empty v-if="tableList == undefined || tableList.length == 0">Nothing ~</template>
  58.                 </el-table>
  59.               </div>
  60.               <!-- / 内容区 -->
  61.             </div>
  62.           </div>
  63.         </div>
  64.       </div>
  65.     </div>
  66.  
  67.     <div class="index-right" ref="indexRightRef">
  68.       <div class="right-view-more" @click="handleViewMoreRightClick">
  69.         <div class="right-view-more-content">
  70.           <div class="right-view-more-false" v-if="!isCollapseRight" />
  71.           <div class="right-view-more-true" v-else />
  72.         </div>
  73.       </div>
  74.  
  75.       <div class="right-resize-bar">⋮</div>
  76.  
  77.       <div class="right-area-box"></div>
  78.     </div>
  79.   </div>
  80. </template>
  81.  
  82. <script setup>
  83. import { h, onMounted, onUnmounted, ref, getCurrentInstance, reactive, watch, nextTick } from 'vue'
  84.  
  85. // 代理对象
  86. const { proxy } = getCurrentInstance()
  87.  
  88. // 是否收起左侧
  89. const isCollapseLeft = ref(false)
  90. // 左侧模块箭头点击事件句柄方法
  91. const handleViewMoreLeftClick = async () => {
  92.   const indexLeftRef = await proxy.$refs.indexLeftRef
  93.   isCollapseLeft.value = !isCollapseLeft.value
  94.   if (isCollapseLeft.value) {
  95.     indexLeftRef.style.width = '23px'
  96.   } else {
  97.     indexLeftRef.style.width = '400px'
  98.   }
  99. }
  100.  
  101. // 表格实例
  102. const tableRef = ref(null)
  103.  
  104. // 表格数据
  105. const tableList = ref([])
  106.  
  107. // 是否收起右侧
  108. const isCollapseRight = ref(false)
  109. // 右侧模块箭头点击事件句柄方法
  110. const handleViewMoreRightClick = async () => {
  111.   const indexRightRef = await proxy.$refs.indexRightRef
  112.   isCollapseRight.value = !isCollapseRight.value
  113.   if (isCollapseRight.value) {
  114.     indexRightRef.style.width = '23px'
  115.   } else {
  116.     indexRightRef.style.width = '400px'
  117.   }
  118. }
  119.  
  120. /**
  121.  * 左侧拖动改变宽度事件句柄方法
  122.  */
  123. const handleDragLeftResizeBar = () => {
  124.   var leftResizeBar = document.getElementsByClassName("left-resize-bar")[0]
  125.   var wholeArea = document.getElementsByClassName("index")[0]
  126.   var leftArea = document.getElementsByClassName("index-left")[0]
  127.   var middleArea = document.getElementsByClassName("index-middle")[0]
  128.   var rightArea = document.getElementsByClassName("index-right")[0]
  129.   console.log('leftResizeBar =>', leftResizeBar)
  130.   console.log('wholeArea =>', wholeArea)
  131.   console.log('leftArea =>', leftArea)
  132.   console.log('middleArea =>', middleArea)
  133.   console.log('rightArea =>', rightArea)
  134.  
  135.   // 鼠标按下事件
  136.   leftResizeBar.onmousedown = function (eventDown) {
  137.     // 颜色提醒
  138.     leftResizeBar.style.backgroundColor = "#5e7ce0"
  139.     leftResizeBar.style.color = "#ffffff"
  140.  
  141.     // 鼠标拖动事件
  142.     document.onmousemove = function (eventMove) {
  143.       
  144.       let width = eventMove.clientX + 20
  145.       console.log('width =>', width)
  146.       if (width >= 800) {
  147.         width = 800 // 设置最大拉伸宽度为800
  148.       } else if (width <= 23) {
  149.         // 当拉伸宽度为小于或等于23，最小拉伸宽度为23，同时是否收起图标向右
  150.         width = 23
  151.         isCollapseLeft.value = true
  152.       } else {
  153.         // 当拉伸宽度为大于23且小于600，是否收起图标向左
  154.         isCollapseLeft.value = false
  155.       }
  156.       leftArea.style.width = width + 'px'
  157.     }
  158.  
  159.     // 鼠标松开事件
  160.     document.onmouseup = function (evt) {
  161.       // 颜色恢复
  162.       leftResizeBar.style.backgroundColor = "#ffffff"
  163.       leftResizeBar.style.color = "#40485c"
  164.  
  165.       document.onmousemove = null
  166.       document.onmouseup = null
  167.       leftResizeBar.releaseCapture && leftResizeBar.releaseCapture();
  168.     }
  169.  
  170.     leftResizeBar.setCapture && leftResizeBar.setCapture();
  171.     return false
  172.   }
  173. }
  174.  
  175. /**
  176.  * 右侧拖动改变宽度事件句柄方法
  177.  */
  178. const handleDragRightResizeBar = () => {
  179.   var rightResizeBar = document.getElementsByClassName("right-resize-bar")[0]
  180.   var wholeArea = document.getElementsByClassName("index")[0]
  181.   var leftArea = document.getElementsByClassName("index-left")[0]
  182.   var middleArea = document.getElementsByClassName("index-middle")[0]
  183.   var rightArea = document.getElementsByClassName("index-right")[0]
  184.   console.log('rightResizeBar =>', rightResizeBar)
  185.   console.log('wholeArea =>', wholeArea)
  186.   console.log('leftArea =>', leftArea)
  187.   console.log('middleArea =>', middleArea)
  188.   console.log('rightArea =>', rightArea)
  189.  
  190.   // 鼠标按下事件
  191.   rightResizeBar.onmousedown = function (eventDown) {
  192.     // 颜色提醒
  193.     rightResizeBar.style.backgroundColor = "#5e7ce0"
  194.     rightResizeBar.style.color = "#ffffff"
  195.  
  196.     // 开始x坐标
  197.     // let startX = eventDown.clientX
  198.     // console.log('startX =>', startX)
  199.  
  200.     // 鼠标拖动事件
  201.     document.onmousemove = function (eventMove) {
  202.       // 方式一：基于移动距离方式实现
  203.       // const endX = eventMove.clientX // 结束坐标
  204.       // const len = startX - endX // 移动距离
  205.       // rightArea.style.width = rightArea.clientWidth + len + 'px' // 改变宽度
  206.       // startX = endX // 重新对开始x坐标赋值
  207.  
  208.       // 方式二：基于总长度和结束x坐标方式实现
  209.       let width = wholeArea.clientWidth + 20 - eventMove.clientX
  210.       if (width >= 800) {
  211.         width = 800 // 设置最大拉伸宽度为800
  212.       } else if (width <= 23) {
  213.         // 当拉伸宽度为小于或等于23，最小拉伸宽度为23，同时是否收起图标向左
  214.         width = 23
  215.         isCollapseRight.value = true
  216.       } else {
  217.         // 当拉伸宽度为大于23且小于600，是否收起图标向右
  218.         isCollapseRight.value = false
  219.       }
  220.       rightArea.style.width = width + 'px'
  221.     }
  222.  
  223.     // 鼠标松开事件
  224.     document.onmouseup = function (evt) {
  225.       // 颜色恢复
  226.       rightResizeBar.style.backgroundColor = "#ffffff"
  227.       rightResizeBar.style.color = "#40485c"
  228.  
  229.       document.onmousemove = null
  230.       document.onmouseup = null
  231.       rightResizeBar.releaseCapture && rightResizeBar.releaseCapture();
  232.     }
  233.  
  234.     rightResizeBar.setCapture && rightResizeBar.setCapture();
  235.     return false
  236.   }
  237. }
  238.  
  239. onMounted(() => {
  240.   handleDragLeftResizeBar()
  241.   handleDragRightResizeBar()
  242. })
  243.  
  244. onUnmounted(() => {
  245.   // ...
  246. })
  247. </script>
  248.  
  249. <style lang="less" scoped>
  250.   .index {
  251.     display: flex;
  252.     flex-direction: row;
  253.     width: 100%;
  254.     height: 100%;
  255.     overflow: hidden;
  256.  
  257.     /* ---- ^ 左边 ---- */
  258.     :deep(.index-left) {
  259.       position: relative;
  260.       z-index: 2;
  261.       display: flex;
  262.       flex-direction: row;
  263.       width: 400px;
  264.       border-right: 1px solid #dcdfe6;
  265.  
  266.       // ^ 左侧区域
  267.       .left-area-box {
  268.         flex: 1;
  269.         display: flex;
  270.         flex-direction: column;
  271.         overflow: hidden;
  272.         background-color: #f8f8f8;
  273.       }
  274.       // / 左侧区域
  275.  
  276.       // ^ 是否收起左侧边栏的图标
  277.       .left-view-more {
  278.         position: relative;
  279.         width: 15px;
  280.         height: 100%;
  281.         background-color: #f3f6f8;
  282.         border-left: 1px solid #dcdfe6;
  283.  
  284.         .left-view-more-content {
  285.           width: 12px;
  286.           height: 30px;
  287.           background-color: #ccc;
  288.           border-bottom-right-radius: 4px;
  289.           border-top-right-radius: 4px;
  290.           position: absolute;
  291.           display: block;
  292.           margin: auto;
  293.           left: 0;
  294.           top: 0;
  295.           bottom: 0;
  296.           cursor: pointer;
  297.           z-index: 1;
  298.           transition: all ease 0.3s;
  299.  
  300.           &:hover {
  301.             background-color: #5e7ce0;
  302.           }
  303.  
  304.           .left-view-more-true {
  305.             width: 100%;
  306.             height: 10px;
  307.             position: absolute;
  308.             display: block;
  309.             margin: auto;
  310.             left: 0;
  311.             right: 0;
  312.             top: 0;
  313.             bottom: 0;
  314.  
  315.             &::before {
  316.               display: block;
  317.               height: 2px;
  318.               width: 10px;
  319.               content: "";
  320.               position: absolute;
  321.               left: 0;
  322.               top: 0;
  323.               background-color: #fff;
  324.               transform: rotate(70deg);
  325.             }
  326.  
  327.             &::after {
  328.               display: block;
  329.               height: 2px;
  330.               width: 10px;
  331.               content: "";
  332.               position: absolute;
  333.               left: 0;
  334.               bottom: 0;
  335.               background-color: #fff;
  336.               transform: rotate(-70deg);
  337.             }
  338.           }
  339.  
  340.           .left-view-more-false {
  341.             width: 100%;
  342.             height: 10px;
  343.             position: absolute;
  344.             display: block;
  345.             margin: auto;
  346.             left: 0;
  347.             right: 0;
  348.             top: 0;
  349.             bottom: 0;
  350.  
  351.             &::before {
  352.               display: block;
  353.               height: 2px;
  354.               width: 10px;
  355.               content: "";
  356.               position: absolute;
  357.               left: 0;
  358.               top: 0;
  359.               background-color: #fff;
  360.               transform: rotate(-70deg);
  361.             }
  362.  
  363.             &::after {
  364.               display: block;
  365.               height: 2px;
  366.               width: 10px;
  367.               content: "";
  368.               position: absolute;
  369.               left: 0;
  370.               bottom: 0;
  371.               background-color: #fff;
  372.               transform: rotate(70deg);
  373.             }
  374.           }
  375.         }
  376.       }
  377.       // / 是否收起左侧边栏的图标
  378.  
  379.       // ^ 左侧拖动条
  380.       .left-resize-bar {
  381.         display: flex;
  382.         align-items: center;
  383.         width: 7px;
  384.         height: 100%;
  385.         background-color: rgb(255, 255, 255);
  386.         cursor: col-resize;
  387.         user-select: none;
  388.         transition: all ease 0.3s;
  389.         font-size: 20px;
  390.         color: #40485c;
  391.  
  392.         &:hover {
  393.           color: #fff !important;
  394.           background-color: #5e7ce0 !important;
  395.         }
  396.       }
  397.       // / 左侧拖动条
  398.     }
  399.     /* ---- / 左边 ---- */
  400.  
  401.     /* ---- ^ 中间 ---- */
  402.     :deep(.index-middle) {
  403.       position: relative;
  404.       z-index: 1;
  405.       flex: 1;
  406.       overflow: hidden;
  407.       position: relative;
  408.       transition: all ease 0.3s;
  409.       background-color: #f3f6f8;
  410.  
  411.       // ^ 中间区域
  412.       .middle-area-box {
  413.         display: flex;
  414.         position: relative;
  415.         width: 100%;
  416.         height: 100%;
  417.         overflow: hidden;
  418.  
  419.         .middle-area-box_main {
  420.           position: relative;
  421.           flex: 1 1;
  422.           display: flex;
  423.           flex-direction: column;
  424.           width: 100%;
  425.  
  426.           .middle-area-box_main_up {
  427.             flex: 1;
  428.             display: flex;
  429.             overflow: hidden;
  430.             flex-direction: column;
  431.             background-color: #fff;
  432.   
  433.             .middle-area-box_main_up_wrapper {
  434.               flex: 1;
  435.               display: flex;
  436.               flex-direction: column;
  437.               padding: 7px;
  438.               overflow: auto;
  439.  
  440.               .index-tools-container {
  441.                 .tools-left {
  442.                   flex: 1;
  443.                 }
  444.                 .tools-right {
  445.                   height: auto;
  446.                 }
  447.               }
  448.  
  449.               .index-table-container {
  450.                 flex: 1;
  451.                 overflow: auto;
  452.               }
  453.  
  454.               .el-table {
  455.  
  456.                 th .cell {
  457.                   padding: 2.5px;
  458.                   font-weight: normal;
  459.                   font-size: 13px;
  460.                 }
  461.  
  462.                 td .cell {
  463.                   padding: 2.5px 0;
  464.                   color: #000;
  465.                   font-size: 13px;
  466.                 }
  467.  
  468.                 .el-table__cell {
  469.                   padding: 0;
  470.                 }
  471.  
  472.                 /* ^ 表格复选框 */
  473.                 .el-table-column--selection {
  474.  
  475.                   .cell {
  476.                     width: 100%;
  477.                     display: block;
  478.  
  479.                     .el-checkbox {
  480.  
  481.                       .el-checkbox__inner {
  482.                         transform: scale(1.2);
  483.                         border-radius: 50%;
  484.                         border: 1px solid #bbb;
  485.                       }
  486.  
  487.                       .el-checkbox__input.is-checked .el-checkbox__inner,
  488.                       .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  489.                         border: 1px solid #5e7ce0;
  490.                       }
  491.                     }
  492.                   }
  493.                 }
  494.                 /* / 表格复选框 */
  495.               }
  496.             }
  497.           }
  498.  
  499.           .middle-area-box_main_down {
  500.             flex: 0;
  501.           }
  502.         }
  503.       }
  504.       // / 中间区域
  505.     }
  506.     /* ---- / 中间 ---- */
  507.  
  508.     /* ---- ^ 右边 ---- */
  509.     :deep(.index-right) {
  510.       position: relative;
  511.       z-index: 2;
  512.       display: flex;
  513.       flex-direction: row;
  514.       width: 400px;
  515.       border-left: 1px solid #dcdfe6;
  516.  
  517.       // ^ 是否收起右侧边栏的图标
  518.       .right-view-more {
  519.         position: relative;
  520.         width: 15px;
  521.         height: 100%;
  522.         background-color: #f3f6f8;
  523.         border-right: 1px solid #dcdfe6;
  524.         
  525.         .right-view-more-content {
  526.           width: 12px;
  527.           height: 30px;
  528.           background-color: #ccc;
  529.           border-bottom-left-radius: 4px;
  530.           border-top-left-radius: 4px;
  531.           position: absolute;
  532.           display: block;
  533.           margin: auto;
  534.           right: 0;
  535.           top: 0;
  536.           bottom: 0;
  537.           cursor: pointer;
  538.           z-index: 1;
  539.           transition: all ease 0.3s;
  540.  
  541.           &:hover {
  542.             background-color: #5e7ce0;
  543.           }
  544.  
  545.           .right-view-more-true {
  546.             width: 100%;
  547.             height: 10px;
  548.             position: absolute;
  549.             display: block;
  550.             margin: auto;
  551.             left: 0;
  552.             right: 0;
  553.             top: 0;
  554.             bottom: 0;
  555.  
  556.             &::before {
  557.               display: block;
  558.               height: 2px;
  559.               width: 10px;
  560.               content: "";
  561.               position: absolute;
  562.               left: 0;
  563.               top: 0;
  564.               background-color: #fff;
  565.               transform: rotate(-70deg);
  566.             }
  567.  
  568.             &::after {
  569.               display: block;
  570.               height: 2px;
  571.               width: 10px;
  572.               content: "";
  573.               position: absolute;
  574.               left: 0;
  575.               bottom: 0;
  576.               background-color: #fff;
  577.               transform: rotate(70deg);
  578.             }
  579.           }
  580.  
  581.           .right-view-more-false {
  582.             width: 100%;
  583.             height: 10px;
  584.             position: absolute;
  585.             display: block;
  586.             margin: auto;
  587.             left: 0;
  588.             right: 0;
  589.             top: 0;
  590.             bottom: 0;
  591.  
  592.             &::before {
  593.               display: block;
  594.               height: 2px;
  595.               width: 10px;
  596.               content: "";
  597.               position: absolute;
  598.               right: 0;
  599.               top: 0;
  600.               background-color: #fff;
  601.               transform: rotate(70deg);
  602.             }
  603.  
  604.             &::after {
  605.               display: block;
  606.               height: 2px;
  607.               width: 10px;
  608.               content: "";
  609.               position: absolute;
  610.               right: 0;
  611.               bottom: 0;
  612.               background-color: #fff;
  613.               transform: rotate(-70deg);
  614.             }
  615.           }
  616.         }
  617.       }
  618.       // / 是否收起右侧边栏的图标
  619.  
  620.       // ^ 右侧拖动条
  621.       .right-resize-bar {
  622.         position: relative;
  623.         display: flex;
  624.         align-items: center;
  625.         width: 7px;
  626.         height: 100%;
  627.         background-color: rgb(255, 255, 255);
  628.         cursor: col-resize;
  629.         user-select: none;
  630.         transition: all ease 0.3s;
  631.         font-size: 20px;
  632.         color: #40485c;
  633.  
  634.         &:hover {
  635.           color: #fff !important;
  636.           background-color: #5e7ce0 !important;
  637.         }
  638.       }
  639.       // / 右侧拖动条
  640.  
  641.       // ^ 右侧区域
  642.       .right-area-box {
  643.         flex: 1;
  644.         display: flex;
  645.         flex-direction: column;
  646.         overflow: hidden;
  647.         background-color: #f8f8f8;
  648.       }
  649.       // / 右侧区域
  650.     }
  651.     /* ---- / 右边 ---- */
  652.   }
  653. </style>

二、运行效果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/334774
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号