Vue3 设置点击后滚动条移动到固定的位置

需求:
点击不通过按钮,显示红框中表单,且滚动条滚动到底部 (显示红框中表单默认不显示)
在这里插入图片描述

<el-button @click="onApprovalPass">不通过</el-button>
<div class="item" v-if="approvalPassShow">红框中表单内容缩减版
</div>
<div  ref="footerListRef"><el-button type="primary" >提交</el-button>//滚动条移动到这个位置
</div>
<script setup>
const approvalPassShow = ref(false)
const footerListRef = ref(null);
const onApprovalPass = () => {approvalPassShow.value = truesetTimeout(() => {// 移动滚动条footerListRef.value.scrollIntoView({ block: "start", behavior: "smooth" });}, 50);
};
</script>

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

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

相关文章

pwn:[SWPUCTF 2021 新生赛]nc签到

题目 linux环境下显示为 配合题目的下载附件&#xff0c;发现过滤了一些&#xff0c;一旦输入这些会自动关闭程序 ls被过滤了&#xff0c;可以使用l\s cat和空格都被过滤了&#xff0c;cat可以换成c\at ,空格可以换成$IFS$9

Youtube0播放?运营教你需要的技巧、策略与工具!

对于有跨境意向的内容创作者或者品牌企业来说&#xff0c;YouTube是因其巨大的潜在受众群和商业价值成为最值得投入变现与营销计划的平台。 据统计&#xff0c;98% 的美国人每月访问 YouTube&#xff0c;近三分之二的人每天访问。但是&#xff0c;YouTube还远未达到过度饱和的…

酵母双杂交服务专题(一)

酵母双杂交系统是一种在酵母这种真核生物模型中执行的实验方法&#xff0c;用于探索活细胞内部蛋白质间的相互作用。这种技术能够敏感地捕捉蛋白质间的细微和短暂相互作用&#xff0c;通过检测报告基因的表达产物来实现。作为一种高度灵敏的技术&#xff0c;酵母双杂交系统被广…

Spring Cloud LoadBalancer 简单介绍与实战

前言 本文为SpringCloud的学习笔记&#xff0c;如有错误&#xff0c;希望各位高手能指出&#xff0c;主要介绍SpringCloudLoadBalancer的基本概念和实战 文章目录 前言什么是LoadBalancer负载均衡分类服务端负载均衡客户端负载均衡服务端负载均衡和客户端负载均衡的优缺点 常见…

评测|PolarDB MySQL 版 Serverless

评测&#xff5c;PolarDB MySQL 版 Serverless 目录 一、测试背景 1.1、云原生数据库 PolarDB Serverless新架构概念 1.2、Serverless资源弹性扩缩触发条件 二、PolarDB的Serverless能力与同类型产品进行对比 三、动态弹性升降资源的能力测试 3.1、测试资源 3.2、测试一…

ubuntu22.04在线安装redis,可选择版本

安装脚本7.0.5版本 在线安装脚本&#xff0c;默认版本号是7.0.5&#xff0c;可以根据需要选择需要的版本进行下载编译安装 sudo apt-get install gcc -y sudo apt-get install pkg-config -y sudo apt-get install build-essential -y#安装redis rm -rf ./tmp.log systemctl …

freeRTOS下载链接(sourceForge)

FreeRTOS Real Time Kernel (RTOS) download | SourceForge.net 文件名&#xff1a;FreeRTOSv202212.00.exe 双击后会自动变成这个样子的&#xff1a; 文件夹大小&#xff1a;506M 可以看到跟那个教程里面的文件结构是一模一样的&#xff0c;所以很可能是同一个最新版本的文件…

Linux(Centos)上使用crontab实现定时任务(定时执行脚本)

场景 Windows中通过bat定时执行命令和mysqldump实现数据库备份&#xff1a; Windows中通过bat定时执行命令和mysqldump实现数据库备份_mysqldump bat-CSDN博客 上面讲windows中使用bat实现定时任务的方式&#xff0c;如果是在linux上可以通过crontab实现。 cron是服务名称。…

怎样提升伦敦银买卖技巧?

如果投资者想提升伦敦银的买卖技巧&#xff0c;可以学习一些有用的技术分析方法。所谓技术分析&#xff0c;就是通过对行情过往价格和相关交易数据进行收集&#xff0c;用图表的方式解读白银市场&#xff0c;进而预测行情未来主线走势、判断价格细节变化、寻找重要支撑点阻力点…

TikTok Shop 与英国皇家邮政合作:为卖家提供“Click and Drop”服务

11 月 21 日&#xff0c;TikTok Shop 宣布与皇家邮政 建立新的合作伙伴关系 &#xff0c;为平台上的商家推出 Click & Drop。此次合作将使各种规模的商家能够通过将皇家邮政的 Click & Drop 与其 TikTok Shop 帐户集成来改善其履行体验并更有效地发出订单&#xff0c;…

科普:多领域分布式协同仿真

分布式协同仿真是一种在分布式计算环境中进行协同工作的仿真方法。使用该方法进行协同仿真时&#xff0c;仿真任务将被分发到多个计算节点上&#xff0c;并且这些节点可以同时工作以模拟完整的系统行为。分布式协同仿真已被广泛应用于工程、科学和军事领域&#xff0c;以便更好…

医保线上购药系统:代码驱动的医疗创新

医保线上购药系统&#xff0c;这是一个融合技术和医疗的创新典范。本文将通过简单的技术代码示例&#xff0c;为您揭示这一系统是如何通过技术驱动医疗创新&#xff0c;为用户提供更智能、便捷的健康管理体验的。 1. 前端界面开发 使用React框架&#xff0c;我们可以轻松构建…

深度探究数据要素市场,企业为什么要参与数据资产化建设

我国正在发展数字经济&#xff0c;培育数字要素市场&#xff0c;推进数据市场化。在十四五数字经济发展规划中就已经将数据要素列为数字经济深化发展的核心引擎。今天和大家分享关于数据要素的前世今生&#xff0c;您将了解以下知识点&#xff1a; 1.什么是数据要素&#xff1f…

可视化工作流管理流程及工具

Leangoo领歌是一款永久免费的专业的敏捷开发管理工具&#xff0c;提供端到端敏捷研发管理解决方案&#xff0c;涵盖敏捷需求管理、任务协同、进展跟踪、统计度量等。 Leangoo领歌上手快、实施成本低&#xff0c;可帮助企业快速落地敏捷&#xff0c;提质增效、缩短周期、加速创新…

广告屏LED屏断电检测远程控制开关方案应用钡铼技术S270

广告屏LED屏断电检测&#xff1a; 广告屏和LED屏在商业和公共场所的广泛应用中扮演着重要角色&#xff0c;但由于断电问题可能导致广告屏无法正常显示&#xff0c;进而影响广告宣传效果和客户体验。而S270作为一种高效稳定的远程控制开关&#xff0c;可以实现广告屏LED屏的断电…

Git 与 Maven:企业级版本管理与版本控制规范设计

一、背景 当今&#xff0c;许多开发人员熟悉 GitFlow 工作流程&#xff0c;但往往忽略了 GitFlow 如何与 Maven 版本控制结合&#xff0c;尤其是在管理 snapshot 和 release 版本时的最佳实践。本文旨在整合 GitFlow 工作流程与 Maven 版本管理&#xff0c;提出一个统一的企业…

案例012:Java+SSM+uniapp基于微信小程序的科创微应用平台设计与实现

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

虾皮知虾数据分析软件:优化您的电商经营

在当今竞争激烈的电商市场&#xff0c;了解市场动态、分析竞争对手和产品趋势是成功经营的关键。虾皮知虾数据分析软件是一款强大的工具&#xff0c;为电商卖家提供了全面的数据采集和分析功能。本文将介绍虾皮知虾数据分析软件的特点和功能&#xff0c;以及如何利用它来优化您…

读懂毛京波的营销,也就读懂了路特斯的提速转变

“尽管我们交付还不到一年时间&#xff0c;但是今天Emeya一发布&#xff0c;我们的三车主又诞生了&#xff0c;他有Emira、Eletre&#xff0c;马上又定了Emeya&#xff0c;说明他对路特斯还是非常认可的&#xff0c;”路特斯集团CEO冯擎峰欣喜地说道&#xff0c;一个产品能不能…

基于51单片机电子钟闹钟LCD1602显示proteus仿真设计

基于51单片机的LCD1602电子钟闹钟proteus仿真设计 基于51单片机的LCD1602电子钟闹钟proteus仿真设计功能介绍&#xff1a;仿真图&#xff1a;原理图&#xff1a;设计报告&#xff1a;程序&#xff1a;器件清单&#xff1a;资料清单&&下载链接&#xff1a; 基于51单片机…