当前位置:   article > 正文

elementUI可拖拉宽度抽屉_el-drawer 拖动

el-drawer 拖动

1,需求:

elementUI的抽屉基础上,添加可拖动侧边栏宽度的功能,实现效果如下:
在这里插入图片描述

2,在原组件上添加自定义命令

在这里插入图片描述

    <el-drawer v-drawerDrag="'left'" :visible.sync="drawerVisible" direction="ltr">
      <div id="showId" style="padding: 1rem;font-size: 12px;overflow-x: hidden;" v-html="form.introduce"></div>
    </el-drawer>
  • 1
  • 2
  • 3

v-drawerDrag 属性是我们在原组件新加的命令,传入left或者right,需要与 direction 的let和rtl对应,

3,drawer-drag.js

export default {
  bind(el, binding, vnode, oldVnode) {
  	// 默认抽屉宽度,当宽度小于此值不在压缩
    const minWidth = 400
    const dragDom = el.querySelector('.el-drawer')
    dragDom.style.overflow = 'auto'
    const resizeElL = document.createElement('div')
    const img = new Image(24, 38)
    img.src = require('@/assets/images/stretch.png')
    dragDom.appendChild(img)
    dragDom.appendChild(resizeElL)
    resizeElL.style.cursor = 'w-resize'
    resizeElL.style.position = 'absolute'
    resizeElL.style.height = '100%'
    resizeElL.style.width = '10px'
    resizeElL.style.top = '0px'
    img.style.position = 'absolute'
    img.style.top = '50%'
    // console.log('binding', binding.value)
    // 区分右侧侧边栏和左侧侧边栏
    if (binding.value === 'right') {
      resizeElL.style.left = '0px'
      img.style.left = '-12px'
      resizeElL.onmousedown = (e) => {
        const elW = dragDom.clientWidth
        const EloffsetLeft = dragDom.offsetLeft
        const clientX = e.clientX
        document.onmousemove = function(e) {
          e.preventDefault()
          if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
            // 往右拖拽
            if (e.clientX > clientX) {
              // console.log('向右-----------------------------')
              if (dragDom.clientWidth >= minWidth) {
                dragDom.style.width = elW - (e.clientX - clientX) + 'px'
              }
            }
            if (e.clientX < clientX) {
              // console.log('向左-----------------------------')
              dragDom.style.width = elW + (clientX - e.clientX) + 'px'
            }
          }
        }
        // 拉伸结束
        document.onmouseup = function(e) {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    } else {
      resizeElL.style.right = '0px'
      img.style.right = '-12px'
      resizeElL.onmousedown = (e) => {
        const elW = dragDom.clientWidth
        const EloffsetLeft = dragDom.offsetLeft + dragDom.offsetWidth
        const clientX = e.clientX
        document.onmousemove = function(e) {
          e.preventDefault()
          if (clientX < EloffsetLeft && clientX > EloffsetLeft - 10) {
            if (e.clientX > clientX) {
              // console.log('向右-----------------------------')
              dragDom.style.width = elW + (e.clientX - clientX) + 'px'
            }
            if (e.clientX < clientX) {
              // console.log('向左-----------------------------')
              if (dragDom.clientWidth >= minWidth) {
                dragDom.style.width = elW - (clientX - e.clientX) + 'px'
              }
            }
          }
        }
        // 拉伸结束
        document.onmouseup = function(e) {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    }
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80

图标自取 stretch.png
在这里插入图片描述

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

闽ICP备14008679号