vue2:实现上下两栏布局,可拖拽改变高度

devtools/2025/1/19 23:02:05/
htmledit_views">

要拖拽改变两栏高度,那么总高度要确定,在拖拽的过程中,实时根据光标位置计算两栏高度,所以:

1、最外层有一个box, 高度是屏幕高度screenHeight;

2、该值在页面挂载时获取初始值(window.innerHeight-100),这里减少100,因为窗口上面有工具栏;

3、监听窗口resize事件并实时计算高度;

4、内部三个区域,分别是上中下,中间区域作为被拖动的那根线,光标悬浮其上时改变形状,在style中设置

html" title=javascript>javascript"><template><div id="box" ref="box" :style="{ height: screenHeight + 'px',width: '100%' }"><div id="top" ref="top">这里放置该区域的各种控件</div><div id="resize" ref="resize"></div><div id="bottom" ref="bottom"

http://www.ppmy.cn/devtools/151943.html

相关文章

Linux安装Docker教程(详解)

如果想要系统学习docker,建议进入官方文档中学习&#xff1a;docker官方文档 一. 基本概念 Docker Desktop 和 Docker Engine 有什么区别&#xff1f; Docker Desktop for Linux 提供用户友好的图形界面&#xff0c;可简化容器和服务的管理。它包括 Docker Engine&#xff0c…

力扣动态规划-2【算法学习day.96】

前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;建议灵神的题单和代码随想录&#xff09;和记录自己的学习过程&#xff0c;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关…

NVIDIA视频编解码

开源了两个项目&#xff1a;英伟达显卡视频编解码、jetson视频编解码。都是基于官方SDK进行的封装&#xff0c;由于官方自带的demo晦涩难懂并且每块都是独立的&#xff0c;我对SDK进行二次封装并形成了一套较为完整的视频编解码流程&#xff0c;调用简单&#xff0c;有完整的测…

MySQL的不同SQL模式导致行为不同?

现象&#xff1a; 我在两个mysql库都有相同定义的表&#xff0c;其中一个字段是varchar(1200)。当我都对这个表进行insert操作&#xff0c;而且超过此字段的规定长度&#xff08;此处是1200&#xff09;&#xff0c;这两库的行为是不一样的&#xff1a;库B是直接报错too long&…

【面试题】Spring/SpringBoot部分[2025/1/13 ~ 2025/1/19]

Spring/SpringBoot部分[2025/1/13 ~ 2025/1/19] 8. 什么是 Spring IOC/Di&#xff1f;9. Spring AOP默认用的是什么动态代理&#xff0c;两者的区别&#xff1f;10. 什么是 AOP&#xff1f;11. 看过源码吗&#xff1f;说下 Spring 由哪些重要的模块组成&#xff1f;12. 什么是循…

自己搭建远程桌面服务器-RustDesk(小白版)

1.RustDesk简介 此软件主要功能为远程各种设备&#xff08;其中包括Windows、macOS、Linux、iOS、Android、Web等&#xff09; 支持文件传输&#xff08;可直接拷贝远程电脑的文件&#xff0c;类似向日葵的远程文件&#xff09; 支持内网穿透&#xff08;支持端口映射&#…

1.18学习记录

re basectf2024 ez_maze 先查壳发现是没壳是64位文件&#xff0c;用ida看看 找到主调函数&#xff0c;查看伪C int __fastcall main(int argc, const char **argv, const char **envp) {int v3; // eaxchar v5[32]; // [rsp20h] [rbp-60h] BYREF__int16 v6; // [rsp40h] [rb…

Tidb集群升级到8.5.0过程中服务器遇到的坑

TiDB 集群升级到8.5.0踩坑记&#xff1a;从 GLIBC_2.15 升级到 GLIBC_2.28YUM 仓库问题的全面解决 1. 引言 作为部门的负责人&#xff0c;我常常觉得自己是个“救火队员”。昨天 TiDB 集群又出问题了&#xff1a;查询卡顿、响应时间变长&#xff0c;重启之后问题依旧。临近下班…