当前位置: 首页 > news >正文

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.lryc.cn/news/242492.html

相关文章:

  • 外部 prometheus监控k8s集群资源(pod、CPU、service、namespace、deployment等)
  • LLMLingua:集成LlamaIndex,对提示进行压缩,提供大语言模型的高效推理
  • 数据资产确权的难点
  • EMG肌肉电信号处理合集(二)
  • 2023亚马逊云科技re:Invent引领科技新潮流:云计算与生成式AI共塑未来
  • 案例018:基于微信小程序的实习记录系统
  • 视频剪辑技巧:如何高效批量转码MP4视频为MOV格式
  • node.js获取unsplash图片
  • Git远程库操作(GitHub)
  • java计算下一个整10分钟时间点
  • 力扣刷题篇之排序算法
  • 一键填充字幕——Arctime pro
  • 间隔分区表(DM8:达梦数据库)
  • 基于C#实现并查集
  • opencv-图像轮廓
  • 小黑子—Maven高级
  • 一个正整数转为2进制和8进制,1的个数相同的第23个数是什么?
  • Unity阻止射线穿透UI的方法之一
  • HarmonyOS开发:ArkTs常见数据类型
  • Unsupervised MVS论文笔记
  • Matplotlib图形注释_Python数据分析与可视化
  • 如何把A3 pdf 文章打印成A4
  • 【Vue】vue指令
  • 记录华为云服务器(Linux 可视化 宝塔面板)-- 安全组篇
  • 基于Python 中创建 Sentinel-2 RGB 合成图像
  • 保姆级连接FusionInsight MRS kerberos Hive
  • electerm 跨平台的终端 /ssh/sftp 客户端
  • Anthropic LLM论文阅读笔记
  • docker启动容器失败,然后查看日志,docker logs查看容器出现报错:
  • 【开源】基于Vue.js的网上药店系统