el-drawer宽度课拉伸

在使用el-drawer过程中我们想要对抽屉进行拉伸, 方便实现产品经理的需求, 可以写一个自定义命令嵌入到vue指令中, 可以全局引用也可以按需引用.

js代码 (前提是引入了vue)

Vue.directive('drawerDrag', {
  bind(el, binding, vnode, oldVnode) {
    const minWidth = 300
    const dragDom = el.querySelector('.el-drawer')
    // const dragDom1 = el.querySelector('.el-drawer__container')
    // const dragDom2 = el.querySelector('.el-drawer__wrapper')
    // dragDom.style.overflow = 'auto'

    const resizeElL = document.createElement('div')
    const img = new Image(24, 38)
    // img.src = require('@/assets/img/apk.png')
    // dragDom.appendChild(img)
    dragDom.appendChild(resizeElL)
    resizeElL.style.cursor = 'w-resize'
    resizeElL.style.position = 'absolute'
    resizeElL.style.height = '100%'
    resizeElL.style.width = '30px'
    resizeElL.style.left = '0px'
    resizeElL.style.top = '0px'
    img.style.position = 'absolute'
    img.style.left = '-12px'
    img.style.top = '50%'

    resizeElL.onmousedown = (e) => {
      const elW = dragDom.clientWidth
      const EloffsetLeft = dragDom.offsetLeft
      console.log(elW, EloffsetLeft)
      const clientX = e.clientX
      document.onmousemove = function (e) {
        // console.log(e.clientX,dragDom.offsetLeft,333333)
        e.preventDefault()
        // 左侧鼠标拖拽位置
        if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
          // 往左拖拽
          if (clientX > e.clientX) {
            console.log(e.clientX)
            dragDom.style.width = elW + (clientX - e.clientX) + 'px'
            console.log(dragDom.style.width)
          }
          // 往右拖拽
          console.log(clientX, e.clientX)
          if (clientX < e.clientX) {
            console.log(dragDom.clientWidth, 66666)
            if (dragDom.clientWidth >= minWidth) {
              console.log(elW, e.clientX, clientX)
              dragDom.style.width = elW - (e.clientX - clientX) + 'px'
            }
          }
        }
      }
      // 拉伸结束
      document.onmouseup = function (e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

 页面代码使用: 在 el-drawer 标签内使用指令 v-drawerDrag