vue页面实现左右div宽度,上下div高度分割线手动拖动高度或者宽度自动变化,两个div宽度或者高度拉伸调节,实现左右可拖动改变宽度的div内容显示区

实现左右或者上下div两部分拖动,宽度或者高度自动变化,实现流畅平滑的变化,还可以是实现拖动到一定宽度就不让拖动了,如果你不需要最小宽度,就直接去掉样式就行

这是页面。分左中右三部分,中间我是用来作为拖动的按钮,如果你不需要,你可以让外部content相对定位,center中间部分绝对定位。

我这边实现的左有都具有最小宽度,左右拖动,改变的宽度。
上下div拖动,自动变化高度同样可以以相同的原理来实现。

<div class="content"><div class="left" ref="refLeft"></div><div class="center"ref="refCenter"@mousedown.stop.prevent="startResize"></div><div class="right" ref="refRight"></div>
</div>

这是对应的样式,根据自身情况,可以自己调整样式实现相关功能

.content{height: 100%;width:100%display: flex;.left {flex: 1;height: 100%;min-width: 200px;width:600px}.resize {cursor: col-resize;//拖动鼠标样式height: 100%;width: 8px;}.right {width: calc(100% - 600px);min-width: calc(100% - 600px);height: 100%;}}
// 左右拖动这里的一个大概说明,就是把减少的div宽度,加到另一个div的宽度上去,就是现实一增一减;变量自己取data定义就行了,startResize(event) {this.startX = event.clientX;this.startWidth = this.$refs.refRight.offsetWidth;console.log(event.clientX,this.startWidth,'this.startWidth')this.isResizing = true;window.addEventListener('mousemove', this.doResize);window.addEventListener('mouseup', this.stopResize);},doResize(event) {if (this.isResizing) {console.log(event.clientX,'this.startWidth')const deltaX = -event.clientX + this.startX;this.$refs.refRight.style.width = this.startWidth + deltaX + 'px';}},stopResize() {this.isResizing = false;window.removeEventListener('mousemove', this.doResize);window.removeEventListener('mouseup', this.stopResize);},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/777255.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java实现猜数字游戏:编程入门之旅

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

Java研学-SpringBoot(三)

五 Spring Boot 自动配置原理 1 概念 springboot的自动装配就是从spring.factories文件中获取到对应的需要进行自动装配的类&#xff0c;并生成相应的Bean对象&#xff0c;然后将它们交给spring容器来帮我们进行管理。核心注解&#xff1a;SpringBootApplication   调用main…

使用 Yoda 和 ClickHouse 进行实时欺诈检测

背景 Instacart 是北美领先的在线杂货公司,拥有数百万活跃的客户和购物者。在其平台上打击欺诈和滥用行为不仅对于维护一个值得信赖和安全的环境至关重要,也对保持Instacart的财务健康至关重要。在这篇文章中,将介绍了一个欺诈平台——Yoda,解释了为什么我们选择ClickHous…

奖学金NOIP2007 普及组 T1

题目背景 NOIP2007 普及组 T1 题目描述 某小学最近得到了一笔赞助&#xff0c;打算拿出其中一部分为学习成绩优秀的前 55 名学生发奖学金。期末&#xff0c;每个学生都有 33 门课的成绩&#xff1a;语文、数学、英语。先按总分从高到低排序&#xff0c;如果两个同学总分相同…

Linux 反引号、单引号以及双引号的区别

1.单引号—— 单引号中所有的字符包括特殊字符&#xff08;$,,和\&#xff09;都将解释成字符本身而成为普通字符。它不会解析任何变量&#xff0c;元字符&#xff0c;通配符&#xff0c;转义符&#xff0c;只被当作字符串处理。 2.双引号——" 双引号&#xff0c;除了$,…

Android 14.0 SystemUI下拉状态栏增加响铃功能

1.概述 在14.0的系统产品rom定制化开发中,在对systemui的状态栏开发中,对SystemUI下拉状态栏的QuickQSPanel区域有快捷功能键开关,对于增加各种响铃快捷也是常用功能, 有需要增加响铃功能开关功能,接下来就来分析SystemUI下拉状态栏QuickQSPanel快捷功能键开关的相关源码…

API接口开发亚马逊国际获得AMAZON商品详情api采集商品详情页实时数据、实时销量、库存等参数接入演示

要获取亚马逊商品的实时数据、销量和库存等信息&#xff0c;您需要使用亚马逊提供的一些API接口。以下是一些可能的步骤&#xff1a; 注册key账号&#xff1a;首先&#xff0c;您需要注册一个账号。这将允许您访问亚马逊的各种API。 创建一个新的应用&#xff1a;在您的开发者…

AI智能分析网关智慧食安监管系统方案

3.15晚会刚过不久&#xff0c;淀粉肠的“屈辱”终于得以洗清&#xff0c;但某些品牌奶茶、梅菜扣肉、预制菜等等&#xff0c;生产过程仍是触目惊心。如何提升食品安全管理水平&#xff0c;保障食品从生产到消费环节的质量和安全&#xff1f;TSINGSEE青犀智利用智能分析网关V4Ea…

【图像合成】基于DCGAN典型网络的MNIST字符生成(pytorch)

关于 近年来&#xff0c;基于卷积网络&#xff08;CNN&#xff09;的监督学习已经 在计算机视觉应用中得到了广泛的采用。相比之下&#xff0c;无监督 使用 CNN 进行学习受到的关注较少。在这项工作中&#xff0c;我们希望能有所帮助 缩小了 CNN 在监督学习和无监督学习方面的成…

aws使用记录

数据传输&#xff08;S3) 安装命令行 安装awscli: https://docs.aws.amazon.com/zh_cn/cli/latest/userguide/getting-started-install.html#getting-started-install-instructions 直到 aws configure list 可以运行 身份验证&#xff1a; 运行&#xff1a; aws config…

字符计数.

题目描述 给定一个单词&#xff0c;请计算这个单词中有多少个元音字母&#xff0c;多少个辅音字母。 元音字母包括 a,e,i,o,u&#xff0c;共五个&#xff0c;其他均为辅音字母。 输入描述 输入格式 输入一行&#xff0c;包含一个单词&#xff0c;!单词中只包含小写英文字母。单…

【QGIS从shp文件中筛选目标区域导出为shp】

文章目录 1、写在前面2、QGIS将shp文件中目标区域输出为shp2.1、手动点选2.2、高级过滤 3、上述shp完成后&#xff0c;配合python的shp文件&#xff0c;即可凸显研究区域了 1、写在前面 利用shp文件制作研究区域mask&#xff0c;Matlab版本&#xff0c;请点击 Matlab利用shp文…

网络编程综合项目-多用户通信系统

文章目录 1.项目所用技术栈本项目使用了java基础&#xff0c;面向对象&#xff0c;集合&#xff0c;泛型&#xff0c;IO流&#xff0c;多线程&#xff0c;Tcp字节流编程的技术 2.通信系统整体分析主要思路&#xff08;自己理解&#xff09;1.如果不用多线程2.使用多线程3.对多线…

uniapp-Form示例(uviewPlus)

示例说明 Vue版本&#xff1a;vue3 组件&#xff1a;uviewPlus&#xff08;Form 表单 | uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架&#xff09; 说明&#xff1a;表单组建、表单验证、提交验证等&#xff1b; 截图&#xff1a; 示例代码 <templat…

3月28日,每日信息差

&#x1f384; 亚马逊未来15年或斥资1480亿美元在全球建设并运营数据中心 &#x1f30d; 中国移动正式商用5.5G 网络&#xff0c;Find X7系列成为首款5.5G手机 &#x1f30b; UC网盘官宣上传、下载不限速 &#x1f381; 优酷发布行业首款影视制作车 ✨ 阿里云联发科联手为手机芯…

O2OA(翱途)开发平台-快速入门开发一个门户实例

O2OA(翱途)开发平台[下称O2OA开发平台或者O2OA]拥有门户页面定制与集成的能力&#xff0c;平台通过门户定制&#xff0c;可以根据企业的文化&#xff0c;业务需要设计符合企业需要的统一信息门户&#xff0c;系统首页等UI界面。本篇主要介绍通过门户管理系统如何快速的进行一个…

第一次开发微信小程序的总结与心得

我们的小程序开发团队有三个人——两个前端和一个后端&#xff0c;一个没有产品经理和UI设计师的队伍&#xff0c;一个小程序开发零经验的队伍&#xff0c;却需要完成需求分析、页面设计、代码编写、功能测试、小程序上线的整个过程&#xff0c;所以在开发过程中&#xff0c;我…

团队建设与管理案例分析题

习题一 最近A公司接了一个信息系统运维项目&#xff0c;而且非常重视&#xff0c;任命了有丰富售后服务张某为系统规划与管理师&#xff0c;全权授权张某负责该项目&#xff0c;并要求他负责企业运维服务能力建设和提升。张某也学习了大量项目管理知识和运维管理知识&#xff…

刷题有一个疑问

public class Main {public static void main(String[] args) { // boolean a zhengchu(2,10); // System.out.print(a); // boolean a btrue(126); // System.out.print(a);int decimalNumber 10; // 十进制数String binaryString Integer.toS…

学点儿Java_Day12_IO流

1 IO介绍以及分类 IO: Input Output 流是一组有顺序的&#xff0c;有起点和终点的字节集合&#xff0c;是对数据传输的总称或抽象。即数据在两设备间的传输称为流&#xff0c;流的本质是数据传输&#xff0c;根据数据传输特性将流抽象为各种类&#xff0c;方便更直观的进行数据…