import Vue from 'vue'
Vue.directive('drawerDrag', {
bind(el, binding, vnode, oldVnode) {
const minHeight = 550
const dragDom = el.querySelector('.el-drawer')
dragDom.style.overflow = 'auto'
const resizeElL = document.createElement('div')
const img=document.createElement('div')
img.className='drawer-drag-move-trigger'
const allI=document.createElement('div')
allI.className='drawer-drag-move-trigger-point'
// i.src = require('../public/img/menu.png')
const a=document.createElement('i')
const b=document.createElement('i')
const c=document.createElement('i')
const d=document.createElement('i')
const i=document.createElement('i')
a.className='menu'
b.className='menu'
c.className='menu'
d.className='menu'
i.className='menu'
allI.appendChild(a)
allI.appendChild(b)
allI.appendChild(c)
allI.appendChild(d)
allI.appendChild(i)
img.appendChild(allI)
dragDom.appendChild(img)
dragDom.appendChild(resizeElL)
resizeElL.style.cursor = 'n-resize'
resizeElL.style.position = 'absolute'
resizeElL.style.height = '20px'
resizeElL.style.width = '100%'
resizeElL.style.left = '0px'
resizeElL.style.top = '-5px'
img.style.position = 'relaxtion'
img.style.left = '50%'
img.style.top = '-12px'
resizeElL.onmousedown = (e) => {
const elW = dragDom.clientHeight
const EloffsetTop = dragDom.offsetTop
const clientY = e.clientY
document.onmousemove = function(e) {
e.preventDefault()
// 左侧鼠标拖拽位置
if (clientY > EloffsetTop-5 && clientY < EloffsetTop + 15) {
// 往左拖拽
if (clientY > e.clientY && e.clientY > 5) {
dragDom.style.height = elW + (clientY - e.clientY) + 'px'
}
// 往右拖拽
if (clientY < e.clientY) {
if (dragDom.clientHeight >= minHeight) {
dragDom.style.height = elW - (e.clientY - clientY) + 'px'
}
}
}
}
// 拉伸结束
document.onmouseup = function(e) {
document.onmousemove = null
document.onmouseup = null
}
}
}
})
左右拖动:
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
}
}
}
})
在main.js中引入
import '@/directives/drawer-drag'
使用:
<el-drawer
v-drawerDrag
:visible.sync="infoVisible"
size="1200px"
>
</el-drawer>
在App.vue中写样式
.drawer-drag-move-trigger {
text-align: center;
width: 100px;
height: 8px;
line-height: 15px;
position: absolute;
top: 0px !important;
background: #f3f3f3;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
border-radius: 4px;
box-shadow: 0 0 1px 1px rgba(0,0,0,.2);
}
.drawer-drag-move-trigger-point {
width: 100px;
height: 10px;
position: absolute;
left: 50%;
top: 0px;
transform: translateX(-50%);
background: #fff;
color: #f3f3f3;
border: 1px solid #ccc;
border-radius: 10px;
text-align: center;
overflow: hidden;
display: flex;
justify-content: center;
}
.menu {
width: 1px;
height: 4px;
background: #ccc;
display: block;
margin: 3px 1px 0;
}
参考资料左右拖动:
https://www.jianshu.com/
p/5b250e7f94f3