请先看效果图

我主要是通过这个按钮来进行拖拽的，记住自行添加按钮图片

第一步

新建一个myDrawerDrag.js文件

import Vue from 'vue'Vue.directive('drawerDrag', {bind(el, binding, vnode, oldVnode) {const minWidth = 400const dragDom = el.querySelector('.el-drawer')dragDom.style.overflow = 'inherit'const resizeElL = document.createElement('div')const img = new Image(24, 38)// 拖拽图标，不需要可去除img.src = require('@/assets/other/drag.png')dragDom.appendChild(img)dragDom.appendChild(resizeElL)resizeElL.style.cursor = 'w-resize'resizeElL.style.position = 'absolute'resizeElL.style.height = '38px'resizeElL.style.width = '30px'resizeElL.style.left = '-15px'resizeElL.style.top = '50%'resizeElL.userSelect = 'none'img.style.position = 'absolute'img.style.left = '-12px'img.style.top = '50%'img.style.border = '1px solid #dbdbdb'img.style.backgroundColor = '#fff'img.style.borderRadius = '4px'img.style.userSelect = 'none'resizeElL.onmousedown = (e) => {const elW = dragDom.clientWidthconst EloffsetLeft = dragDom.offsetLeftconst clientX = e.clientXdocument.onmousemove = function(e) {e.preventDefault()document.body.style.userSelect = 'none'// 左侧鼠标拖拽位置// clientX > EloffsetLeft 如果不允许点击外面的内容可以拖拽的话设置这个if (clientX < EloffsetLeft + 30) {// 往左拖拽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 = nulldocument.onmouseup = nulldocument.body.style.userSelect = 'auto'}}}
})

第二步 引入main

import '@/utils/myDrawerDrag'  //自己的路径

第三步 在el-drawer使用

<el-drawer v-drawerDrag :visible.sync="drawerShow">
</el-drawer>

如果有用，请给我点赞收藏，我会很开心，谢谢