Vue 实现左右拖动改变元素宽度 ╰+哭是因爲堅強的太久メ 2022-09-05 06:10 368阅读 0赞 基础布局 <div ref="lucky"> 左侧 </div> <!-- 拖拽线 --> <div id="line" ref="moveDom" class="dragLine"/> <div ref="rightDom"> 右侧 </div> 执行方法 mounted() { this.options() this.drag() }, 定义方法 methods: { // 拖动改变宽度 moveHandle(nowClient) { this.$nextTick(() => { let changeWidth = nowClient + 15 let oop = document.getElementById('luckysheet') let remainWidth = document.body.clientWidth - nowClient // oop.style.width = changeWidth + 'px;' this.$refs.lucky.style.setProperty('width', changeWidth + 'px', 'important'); this.$refs.rightDom.style.width = remainWidth + 'px' this.$refs.moveDom.style.right = remainWidth + 'px' }) // 重置表格 this.options() }, // 拖动 drag() { let _that = this; _that.$nextTick(() => { const moveDom = document.getElementById('line') moveDom.onmousedown = function(e) { _that.clientStartX = e.clientX document.onmousemove = function(e) { _that.moveHandle(e.clientX) return false } document.onmouseup = function() { document.onmousemove = null document.onmouseup = null } return false } }) }, } 线的样式 <style scoped> /*线的样式*/ .dragLine { border-right: 2px solid #dcdfe6; cursor: col-resize; position: absolute; right: 40%; top: 40px; height: calc(100% - 40px); z-index: 999; } </style>
还没有评论,来说两句吧...