vue如何实现边框线拖拽效果

Vue如何实现边框线拖拽效果

闲话少说，先上效果图！

这里我多加了一个点击边框线后隐藏左侧内容，给主体区域创造更大空间，这个看大家个人需求了，需要就用上

下面说下实现原理，首先这个边框线是一个单独的组件，我把它单独放在了一个公用目录下可做全局的公用组件
我们只需通过几个简单的监听事件就可以实现以上效果，分别是mousedown（鼠标左键点击下去触发的事件），mouseup（松开鼠标左键触发的事件），mousemove（指定元素鼠标移动触发的事件）

那么清楚这些后，思路就非常清晰了，点击这条边框线组件后，子组件通过监听鼠标在横轴上移动的距离向父组件传递参数来动态改变左侧树形结构导航栏的宽度（当然这里也可以使用vuex，看个人需要），让右侧内容区域的宽度自适应，这样就达到了边框线的拖拽效果（其实主要是左侧区域的宽度的变化展示出的这个效果）。

下面上代码
首先是边框线组件的代码

<div class="x-handle" @mousedown="mouseDown" @click="showout" unselectable="on" onselectstart="return false" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;"></div>

大家可以注意到为什么除了监听鼠标点击事件为还有这么几句话

unselectable="on"
onselectstart="return false"
style="-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;"

这几句话的作用是防止鼠标在拖拽移动时会选中页面的其他元素，这是我们不希望看到的（当然这也看个人需求）

然后我们在methods中写入

methods: {
    mouseDown (event) {
      document.addEventListener('mousemove', this.mouseMove)
      this.lastX = event.screenX
    },
    mouseMove (event) {
      this.$emit('widthChange', this.lastX - event.screenX)
      this.lastX = event.screenX
    },
    mouseUp () {
      this.lastX = ''
      document.removeEventListener('mousemove', this.mouseMove)
    },
    showout (result) {
      this.$emit('showoutWidth', 0)
    }
  }

lastX提前在data中定义好

data () {
    return {
      lastX: ''
    }
  }

screenX即event在横轴上移动的距离，大家可以自行打印日志看下，然后通过$emit方法将该事件传给父组件进行监听

写下以上代码后，我们分别在两个生命周期函数分别是created和destroyed写如下代码

created () {
    document.addEventListener('mouseup', this.mouseUp)
  },
  destroyed () {
    document.removeEventListener('mouseup', this.mouseUp)
  }

通过methods中的方法大家可以看到，在两个生命周期函数中一个是在内外部代码初始化实例后（created）后开始监听mouseup方法，另一个是在生命周期函数结束后（destroyed）移除监听事件，这样做是防止误拖动和鼠标拖动后无法停止监听事件的传递，大家可以在mousemove中打印日志看下，若不加以上代码，监听的横轴距离会一直在执行，不会停止，所以我们要摧毁掉

接下来在父组件中监听

<x-handle @widthChange="widthChange" @showoutWidth="showoutWidth"></x-handle>

在左侧属性结构导航中写入样式

<el-aside class="left-aside" :style="{width: width + 'px'}">

width提前在data中声明好

width: 240

也就是默认情况下该区域宽度是240
接下来将x-handle（即引入的边框线组件）监听的两个事件方法写好

widthChange (movement) {
      this.width -= movement
      if (this.width < 150) {
        this.width = 150
      }
      if (this.width > 240) {
        this.width = 240
      }
    },
    showoutWidth (res) {
      if (this.width > 0) {
        this.width = res
      } else {
        this.width = 240
      }
    }

上边的widthChange用于改变容器宽度的大小，但是设定了一个最大和最小宽度
下边的showoutWidth是用来监听点击边框线后将左侧容器隐藏

代码写到这里就结束啦，是不是很简单！
希望我们共同进步，若有更简洁更高效的方法还望大佬不吝赐教！