elementUI可拖拉宽度抽屉

1,需求:

在elementUI的抽屉基础上,添加可拖动侧边栏宽度的功能,实现效果如下:

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

html 复制代码
    <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>

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

3,drawer-drag.js

xml 复制代码
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
        }
      }
    }
  }
}

图标自取 stretch.png

相关推荐
海天胜景1 天前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
海天胜景1 天前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
百锦再1 天前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
一笑code1 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*16881 天前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员2 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
华子w9089258592 天前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
海的诗篇_2 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
hackchen2 天前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
蓝胖子的多啦A梦2 天前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改