当前位置:   article > 正文

element drawer上下拖动_el-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

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号