JS页面宽度拖拽

最新推荐文章于 2024-04-06 14:56:52 发布

vue练习时长两年半的个人实习生

最新推荐文章于 2024-04-06 14:56:52 发布

阅读量201

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/o_o1996/article/details/128458375

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<div :class="showInfo ? 'calculation-warp-side' : 'calculation-warp'">
    // 左侧宽度
    <div ref="refLeft" :class="showInfo ? 'calculation-left-side' : 'calculation-warp-left'">
    </div>
    // 拖拽线
    <div ref="refMid" class="handle-width"></div>
    // 右侧宽度
    <div class="calculation-warp-right" />
</div>

// vue代码
    handleDragWidth() {
      let handleWidth = this.$refs.refMid
      let leftWidth = this.$refs.refLeft
      // 
      handleWidth.onmousedown = function (e) {
        handleWidth.style.background = '#818181'
        let startX = e.clientX
        handleWidth.left = handleWidth.offsetLeft
        document.onmousemove = function (e) {
          let endX = e.clientX
          let moveLen = handleWidth.left + (endX - startX) 
          handleWidth.style.left = moveLen 
          leftWidth.style.width = moveLen + 'px' // 坐标宽度，右侧flex:1 自适应
        }
        document.onmouseup = function (evt) {
          handleWidth.style.background = '#d6d6d6'
          document.onmousemove = null
          document.onmouseup = null
          handleWidth.releaseCapture && handleWidth.releaseCapture() 
        }
        handleWidth.setCapture && handleWidth.setCapture() 
        return false
      }
    }