vue实现拖拽滑动分割面板

目录

• 需求背景
• 整体思路
• 代码实现

 这篇文章主要为大家详细介绍了vue实现拖拽滑动分割面板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现拖拽滑动分割面板的具体代码，供大家参考，具体内容如下

需求背景

左边是列表，右边是详情。 想更大范围的查看详情，所以要拖拽滑块，进行面板的分割

整体思路

• 在布局上，采用flex布局，单位采用百分比。设置flex：1,让其自动伸缩

• 滑动滑块，计算滑块在滑动过程中，占整个页面的百分比

• 将百分比，通过动态样式赋值给列表页的宽度

• 同时改变滑块的位置(也是百分比形式)

• 其次就是在vue里对鼠标事件的使用

代码实现

在template里 写事件

@mousedown.prevent="mousedown"

在methods里写方法 

/**
     * 按下鼠标
     */
      mousedown() {
        document.addEventListener('mousemove', this.handleMouseMove, false);
        document.addEventListener('mouseup', this.handleMouseUp, false);
    },
    /**
     * 按下滑动器，移动鼠标
     */
    handleMouseMove(e) {
      /**
       * 计算容器总宽度
       * 计算滑块到左边的距离
       * 计算偏移百分比: (滑块距离左边的距离 / 页面宽度) * 100
       * 传递移动百分比和距左边的距离
       */
      const clientRect = this.$refs.mainContent.getBoundingClientRect();
      const offset = e.pageX;
      const panelPercent = (offset / clientRect.width) * 100;
      this.panelPercent = panelPercent;
      this.mainContentWidth = offset;
      this.$refs.imgMove.style.left = panelPercent + '%';
      console.log('拖动中', this.panelPercent);
    },
    /**
     * 松开滑动器
     */
    handleMouseUp () {
      document.removeEventListener('mousemove', this.handleMouseMove, false);
    },

对边界处理 

if (this.panelPercent < this.min) {
        this.panelPercent = this.min
      }
      if (this.panelPercent > this.max) {
        this.panelPercent = this.max
}