使用Vue指令实现面板拉伸功能

目的:现在有一个PDF预览页面,左侧为PDF预览区域,右侧为可以进行AI功能的面板。现在想让AI面板通过拖动左边框实现面板拉伸。

实现效果如下面的视频:

关键点:

  1. 预览区是使用iframe渲染的,在拖动的过程中,如果鼠标进入了iframe区域中,会使鼠标事件失效,这里是增加了一个透明遮罩层,这样不会影响预览效果,也不会导致鼠标事件失效 
  2. 拉伸的方式是使用了Vue拉伸指令,创建了一个拖拽手柄,绑定@pointdown事件

<div v-show="isResizing" class="iframe-overlay" />

完整代码如下: 

<div class="dragBoxLeft">
    <!-- PDF遮罩层 -->
    <div v-show="isResizing" class="iframe-overlay" />
    <!-- PDF预览区域 -->
    <iframe v-show="!counterStore.pdfViewLoading" :src="pSrc" width="100%" height="100%"    class="ins" id="pdfPreview" sandbox="allow-same-origin allow-scripts" />
</div>

<!-- 拖拽手柄 -->
<div class="resizer" @pointerdown="initResize" />

<!-- AI面板 -->
<div class="dragBoxRight":style="{ width: rightPanelWidth + 'px' }">
    <chatConver />
</div>
const rightPanelWidth = ref(400); // 右侧区域的初始宽度
const isResizing = ref(false); // 标记是否正在拖拽
const minWidth = 400; // 右侧最小宽度
const maxWidth = 700; // 右侧最大宽度
 
// 拖拽相关事件
const initResize = () => {
  isResizing.value = true; // 设置拖拽状态为 true
 
  document.addEventListener('pointermove', resizeRightPanel);
  document.addEventListener('pointerup', stopResize);
};
 
// 动态调整右侧区域的宽度
const resizeRightPanel = (e: PointerEvent) => {
  if (!isResizing.value) return;
 
  const newWidth = window.innerWidth - e.clientX;
  rightPanelWidth.value = Math.min(maxWidth, Math.max(minWidth, newWidth)); // 确保宽度在最小和最大范围内
};
 
// 停止拖拽
const stopResize = () => {
  isResizing.value = false; // 停止拖拽
 
  document.removeEventListener('pointermove', resizeRightPanel);
  document.removeEventListener('pointerup', stopResize);
};
 
// 确保在组件卸载时移除事件监听器
onUnmounted(() => {
  isResizing.value = false; // 停止拖拽
 
  document.removeEventListener('pointermove', resizeRightPanel);
  document.removeEventListener('pointerup', stopResize);
});
.resizer {
  width: 1px;
  cursor: ew-resize;
  background-color: #ddd;
}
 
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
  z-index: 10;
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

软件测试学习笔记丨Selenium键盘鼠标事件ActionChains

本文转自测试人社区&#xff0c;原文链接&#xff1a;https://ceshiren.com/t/topic/22515 本文为霍格沃兹测试开发学社的学习经历分享&#xff0c;写出来分享给大家&#xff0c;希望有志同道合的小伙伴可以一起交流技术&#xff0c;一起进步~ 说明&#xff1a;本篇博客基于sel…

Detecting Holes in Point Set Surfaces 论文阅读

下载链接 Detecting Holes in Point Set Surfaces 摘要 3D 数据采集过程&#xff08;例如激光范围扫描&#xff09;产生的重要物体模型通常包含由于遮挡、反射或透明度而产生的孔洞。本文的目标就是在点集表面上检测存在的孔洞。对于每个点&#xff0c;将多个标准组合成一个综…

C# shader 生成程序纹理

1、程序纹理是什么 程序纹理&#xff08;Procedural Textures&#xff09;就是通过程序代码生成的纹理 2、程序纹理如何生成 一般生成程序纹理由两种方式&#xff1a; 通过C#脚本生成纹理后传递给Shader直接在Shader代码中自定义逻辑生成纹理 3、程序纹理的好处 程序纹理…

2.1 > Shell 是什么、如何更熟练的使用 Bash Shell

Shell 基础知识 Shell是计算机操作系统中的一个命令行解释器&#xff0c;由C语言编写&#xff0c;用于用户与操作系统之间进行交互。用户可以通过Shell输入命令&#xff0c;操作系统接收到这些命令后执行相应的操作。Shell一般还提供了编程语言的基本功能&#xff0c;允许用户…

梯度累积的隐藏陷阱:Transformer库中梯度累积机制的缺陷与修正

在本地环境下对大规模语言模型&#xff08;LLMs&#xff09;进行微调时&#xff0c;由于GPU显存限制&#xff0c;采用大批量训练通常难以实现。为解决此问题&#xff0c;一般普遍会采用梯度累积技术来模拟较大的批量规模。该方法不同于传统的每批次更新模型权重的方式&#xff…

MacOS RocketMQ安装

MacOS RocketMQ安装 文章目录 MacOS RocketMQ安装一、下载二、安装修改JVM参数启动关闭测试关闭测试测试收发消息运行自带的生产者测试类运行自带的消费者测试类参考博客&#xff1a;https://blog.csdn.net/zhiyikeji/article/details/140911649 一、下载 打开官网&#xff0c;…

A-【项目开发知识管理】Android AIDL跨进程通信

