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,一经查实,立即删除!

相关文章

vue打包优化

vue.config.js文件中 module.exports defineConfig({ productionSourceMap: false,//去掉mapjs文件 });

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

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

<HarmonyOS第一课>1·运行Hello World【课后考核】

【习题】运行Hello World工程 判断题 1.DevEco Studio是开发HarmonyOS应用的一站式集成开发环境。 正确(True) 2.main_pages.json存放页面page路径配置信息。 正确(True) 单选题 1.在stage模型中&#xff0c;下列配置文件属于AppScope文件夹的是&#xff1f;&#xff08;…

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是服务名称。…

高斯DB数据库添加字段并添加字段注释

个人网站 公众号小肖学数据分析 可以使用以下SQL语句向高斯DB数据库添加字段并添加字段注释&#xff1a; ALTER TABLE 表名 ADD COLUMN 列名 数据类型 COMMENT 字段注释; "表名"替换为要添加字段的表名&#xff0c;"列名"替换为要添加的字段名&#xf…

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

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

Linux系统常用的组合命令

1. 管道&#xff08;|&#xff09;&#xff1a;将一个命令的输出传递给另一个命令作为输入。例如&#xff1a; command1 | command2 在这个命令中&#xff0c;command1 的输出会作为 command2 的输入,直接将一个命令的输出传递给另一个命令进行处理. 你可以使用 grep 来查找关…

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屏的断电…

ubuntu挂载磁盘,以及开机自动挂载磁盘

1. 挂载临时磁盘&#xff08;关机自动取消挂载&#xff09; 在Ubuntu上挂载磁盘涉及到几个步骤&#xff0c;其中包括查看可用磁盘、创建挂载点、编辑 /etc/fstab 文件以确保在系统启动时自动挂载等。以下是一般的步骤&#xff1a; **查看可用磁盘和分区&#xff1a;**可以使用…