Vuetify3:​快捷回到顶部

news2024/12/23 21:03:54

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

<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:

<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

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

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

相关文章

第十节 动态面板实现推动和拉动效果

在原型设计中我们经常会遇到元件使用显示更多或者收起效果&#xff0c;下面以面板元件推动与拉动效果做案件说明。 一、设置原有内容 我这里添加一个表格内容&#xff0c;添加“显示更多”文本超链接 二、设置在更多显示面板内容 添加一个动态面板&#xff0c;设置有内容、无…

Linux运维:MySQL数据库(1)

1.信息与数据&#xff1a; 数据是信息的载体&#xff0c;信息是数据的内涵。数据库就是存储数据的仓库&#xff0c;并长期存储在计算机磁盘中&#xff0c;可由多个用户和应用程序共享的数据集合&#xff0c;就是数据库。 2.数据库中的数据的特点&#xff1a; 2.1.数据是按照某…

【Docker】创建 swarm 集群

目录 1. 更改防火墙设置 2. 安装 Docker 组件 3. 启动 Docker 服务&#xff0c;并检查服务状态。 4. 修改配置文件&#xff0c;监听同一端口号。 5. 下载 Swarm 组件 6. 创建集群&#xff0c;加入节点 7. 启动集群 8. 查询集群节点信息 9. 查询集群具体信息 10. 查询…

vscode 安装Vue插件

打开扩展面板 --> 点击左侧的扩展图标&#xff0c;或者按下快捷键 Ctrl Shift X 搜索插件,在搜索框中输入 Vue vue-helper 用来快捷提示&#xff0c;如果使用elementui的话&#xff0c;插件不会自动提示&#xff0c;安装了它&#xff0c;组件、属性都会有提示了 Vetur V…

live555的核心数据结构值之闭环双向链表

live555是采用单进程,单线程的服务器,能够同时支持多个客户端连接,并且有条不紊的进行媒体流的调度,很大一部分原因在于对数据结构的巧妙应用。 下面介绍live555核心的数据结构:闭环双向链表 什么是闭环双向链表? 描述: 一个节点保存有前一个节点的地址和后一个节点的…

Spring自带的持久层模板类:JdbcTemplate+Spring框架声明式事务管理实战

模板技术 Spring框架中提供了很多模板类来简化编程&#xff0c;使用模板类编写程序会变的简单 持久层模板JdbcTemplate JdbcTemplate是什么 JDBCTemplate是Spring Framework中的一个核心类&#xff0c;用于简化JDBC&#xff08;Java数据库连接&#xff09;代码的编写。它提供…

4A的「A」会变成AI的「A」吗?

戛纳国际创意节上&#xff0c;广告集团WPP的全球CEO Mark Read 和英国CEO Karen Blackett 解释了WPP如何应对AIGC所带来的「威胁」。同时&#xff0c;Mark Read 与Elon Musk对话&#xff0c;讨论「技术创新的变革力量&#xff0c;人工智能如何重塑创造力、商业和社会&#xff0…

基于uni-app与图鸟UI的移动应用模板构建研究

摘要 随着移动互联网技术的迅猛发展&#xff0c;移动端应用已成为企业展示形象、提供服务的重要窗口。本文基于uni-app框架和图鸟UI设计&#xff0c;深入探讨了如何高效构建覆盖多个领域的移动端应用模板。通过对商城、办公、投票、生活服务等多种类型模板的详细介绍&#xff…

使用uniapp.pageScrollTo方法进行页面滚动

先看看是不是你想要的&#xff1a; 需求&#xff1a; 有个填写数据的单子在提交的时候&#xff0c;会对必填项做校验&#xff0c;如果必填项没有数据的话&#xff0c;必填项校验生效给出提示&#xff0c;并且页面滚动到第一个需要填写数据的地方。 开发&#xff1a; 因为这个…

Ubuntu无法安全地用该源进行更新,所以默认禁用该源。

