通过指令的方式, 在
drawer
的左侧边缘, 添加一个触发拖拽的长条形区域, 监听鼠标左键按下时启动
document.onmousemove
的监听, 监听鼠标距离浏览器右边的距离, 设置为
drawer
的宽度, 并添加约束: 不能小于浏览器宽度的 20%, 不能大于浏览器宽度的 80%.
创建文件
src/directive/elment-ui/drawer-drag-width.js
, 内容如下
import Vue from 'vue'
* el-drawer 拖拽指令
Vue.directive('el-drawer-drag-width', {
bind(el, binding, vnode, oldVnode) {
const drawerEle = el.querySelector('.el-drawer')
console.log(drawerEle)
const dragItem = document.createElement('div')
dragItem.style.cssText = 'height: 100%;width: 5px;cursor: w-resize;position: absolute;left: 0;'
drawerEle.append(dragItem)
dragItem.onmousedown = (downEvent) => {
document.body.style.userSelect = 'none'
document.onmousemove = function(moveEvent) {
let realWidth = document.body.clientWidth - moveEvent.pageX
const width30 = document.body.clientWidth * 0.2
const width80 = document.body.clientWidth * 0.8
realWidth = realWidth > width80 ? width80 : realWidth < width30 ? width30 : realWidth
drawerEle.style.width = realWidth + 'px'
document.onmouseup = function(e) {
document.body.style.userSelect = 'initial'
document.onmousemove = null
document.onmouseup = null
然后在 main.js 中将其导入
import './directive/element-ui/drawer-drag-width'
在 el-drawer 上添加指令 v-el-drawer-drag-width 即可, 如下
<el-drawer
v-el-drawer-drag-width
:visible.sync="helpDrawer.show"
direction="rtl"
class="my-drawer"
<template #title>
<div class="draw-title">{{ helpDrawer.title }}</div>
</template>
<Editor
v-model="helpDrawer.html"
v-loading="helpDrawer.loading"
class="my-wang-editor"
style="overflow-y: auto;"
:default-config="helpDrawer.editorConfig"
:mode="helpDrawer.mode"
@onCreated="onCreatedHelp"
</el-drawer>
南山彭于晏
国内某知名大厂
粉丝
