Vuetify3:快捷回到顶部

在Vuetify 3中,要实现回到顶部,我们需要创建悬浮按钮,如下:

TypeScript 复制代码
<template>
    <v-list>
        <div class="position-fixed right-0 bottom-0" style="top:50%;">
            <v-list-item >
                <v-btn icon="mdi-information">
                     <v-icon>mdi-arrow-up-bold</v-icon>
                </v-btn>
            </v-list-item>
        </div>
    </v-list>
</template>

添加气泡提醒,及回到顶部JS:

TypeScript 复制代码
<template>
    <v-list>
        <div class="position-fixed right-0 bottom-0" style="top:50%;">
            <v-list-item >
                <v-btn icon="mdi-information" @click="toTop">
                    <v-tooltip activator="parent" location="start">回到顶部</v-tooltip>
                    <v-icon>mdi-arrow-up-bold</v-icon>
                </v-btn>
            </v-list-item>
        </div>
    </v-list>
</template>

<script setup>
    const scrollTop= 0;
    const toTop = () => {
        window.scrollTo({
            top: 0, behavior: 'smooth'
        });
    }
</script>

最终效果:

这个按钮样式,可以根据产品需求来设计,可以参考Button 按钮 --- Vuetify

相关推荐
sunbyte2 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊3 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林3 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君5 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库5 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端5 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED5 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪6 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程6 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常6 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程