element drawer上下拖动_el-drawer实现上下拖拽

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
      }
    }
  }
})


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

左右拖动：

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
      }
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

在main.js中引入
import '@/directives/drawer-drag'
使用：

 <el-drawer
          v-drawerDrag
          :visible.sync="infoVisible"
          size="1200px"
        >
</el-drawer>
1
2
3
4
5
6

在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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

参考资料左右拖动：
https://www.jianshu.com/
p/5b250e7f94f3