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

2023-10-15 01:38

本文主要是介绍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 -= movementif (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是用来监听点击边框线后将左侧容器隐藏

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

这篇关于vue如何实现边框线拖拽效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/214523

相关文章

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件,使用第三

Oracle查询优化之高效实现仅查询前10条记录的方法与实践

《Oracle查询优化之高效实现仅查询前10条记录的方法与实践》:本文主要介绍Oracle查询优化之高效实现仅查询前10条记录的相关资料,包括使用ROWNUM、ROW_NUMBER()函数、FET... 目录1. 使用 ROWNUM 查询2. 使用 ROW_NUMBER() 函数3. 使用 FETCH FI

Python脚本实现自动删除C盘临时文件夹

《Python脚本实现自动删除C盘临时文件夹》在日常使用电脑的过程中,临时文件夹往往会积累大量的无用数据,占用宝贵的磁盘空间,下面我们就来看看Python如何通过脚本实现自动删除C盘临时文件夹吧... 目录一、准备工作二、python脚本编写三、脚本解析四、运行脚本五、案例演示六、注意事项七、总结在日常使用

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

Java中Springboot集成Kafka实现消息发送和接收功能

《Java中Springboot集成Kafka实现消息发送和接收功能》Kafka是一个高吞吐量的分布式发布-订阅消息系统,主要用于处理大规模数据流,它由生产者、消费者、主题、分区和代理等组件构成,Ka... 目录一、Kafka 简介二、Kafka 功能三、POM依赖四、配置文件五、生产者六、消费者一、Kaf

使用Python实现在Word中添加或删除超链接

《使用Python实现在Word中添加或删除超链接》在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能,本文将为大家介绍一下Python如何实现在Word中添加或... 在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能。通过添加超

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS?优势:应用场景:DFS配置步骤什么是DFS?DFS指的是分布式文件系统(Distr

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端:安装nfs-utils2、服务端:创建共享目录3、服

C#使用yield关键字实现提升迭代性能与效率

《C#使用yield关键字实现提升迭代性能与效率》yield关键字在C#中简化了数据迭代的方式,实现了按需生成数据,自动维护迭代状态,本文主要来聊聊如何使用yield关键字实现提升迭代性能与效率,感兴... 目录前言传统迭代和yield迭代方式对比yield延迟加载按需获取数据yield break显式示迭

Python实现高效地读写大型文件

《Python实现高效地读写大型文件》Python如何读写的是大型文件,有没有什么方法来提高效率呢,这篇文章就来和大家聊聊如何在Python中高效地读写大型文件,需要的可以了解下... 目录一、逐行读取大型文件二、分块读取大型文件三、使用 mmap 模块进行内存映射文件操作(适用于大文件)四、使用 pand