vue实现拖拽滑动分割面板

 更新时间:2022年03月22日 08:19:59   作者:推开世界的门  
这篇文章主要为大家详细介绍了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
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 详解Vue中数据可视化词云展示与词云的生成

    详解Vue中数据可视化词云展示与词云的生成

    数据可视化是现代Web应用程序中的一个重要组成部分,词云是一种非常流行的数据可视化形式,可以用来展示文本数据中的主题和关键字,本文我们将介绍如何在Vue中使用词云库进行数据可视化词云展示和词云生成,需要的可以参考一下
    2023-06-06
  • 详解elementui之el-image-viewer(图片查看器)

    详解elementui之el-image-viewer(图片查看器)

    这篇文章主要介绍了详解elementui之el-image-viewer(图片查看器),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 基于vue中解决v-for使用报红并出现警告的问题

    基于vue中解决v-for使用报红并出现警告的问题

    下面小编就为大家分享一篇基于vue中解决v-for使用报红并出现警告的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue3使用vue-cli引入windicss报错Can‘t resolve windi.css问题

    vue3使用vue-cli引入windicss报错Can‘t resolve windi.css问题

    这篇文章主要介绍了vue3使用vue-cli引入windicss报错Can‘t resolve windi.css问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue报错Failed to execute 'appendChild' on 'Node'解决

    vue报错Failed to execute 'appendChild&apos

    这篇文章主要为大家介绍了vue报错Failed to execute 'appendChild' on 'Node'解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Vue项目打包(build)时,自动打以时间命名的压缩包方式

    Vue项目打包(build)时,自动打以时间命名的压缩包方式

    这篇文章主要介绍了Vue项目打包(build)时,自动打以时间命名的压缩包方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码

    Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码

    本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus *el-menu* 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单,对Vue3 无限级菜单组件相关知识感兴趣的朋友一起看看吧
    2022-09-09
  • 基于vue2的canvas时钟倒计时组件步骤解析

    基于vue2的canvas时钟倒计时组件步骤解析

    今天给大家介绍一款基于vue2的canvas时钟倒计时组件,这个时钟倒计时组件采用canvas动画的炫酷动画效果形式,根据剩余时间的多少变换颜色和旋转扇形的速度,适合抢购、拍卖、下注等业务场景,且对移动端友好,需要的朋友可以参考下
    2018-11-11
  • 详解Vue组件如何正确引用和使用外部方法

    详解Vue组件如何正确引用和使用外部方法

    在开发Vue应用时,我们经常需要在多个组件中复用一些通用的函数或方法,这些函数可能是我们自己编写的工具函数,也可能是从第三方库中导入的,下面我们就来看看如何正确引用和使用外部方法吧
    2024-01-01
  • vue,angular,avalon这三种MVVM框架优缺点

    vue,angular,avalon这三种MVVM框架优缺点

    本文给大家具体分析了下vue,angular,avalon这三种MVVM框架优缺点,十分的细致全面,有需要的小伙伴可以参考下
    2016-04-04

最新评论