【Element-UI】实现el-drawer抽屉的左右拖拽宽度

对Element-UI的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/portal_2.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、引入drawer-drag.js并且使用
引入js：

import '@/utils/drawer-drag'

在el-drawer加入v-drawerDrag使用

 <el-drawer
          v-drawerDrag
</el-drawer>

实现来源：
1、https://www.cnblogs.com/younghxp/p/17539907.html
2、https://www.jianshu.com/p/5b250e7f94f3

原文地址：https://blog.csdn.net/ew45218/article/details/142628734

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！