Vue 实现左右拖动改变元素宽度

╰+哭是因爲堅強的太久メ 2022-09-05 06:10 509阅读 0赞

基础布局

  1. <div ref="lucky"> 左侧 </div>
  2. <!--  拖拽线  -->
  3. <div  id="line" ref="moveDom" class="dragLine"/>
  4. <div  ref="rightDom"> 右侧 </div>

执行方法

  1. mounted() { 
  2.   this.options()
  3.   this.drag()
  4. },

定义方法

  1. methods: { 
  2.   // 拖动改变宽度
  3.   moveHandle(nowClient) { 
  4.     this.$nextTick(() => { 
  5.       let changeWidth = nowClient + 15
  6.       let oop = document.getElementById('luckysheet')
  7.       let remainWidth = document.body.clientWidth - nowClient
  8.       // oop.style.width = changeWidth + 'px;'
  9.       this.$refs.lucky.style.setProperty('width', changeWidth + 'px', 'important');
  10.       this.$refs.rightDom.style.width = remainWidth + 'px'
  11.       this.$refs.moveDom.style.right = remainWidth + 'px'
  12.     })
  13.     // 重置表格
  14.     this.options()
  15.   },
  16.   // 拖动
  17.   drag() { 
  18.     let _that = this;
  19.     _that.$nextTick(() => { 
  20.       const moveDom = document.getElementById('line')
  21.       moveDom.onmousedown = function(e) { 
  22.         _that.clientStartX = e.clientX
  23.         document.onmousemove = function(e) { 
  24.           _that.moveHandle(e.clientX)
  25.           return false
  26.         }
  27.         document.onmouseup = function() { 
  28.           document.onmousemove = null
  29.           document.onmouseup = null
  30.         }
  31.         return false
  32.       }
  33.     })
  34.   },
  35. }

线的样式

  1. <style scoped>
  2.   /*线的样式*/
  3.   .dragLine { 
  4.     border-right: 2px solid #dcdfe6;
  5.     cursor: col-resize;
  6.     position: absolute;
  7.     right: 40%;
  8.     top: 40px;
  9.     height: calc(100% - 40px);
  10.     z-index: 999;
  11.   }
  12. </style>

发表评论

表情：
评论列表 （有 0 条评论，509人围观）

还没有评论，来说两句吧...

相关阅读