展开后自动滚动到内容区域

2025专业AI写手!

于 2024-02-28 15:14:37 发布

阅读量403

点赞数 10

CC 4.0 BY-SA版权

分类专栏： Vue 3.0 文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/AIB_Kasic/article/details/136347007

Vue 3.0 专栏收录该内容

101 篇文章

订阅专栏

本文介绍了如何在使用Vue3、TypeScript和TailwindCSS开发中，实现一个可以根据条件动态显示或隐藏的内容区域，并通过`scrollIntoView`方法实现平滑滚动。关键代码展示了如何利用`ref`和`nextTick`管理元素的显示与滚动行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

界面

在这里插入图片描述
展开后自动滚动，如图：

技术

vue3 + ts + tailwindcss

代码

 <div v-if="form.extraProperties?.showConfirm"  ref="confirmRef">
                  内容区域
</div>

// 切换展示/收起函数
const confirmRef = ref()
function changeConfirm(e) {
  if (e) {
    nextTick(() => {
      confirmRef.value.scrollIntoView({ behavior: 'smooth', block: 'start' 	     })
    })
  }
}