el-drawer 可拉伸宽度 和 全局设置所有drawer可拉

1. 使用指令，单个el-drawer设置

1. 创建drawer-drag.js文件

import Vue from 'vue'

Vue.directive('drawerDrag', {
  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.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
      const clientX = e.clientX
      document.onmousemove = function(e) {
        e.preventDefault()
        // 左侧鼠标拖拽位置
        if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
          // 往左拖拽
          if (clientX > e.clientX) {
            dragDom.style.width = elW + (clientX - e.clientX) + 'px'
          }
          // 往右拖拽
          if (clientX < e.clientX) {
            if (dragDom.clientWidth >= minWidth) {
              dragDom.style.width = elW - (e.clientX - clientX) + 'px'
            }
          }
        }
      }
      // 拉伸结束
      document.onmouseup = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

2. 在main.js中引入

import '@/directives/drawer-drag'

3.使用

 <el-drawer
          v-drawerDrag
          :visible.sync="infoVisible"
          size="1200px"
        >
</el-drawer>

2. 全局设置所有的抽屉框都可以拉伸

• 由于el-drawer是使用的display:none控制的，在页面一开始就渲染好了，所以采用的是在app.vue中监听路由的变化来获取dom添加拉伸的功能。

其中有个问题：直接console.log document.getElementsByClassName('el-drawer') 有值，但是遍历时没有数据。想到 可能是子组件没有被挂载好，就使用了this.$nextTick，刷新可以能获取到，但是路由切换出现偶然现象，有时有，有时没有。故后又使用的setTimeout ，暂时可以解决。

 watch: {
    $route: {
      handler() {
        setTimeout(() => {
          const minWidth = 400
          const dragDoms = Array.from(document.getElementsByClassName('el-drawer'))
          for (let index = 0; index < dragDoms.length; index++) {
            const dragDom = dragDoms[index]
            dragDom.style.overflow = 'inherit'
            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.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
              const clientX = e.clientX
              document.onmousemove = function(e) {
                e.preventDefault()
                // 左侧鼠标拖拽位置
                if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
                  // 往左拖拽
                  if (clientX > e.clientX) {
                    dragDom.style.width = elW + (clientX - e.clientX) + 'px'
                  }
                  // 往右拖拽
                  if (clientX < e.clientX) {
                    if (dragDom.clientWidth >= minWidth) {
                      dragDom.style.width = elW - (e.clientX - clientX) + 'px'
                    }
                  }
                }
              }
              // 拉伸结束
              document.onmouseup = function(e) {
                document.onmousemove = null
                document.onmouseup = null
              }
            }
          }
        }, 3000)
      },
      deep: true
    }
  },

思路借鉴：https://www.cnblogs.com/lizhao123/p/14655976.html

效果图 stretch.png