Android AIDL跨进程通信 文章目录 Android AIDL跨进程通信0.我为啥要写这篇文章1.AIDL是干啥的&#xff1f;1.1简述1.2官方话 2.在AndroidStudio中怎么干&#xff1f;2.1准备工作2.2在项目A中创建AIDL文件夹2.3在项目A中创建一个aidl文件2.4将项目A进行一次Rebuild操作2.5在项目…

visual studio设置修改文件字符集方法

该方法来自网文&#xff0c;特此记录备忘。 添加两个组件&#xff0c;分别是Force UTF-8,FileEncoding。 截图如下&#xff1a; 方法如下&#xff1a;vs中点击“扩展”->“管理扩展”&#xff0c;输入utf搜索&#xff0c;安装如下两个插件&#xff0c;然后重启vs&#xf…

【设计模式系列】观察者模式

一、什么是观察者模式 观察者模式&#xff08;Observer Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了对象之间的一对多依赖关系&#xff0c;当一个对象的状态发生变化时&#xff0c;所有依赖于它的对象都会得到通知并自动更新。这种模式也被称为发布-订阅模式&…

matplotlib库

1.概念 Matplotlib 库&#xff1a;是一款用于数据可视化的 Python 软件包&#xff0c;支持跨平台运行&#xff0c;它能够根据 NumPy ndarray 数组来绘制 2D 图像&#xff0c;它使用简单、代码清晰易懂 Figure&#xff1a;指整个图形&#xff0c;您可以把它理解成一张画布&…

【含开题报告+文档+PPT+源码】基于vue框架的东升餐饮点餐管理平台的设计与实现

开题报告 在当前信息化社会背景下&#xff0c;餐饮行业正经历着由传统线下服务模式向线上线下深度融合的转变。随着移动互联网技术及大数据应用的飞速发展&#xff0c;用户对于餐饮服务平台的需求也日益多元化和个性化。他们期望能在一个集便捷、高效、个性化于一体的平台上完…

快速搭建SpringBoot3+Prometheus+Grafana

快速搭建SpringBoot3PrometheusGrafana 一、搭建SpringBoot项目 1.1 创建SpringBoot项目 1.2 修改pom文件配置 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://…

如何使用 Spring Cloud 实现客户端负载平衡

微服务系统通常运行每个服务的多个实例。这是实施弹性所必需的。因此&#xff0c;在这些实例之间分配负载非常重要。执行此操作的组件是负载均衡器。Spring 提供了一个 Spring Cloud Load Balancer 库。在本文中&#xff0c;您将学习如何使用它在 Spring Boot 项目中实现客户端…

SolarWinds Web Help Desk曝出严重漏洞,已遭攻击者利用

近日&#xff0c;CISA 在其 “已知漏洞”&#xff08;KEV&#xff09;目录中增加了三个漏洞&#xff0c;其中一个是 SolarWinds Web Help Desk (WHD) 中的关键硬编码凭据漏洞&#xff0c;供应商已于 2024 年 8 月底修复了该漏洞。 SolarWinds Web Help Desk 是一款 IT 服务台套…

影刀RPA实战番外:excel函数应用指南

Excel函数是用于执行特定计算、分析和数据处理任务的预定义公式。它们可处理数学计算、文本处理、逻辑判断、日期和时间运算、查找和引用数据等。例如&#xff0c;SUM函数可以计算一系列数字的总和&#xff0c;IF函数进行逻辑测试&#xff0c;VLOOKUP函数在表格中查找数据&…

HTML之表单设计

1、HTML表单 HTML表单是用于收集用户输入的信息&#xff0c;并将用户输入的内容信息传到后台服务器中。 表单是通过form标签实现。 特别注意&#xff1a;如果一些内容提交后&#xff0c;没有将内容提交给后台服务器&#xff0c;那么需要添加一个name属性&#xff0c;语法&am…

鼠标移入盒子,盒子跟随鼠标移动

demo效果&#xff1a; 鼠标移入盒子&#xff0c;按下鼠标,开启移动跟随移动模式,再次按下关闭移动模式 涉及主要属性 在元素上单击鼠标按钮时输出鼠标指针的坐标&#xff1a; var x event.pageX; // 获取水平坐标 var y event.pageY; // 获取垂直坐标元素offsetL…

JDK-23与JavaFX配置在IDEA中

一、安装 1.IDEA安装&#xff0c;可以查看CSDN 2.JDK,JavaFX安装&#xff0c;可以查看CSDN 二、配置JDK 打开IDEA&#xff0c;选择个项目&#xff0c;点击图中的设置按钮&#xff1a; 点击项目设置&#xff1a; 点击“”添加JDK&#xff0c;寻找相应的JDK目录就行 三、配置…

Python快速入门教程

目录 1. Python 简介 2. 环境准备 3. 第一个 Python 程序 4. 变量与数据类型 5. 基本操作与控制结构 6. 函数与模块 7. 实践项目 结语 Python 是一种非常友好的编程语言&#xff0c;特别适合初学者。它的语法简洁&#xff0c;容易上手&#xff0c;并且广泛应用于各种领…

机器视觉运动控制一体机在DELTA并联机械手视觉上下料应用

市场应用背景 DELTA并联机械手是由三个相同的支链所组成&#xff0c;每个支链包含一个转动关节和一个移动关节&#xff0c;具有结构紧凑、占地面积小、高速高灵活性等特点&#xff0c;可在有限的空间内进行高效的作业&#xff0c;广泛应用于柔性上下料、包装、分拣、装配等需要…