解决方案 1. 获取并添加缺失的 GPG 公钥 可以使用 apt-key 命令来添加缺失的公钥。根据错误信息&#xff0c;缺失的公钥是 3B4FE6ACC0B21F32。 sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 3B4FE6ACC0B21F322. 更新软件包列表 添加公钥后&#xff0c;更…

[Go Web] Kratos 验证码业务

文章目录 1.环境准备2.验证码服务2.1 kratos 初始化验证码服务项目2.2 使用 Protobuf 定义验证码生成接口2.3 业务逻辑代码实现 1.环境准备 protoc和protoc-gen-go插件安装和kratos工具安装 protoc下载 下载二进制文件&#xff1a;https://github.com/protocolbuffers/protobu…

智能体实战:开发一个集成国内AI平台的GPTs,自媒体高效智能助手

文章目录 一&#xff0c;什么是GPTs二&#xff0c;开发GPTs1&#xff0c;目标2&#xff0c;开发2.1 打开 GPTS&#xff1a;https://chat.openai.com/gpts2.2 点击 Create 创建一个自己的智能体 2.3 配置GPTs2.4 配置外挂工具2.4.1 配置Authentication-授权2.4.1.1 生成语聚AI的…

kafka consumer客户端消费逻辑解析

kafka consumer客户端消费逻辑解析 一、主要消费步骤二、提交策略【步骤2代码解析】【提交策略总结】 三、拉取策略&#xff08;待补充&#xff09;四、消费策略【代码解析】【消费策略总结】 一、主要消费步骤 这是kafka客户端拉取消息的入口&#xff0c;有4个主要部分 1、启…

UEFA EURO 2024 GERMANY

UEFA EURO 2024 GERMANY 画个流程图&#xff0c;哈哈

openlayer 鼠标点击船舶,打开船舶简单弹框

背景&#xff1a; 对创建的地图对象&#xff0c;可以添加上监听事件&#xff0c;常用的有&#xff1a;地图点击事件、鼠标移动事件。 通过监听这些事件&#xff0c;又可以区分不同图层的不同要素&#xff0c;获取不同数据&#xff1b; 根据这些数据&#xff0c;又可以发起网络请…

快速阅读参考文献:kimi请求出战!

学境思源&#xff0c;一键生成论文初稿&#xff1a; AcademicIdeas - 学境思源AI论文写作 上篇文章&#xff0c;我们为大家演示了“如何使用kimi创建论文中的流程图”。今天继续为大家介绍“使用kimi快速阅读学术参考文献”。 在学术研究的海洋中&#xff0c;文献阅读是一项基…

码农:如何快速融入团队

问题&#xff1a; 码农如何快速融入团队&#xff1f; 记住一个标准&#xff1a;能干事、能抗事。 总结一个字&#xff1a; 靠谱。 适用范围&#xff1a;新手码农、老司机码农、测试、DBA、运维、产品经理、项目经理、架构师、技术专家、。。。。适用于任何行业的打工者。 下面要…

2、逻辑回归

1. 为什么要叫逻辑回归? 逻辑回归模型的名称可能会引起一些混淆,因为它名字中包含了"回归"这个词,但实际上它是一种用于解决分类问题的模型,而不是回归问题。 逻辑回归最初是从线性回归模型演变而来的。线性回归用于预测连续的数值输出,逻辑回归则是在线性回归…

Java-记一次Springboot版本升级导致的问题

前言 根据相关情况&#xff0c;需要将SpringBoot的版本由原来的2.1.8.RELEASE版本升级至2.3.8.RELEASE。 启动项目后报错&#xff1a; 具体报错信息如下&#xff1a; Description: An attempt was made to call a method that does not exist. The attempt was made from the…

uni-app picker多列选项

预期实现的效果&#xff1a; 选中后的效果&#xff1a; // Dom部分 <template><picker mode"multiSelector" :range"ssqRange" range-key"name" columnchange"ssqColumnChange" change"ssqChange" class"p…