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

news2024/10/6 6:52:25

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

<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 = true
  setTimeout(() => {
  // 移动滚动条
    footerListRef.value.scrollIntoView({ block: "start", behavior: "smooth" });
  }, 50);
};
</script>

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

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

相关文章

计算机组成原理-磁盘存储器

文章目录 总览外存储器磁盘存储器磁盘的性能指标磁盘地址磁盘的工作过程磁盘阵列 总结 总览 外存储器 磁盘存储器 写是利用电流产生磁场从而写磁盘 读是利用载磁体移动时产生的电场从而得到数据 磁性材质易受外界磁场干扰 下图中 载磁体上N S的前后顺序代表对应存储二进制的比…

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

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

HarmonyOS ArkTS 给应用添加动画(十一)

1 概述 属性动画&#xff0c;是最为基础的动画&#xff0c;其功能强大、使用场景多&#xff0c;应用范围较广。常用于如下场景中&#xff1a; 页面布局发生变化。例如添加、删除部分组件元素。页面元素的可见性和位置发生变化。例如显示或者隐藏部分元素&#xff0c;或者将部…

什么是合封芯片工艺,合封芯片工艺工作原理、应用场景、技术要点

芯片封装技术不断进步&#xff0c;其中合封芯片工艺作为一种先进的芯片封装技术&#xff0c;“超”广泛应用于各类电子设备中。 本文将从合封芯片工艺的工作原理、应用场景、技术要点等方面进行深入解读。 一、合封芯片工艺 合封芯片工艺是一种将多个芯片或不同的功能的电子模…

Stable Video Diffusion重磅发布,快来看看哪些功能

本周&#xff0c;有关 OpenAI 宫斗的报道占据了Ai圈版面的主导地位&#xff0c;吃够了奥特曼的大瓜。我们来看看Stability AI刚发布的Stable Video Diffusion&#xff0c;这是一种通过对现有图像进行动画处理来生成视频的 AI 模型。基于 Stability 现有的Stable Diffusion文本到…

HCIA-RS基础:动态路由协议基础

摘要&#xff1a;本文介绍动态路由协议的基本概念&#xff0c;为后续动态路由协议原理课程提供基础和引入。主要讲解常见的动态路由协议、动态路由协议的分类&#xff0c;以及路由协议的功能和自治系统的概念。文章旨在优化标题吸引力&#xff0c;并通过详细的内容夯实读者对动…

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

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

爆款软文写作三大技巧,请查收

好的软文可以吸引目标受众&#xff0c;提升品牌知名度&#xff0c;但对于缺乏软文写作经验的人来说&#xff0c;往往是头快想秃了文案都写不出一句话&#xff0c;今天媒介盒子就来分享&#xff1a;爆款软文写作技巧。 一、 了解受众 做营销不管是线上营销还是线下营销&#x…

深眸科技聚焦AI机器视觉检测,驱动3C电子行业集成创新实现新需求

随着消费的升级及国家政策的助推&#xff0c;国内3C电子市场不断扩大&#xff0c;行业实现高速发展。近年来&#xff0c;3C电子产品持续迭代&#xff0c;生产工艺也逐渐复杂化&#xff0c;相关生产线定位组装、零部件检测、整机产品检测等环节&#xff0c;亟需使用具备较强适应…

HDX读卡器牛羊管理RFID设备品牌

半双工HDX&#xff08;Half Duplex&#xff09;技术是ISO11784/5中规定的另一种标签与读写器之间的通讯方式&#xff0c;与全双工工&#xff08;FDX&#xff09;相比&#xff0c;HDX通常识别能力更强&#xff0c;有更大的识别距离。在HDX读写器的射频场与HDX标签响应期间关闭&a…

友思特分享 | Neuro-T:零代码自动深度学习训练平台

来源&#xff1a;友思特 智能感知 友思特分享 | Neuro-T&#xff1a;零代码自动深度学习训练平台 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; 工业自动化、智能化浪潮涌进&#xff0c;视觉技术在其中扮演了至关重要的角色。在汽车、制造业、医药、芯片、食品等行业…

python正则表达式re.sub()函数解析(替换字符串中的匹配项)

文章目录 Python正则表达式与re.sub()函数解析引言正则表达式基础什么是正则表达式&#xff1f;正则表达式的组成 Python中的re模块re模块概览re模块常用函数 re.sub()函数解析函数原型使用示例简单替换使用函数进行替换 高级替换技术引用分组条件替换 总结 Python正则表达式与…

双11后观察:中国电商产业带的数字新叙事

在电商平台走过的第十五个双11后&#xff0c;产业带的数字化蓝图也更加完整。但在电商平台与产业带相互补足的背景下&#xff0c;一个更值得思考的问题是&#xff0c;随着电商平台的低价竞争愈演愈烈&#xff0c;产业带上的供应链能力能否跟上&#xff1f; 作者|思杭 编辑|皮…

GTC2023全球流量大会蓄势待发,菊风在7B57展位等你!

第六届 GTC 全球流量大会&#xff08;以下简称 GTC2023&#xff09;将于12月5日- 6日&#xff0c;在深圳福田会展中心7&#xff06;8号馆举办。 据悉&#xff0c;本届大会将是历届以来规模最大、参与人数最多、跨境出海资源最丰富的一次行业盛会。7、8 号馆共 15000 平方米&am…

SSM大学生社团信息管理系统-99953,(免费领取源码)计算机毕业设计选题开题+程序定制+论文书写+答辩ppt书写 包售后 全流程

SSM大学生社团信息管理系统APP 摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;高校当然也不能排除在外。大学生社团信息管理系统APP是以实际运用为开发背景&#xff0c…

IDEA回滚代码到指定版本

1. 先建一个分支 2. git日志&#xff0c;我们想要回滚类删除以前的版本恢复这个测试类 3. 右键日志版本&#xff0c;进行reset 4. 这里直接选择hard 5.可以看到已经恢复 6.推送到远程分支 7.这里选择强制推送 如果没有此标&#xff0c;直接git push --force 8. 切换master不影响…

RK3568驱动指南|第七篇-设备树-第68章 ranges属性实验

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…

IDC最新报告,增速减缓+AI增势,阿里云视频云中国市场第一

国际权威数据公司IDC发布 《中国视频云市场跟踪&#xff08;2023 H1&#xff09;》报告 自2018年至今&#xff0c;阿里云持续保持 中国视频云整体市场第一 整体市场占比达24.4% 01 第一之外&#xff0c;低谷之上 近期&#xff0c;国际权威数据公司IDC最新发布了《中国视频…

万宾科技可燃气体监测仪的功能有哪些?

随着城市人口的持续增长和智慧城市不断发展&#xff0c;燃气作为一种重要的能源供应方式&#xff0c;已经广泛地应用于居民生活和工业生产的各个领域。然而燃气泄漏和安全事故的风险也随之增加&#xff0c;对城市的安全和社会的稳定构成了潜在的威胁。我国燃气管道安全事故的频…