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.hqwc.cn/news/216136.html

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

相关文章

杰发科技AC7801——ADC软件触发的简单使用

前言 7801资料读起来不是很好理解&#xff0c;大概率是之前MTK的大佬写的。在此以简单的方式进行描述。我们做一个简单的规则组软件触发Demo。因为规则组通道只有一个数据寄存器&#xff0c;因此还需要用上DMA方式搬运数据到内存。 AC7801的ADC简介 7801的ADC是一种 12 位 逐…

【数据库篇】关系模式的表示——(1)问题的提出

1、关系模式的表示 R&#xff1a;表示关系的名字比如&#xff1a;sc选课表&#xff0c;student学生表。 U&#xff1a;表示一个关系模式的所有属性&#xff0c;比如student表&#xff1a;U&#xff08;sno&#xff0c;sname&#xff0c;sage&#xff0c;ssex&#xff09;。 …

<蓝桥杯软件赛>零基础备赛20周--第7周--栈和二叉树

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周&#xff08;读者可以按…

qt实现播放视屏的时候,加载外挂字幕(.srt文件解析)

之前用qt写了一个在windows下播放视频的软件&#xff0c;具体介绍参见qt编写的视频播放器&#xff0c;windows下使用&#xff0c;精致小巧_GreenHandBruce的博客-CSDN博客 后来发现有些视频没有内嵌字幕&#xff0c;需要外挂字幕&#xff0c;这时候&#xff0c;我就想着把加载…

TCP/IP、Http、Socket之间的区别

目录 前言 一、TCP/IP协议 二、HTTP协议 三、Socket通信机制 四、TCP/IP、HTTP和Socket之间的区别 总结 前言 TCP/IP、HTTP和Socket是计算机网络中的三个重要概念&#xff0c;它们之间有着密切的联系和区别。 一、TCP/IP协议 TCP/IP是指传输控制协议/因特网协议&#x…

复亚智能交通无人机:智慧交通解决方案大公开

城市的现代化发展离不开高效的交通管理规划。传统的交通管理系统庞大繁琐&#xff0c;交警在执行任务时存在安全隐患。在这一背景下&#xff0c;复亚智能交通无人机应运而生&#xff0c;成为智慧交通管理中的重要组成部分。交通无人机凭借其高灵活性、低成本、高安全性等特点&a…

【ELK02】ES的重要核心概念和索引常用操作-索引文档管理、文档搜索

一、ELASTICSEARCH核心概念 1.ES中的重要概念 1.1索引(index) 类似于关系型数据中的库-database,一个es的集群中可以有多个索引,每个索引都是一批独立的存储数据,按照一定的数据结构保存,方便查询. 1.2类型(type) 类似于关系型数据库中的表格-table,一个索引中可以有多个类…

springboot 返回problem+json

spring所有配置都在WebMvcAutoConfiguration中 其中有 ProblemDetailsExceptionHandler 容器中的一个组件 -ControllerAdvice用来集中处理异常的 -点进ResponseEntityExceptionHandler 包含这些异常&#xff0c;如果出现以下异常&#xff0c;会被springboot支持以RFC 7807规…

jQuery 第十一章(表单验证插件推荐)

文章目录 前言jValidateZebra FormjQuery.validValValidityValidForm BuilderForm ValidatorProgressionformvalidationjQuery Validation PluginjQuery Validation EnginejQuery ValidateValidarium后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&…

大众博客系统测试报告【改】

一、项目背景 大众博客系统采用前后端分离的方法来实现&#xff0c;同时使用了数据库来存储相关的数据&#xff0c;同时将其部署到云服务器上。前端主要有四个页面构成&#xff1a;登录页、列表页、详情页以及编辑页&#xff0c;以上模拟实现了最简单的大众博客系统。其结合后端…

CPU+GPU多样化算力,ZStack Cloud助力游戏精酿核心业务上云

游戏精酿通过ZStack Cloud云平台提供高性能、高可用的云主机、云存储和云网络&#xff1b;前期通过超融合架构快速构建云基础设施&#xff0c;来支持Jira、Redis等关键业务&#xff1b;并实现对原有私有云平台业务的替代&#xff0c;按需将原有私有云业务滚动迁移到ZStack Clou…

nginx知识梳理及配置详解

软件开发全文档获取&#xff1a;点我获取 nginx安装 #nginx安装 yum -y install gcc pcre-devel openssl-devel #依赖包 useradd -s /sbin/nologin nginx ./configure --prefix/usr/local/nginx #指定安装目录 --usernginx #指定用户 --with-http_ss…