vue 左树右表增加左右拖拽的功能

左树右表 是后台很常见的功能,当左树内容过长,可能就要考虑到拖拽的功能了

这里简单说一下我的实现思路,

   

     

......这里是树组织

     

   

 

......这里是表格

大概结构如上,left-tree设置最大宽度 并且相对定位,move-btn 设置cursor: col-resize手势 并绝对定位于父元素

关键right-table 必须设置最小宽度,例如:min-width: calc(70% - 61px);  要不然拖拽会有问题

接着是拖拽的代码,采用的自定义指令的方式

directives: {
    move(el, bindings) {
      el.onmousedown = function(e) {
        var init = e.clientX
        var parent = document.getElementById('left-tree')
        var initWidth = parent.offsetWidth
        document.onmousemove = function(e) {
          var end = e.clientX
          var newWidth = end - init + initWidth
          parent.style.width = newWidth + 'px'
        }
        document.onmouseup = function() {
          document.onmousemove = document.onmouseup = null
        }
      }
    }
  },

你可能感兴趣的:(vue 左树右表增加左右拖拽的功能)