介绍
本文档主要用于描述 ShadcnBackTop 组件的一些特性和使用方法。
用法
查看代码
vue
<template>
<div class="p-8">
<div v-for="n in 20" :key="n" class="mb-8 p-4 bg-gray-100 rounded">
<h2 class="text-xl font-bold mb-2">Section {{ n }}</h2>
<p>This is test content。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<ShadcnBackTop :dark="darkMode"/>
</div>
</template>容器内滚动 (target)
通过设置 target 属性，可以指定滚动容器，实现在容器内的返回顶部功能。
查看代码
vue
<template>
<div id="my-container" class="relative h-96 overflow-y-auto rounded-lg border bg-gray-50">
<div class="p-8">
<div v-for="n in 20" :key="n" class="mb-8 p-4 rounded bg-white">
<h2 class="text-xl font-bold mb-2 text-gray-900">Section {{ n }}</h2>
<p class="text-gray-700">这是测试内容。向下滚动查看返回顶部按钮。</p>
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<ShadcnBackTop target="#my-container" />
</template>液态玻璃效果 (glass)
液态玻璃效果通过半透明背景和背景模糊创建现代化的视觉效果，在彩色背景上表现最佳。
查看代码
vue
<template>
<div id="glass-container" class="relative h-96 overflow-y-auto rounded-lg border bg-gradient-to-b from-indigo-400 to-purple-400">
<div class="p-8">
<div v-for="n in 20" :key="n" class="mb-8 p-4 rounded bg-white/50">
<h2 class="text-xl font-bold mb-2 text-gray-900">Section {{ n }}</h2>
<p class="text-gray-700">这是测试内容。向下滚动查看液态玻璃效果的返回顶部按钮。</p>
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<ShadcnBackTop target="#glass-container" glass />
</template>