vue3自定义实现悬浮固定按钮组件

目录

  • 一、需求描述
  • 二、代码解读
  • 三、结果展示

一、需求描述

  1. 需要5个固定的悬浮圆,居于页面的右侧。
  2. 鼠标悬浮在圆上面会显示对应的文字提示
  3. 其中包含返回顶部悬浮圆,当页面滑至底部时出现,点击页面滑到顶部。
  4. 点击按钮会给出弹窗

二、代码解读

<template><div class="circle-container"><Tooltip title="返回顶部" placement="left"><div v-show="showTop" class="circle" @click="scrollToTop"><SvgIcon icon-name="icon-fanhuidingbu"></SvgIcon></div></Tooltip><Tooltip title="GitHub" placement="left"><div class="circle" @click="navigateToGitHub"><SvgIcon icon-name="icon-github"></SvgIcon></div></Tooltip><Tooltip title="Gitee" placement="left"><div class="circle" @click="navigateToGitee"><SvgIcon icon-name="icon-gitee"></SvgIcon></div></Tooltip><Tooltip title="反馈" placement="left"><div class="circle" @click="showFeedbackPopup"><SvgIcon icon-name="icon-yijianfankui"></SvgIcon></div></Tooltip><Tooltip title="关于" placement="left"><div class="circle" @click="showAboutPopup"><SvgIcon icon-name="icon-icon-test"></SvgIcon></div></Tooltip><a-modal v-model:visible="feedbackVisible" title="提出反馈"  :footer="null"><a-form :form="form"><a-form-item label="反馈的标题:" name="title"><a-input placeholder="请输入反馈标题" /></a-form-item><a-form-item label="反馈描述:" name="description"><a-textarea placeholder="请输入反馈描述" /></a-form-item></a-form><div class="custom-modal-footer"><a-button type="primary" @click="handleSubmit">提交</a-button></div></a-modal><a-modal v-model:visible="aboutVisible" title="关于" :footer="null" style="width: 350px"><!-- 描述文字 --><p>本平台所有代码均有自己一人开发,如有问题,请扫码联系!</p><!-- 图片展示,通过 props 传递图片链接 --><div class="image-container"><img v-for="(image, index) in images" :src="image" :alt="'Image ' + (index + 1)" :key="index" /></div></a-modal></div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import {Tooltip} from 'ant-design-vue';
import SvgIcon from "@/components/SvgIcon.vue";// props 定义
const props = defineProps(['images']);// 关于弹窗逻辑
const aboutVisible = ref(false);const showAboutPopup = () => {aboutVisible.value = true;
};const feedbackVisible = ref(false);
const form = ref();const showFeedbackPopup = () => {feedbackVisible.value = true;
};const handleSubmit = () => {form.value.validate().then(() => {console.log('提交反馈');feedbackVisible.value = false;});
};const showTop = ref(false);const scrollToTop = () => {// 滚动到顶部的逻辑const scrollToTopDuration = 300;const scrollStep = -window.scrollY / (scrollToTopDuration / 15);const scrollInterval = setInterval(() => {if (window.scrollY !== 0) {window.scrollBy(0, scrollStep);} else {clearInterval(scrollInterval);}}, 15);};const navigateToGitHub = () => {// 跳转到GitHub的逻辑window.location.href = 'https://github.com';};const navigateToGitee = () => {// 跳转到Gitee的逻辑window.location.href = 'https://gitee.com';};const handleScroll = () => {// 根据滚动位置判断是否显示返回顶部按钮showTop.value = window.scrollY > window.innerHeight;};onMounted(() => {// 监听滚动事件,根据滚动位置来显示/隐藏返回顶部按钮window.addEventListener('scroll', handleScroll);});onBeforeUnmount(() => {// 移除滚动事件监听window.removeEventListener('scroll', handleScroll);});</script><style scoped>/* 关于弹窗样式 */
.image-container {display: flex;justify-content: space-between;margin-top: 20px;
}.image-container img {width: 150px; /* 调整图片宽度 */height: auto; /* 保持宽高比 */
}.circle-container {position: fixed;bottom: 80px;right: 50px;display: flex;flex-direction: column;z-index: 999;
}.circle {width: 30px;height: 30px;background-color: #ffffff;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-bottom: 10px;cursor: pointer;transition: background-color 0.3s;
}.circle a-icon {color: #fff;font-size: 20px;
}
.custom-modal-footer {display: flex;justify-content: flex-end;
}
</style>
  1. <template> 部分:

    • <div class="circle-container">:定义了一个包含所有圆形按钮的容器,这些按钮在页面右下角垂直排列。
    • 每个按钮都被包裹在 <Tooltip> 组件内:这是为了在用户悬停在按钮上时显示一个提示文本。
    • v-show="showTop":通过Vue的指令 v-show 根据 showTop 变量的值来控制返回顶部按钮的显示与隐藏。
    • 弹窗部分:使用了 a-modal 组件,分别用于显示用户反馈和关于信息。
  2. <script setup> 部分:

    • import 语句:引入了Vue 3的 refonMountedonBeforeUnmount,以及Ant Design Vue库的 Tooltip 组件和自定义的 SvgIcon 组件。
    • const props = defineProps(['images']);:通过 defineProps 获取父组件传递的 images 属性。
    • 关于弹窗逻辑:aboutVisible 控制关于弹窗的显示与隐藏,showAboutPopup 方法用于显示关于弹窗。
    • 反馈弹窗逻辑:feedbackVisible 控制反馈弹窗的显示与隐藏,showFeedbackPopup 方法用于显示反馈弹窗,handleSubmit 方法处理用户提交的反馈。
    • 返回顶部逻辑:showTop 控制返回顶部按钮的显示与隐藏,scrollToTop 方法用于平滑滚动到页面顶部。
    • 跳转逻辑:navigateToGitHubnavigateToGitee 方法用于在新窗口中打开 GitHub 和 Gitee 的链接。
    • 滚动事件监听:handleScroll 方法用于监听页面滚动事件,根据滚动位置来控制返回顶部按钮的显示与隐藏。
    • 生命周期钩子:onMounted 注册了滚动事件监听器,onBeforeUnmount 移除了滚动事件监听器。
  3. <style scoped> 部分:

    • 关于弹窗样式:通过定义 .image-container 类和其内部的 img 样式,控制关于弹窗中图片的展示方式。
    • 圆形按钮样式:定义了 .circle 类和其内部 a-icon 样式,包括按钮的大小、背景颜色、圆角等。
    • 弹窗底部样式:通过定义 .custom-modal-footer 类,将弹窗中的提交按钮放置在底部右侧。

整个组件结合了Vue 3的响应式数据、生命周期钩子以及Ant Design Vue库提供的组件,实现了一组具有交互性和美观性的圆形按钮,以及与之关联的弹窗功能。

三、结果展示

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

谷歌最强轻量级开源大模型Gemma:小尺寸可商用,性能超越Llama-2,个人PC就能用

前言 谷歌近日发布了其最新的轻量级、开源AI模型——Gemma&#xff0c;这一举措无疑在AI领域引起了广泛的关注。不同于其他闭源大模型&#xff0c;Gemma的推出标志着谷歌在开放模型领域的重要一步&#xff0c;意图通过开放、共享的方式&#xff0c;加速AI技术的普及和应用。 G…

无法访问云服务器上部署的Docker容器(二)

说明&#xff1a;记录一次使用公网IP 接口地址无法访问阿里云服务接口的问题&#xff1b; 描述 最近&#xff0c;我使用Docker部署了jeecg-boot项目&#xff0c;部署过程都没有问题&#xff0c;也没有错误信息。部署完成后&#xff0c;通过下面的地址访问后端Swagger接口文档…

【踩坑】修复报错 you should not try to import numpy from its source directory

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.cn] 报错如下&#xff1a; 修复方法一&#xff1a; pip install pyinstaller5.9 修复方法二&#xff1a; pip install numpy1.24.1

使用vuetify实现全局v-alert消息通知

前排提示&#xff0c;本文为引流文&#xff0c;文章内容不全&#xff0c;更多信息前往&#xff1a;oldmoon.top 查看 简介 使用强大的Vuetify开发前端页面&#xff0c;结果发现官方没有提供简便的全局消息通知组件&#xff08;像Element中的ElMessage那样&#xff09;&#xf…

在SAP HANA中使用OData(二)

通常有两种方式通过OData来暴露SAP HANA中的数据库对象&#xff0c;一是直接使用Database Object&#xff0c;比如前一篇和本篇文章介绍的例子&#xff0c;这种方式针对于数据已经存在于SAP HANA中&#xff0c;在Repository中没有对应的设计时对象(Design-time Object)&#xf…

顺丰科技2024届春季校园招聘常见问题解答及SHL测评题库

顺丰科技2024届春季校园招聘常见问题解答及SHL测评题库 Q&#xff1a;顺丰科技2024届校园招聘面向对象是&#xff1f; A&#xff1a;2024届应届毕业生&#xff0c;毕业时间段为2023年10月1日至2024年9月30日&#xff08;不满足以上毕业时间的同学可以关注顺丰科技社会招聘或…

【深度学习笔记】卷积神经网络——LeNet

卷积神经网络&#xff08;LeNet&#xff09; sec_lenet 通过之前几节&#xff0c;我们学习了构建一个完整卷积神经网络的所需组件。 回想一下&#xff0c;之前我们将softmax回归模型&#xff08; sec_softmax_scratch&#xff09;和多层感知机模型&#xff08; :numref:sec_m…

使用mimikata获取域控权限(无免杀)

一、实验环境 windows 7 ip:192.168.1.3 (域内普通用户&#xff0c;有本地管理员权限&#xff0c;但不知明文密码) windows server 2012 ip:192.168.1.1 &#xff08;DC域控&#xff0c;与server2012管理员密码相同&#xff0c;但不知明文密码&#xff09;二、准备工作 1、使…

一文读懂 Python 值传递和引用传递

文章目录 版本前言形参和实参值传递和引用传递Python 变量存储值语义和引用语义值语义引用语义 探讨 Python 值传递和引用传递不可变&#xff08;immutable&#xff09;类型可变&#xff08;mutable&#xff09;类型案例一案例二 拓展&#xff1a;不可变类型真的不可变&#xf…

基于Java SSM框架实现家庭食谱管理系统项目【项目源码+论文说明】

基于java的SSM框架实现家庭食谱管理系统演示 摘要 本论文主要论述了如何使用JAVA语言开发一个家庭食谱管理系统 &#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论…

大数据可视化的设计规范,全面剖析,很实用。

大数据可视化的设计规范需要考虑到数据量大、复杂度高、数据类型多样等特点。以下是一份常见的大数据可视化设计规范&#xff0c;供您参考&#xff1a; 设计原则 简单易用&#xff1a;保证用户操作简单、直观&#xff0c;降低用户认知负担。数据准确&#xff1a;保证数据准确…

如何保护企业免受人工智能网络钓鱼攻击

文章目录 前言一、生成式人工智能带来了新的网络安全威胁二、人工智能将使网络钓鱼攻击变得更加危险三、企业如何阻止人工智能驱动的网络钓鱼四、网络钓鱼模拟确保责任感和适应性前言 网络钓鱼是网络犯罪分子社会工程武器库中的超级武器。网络钓鱼尤其危险,因为它是网络犯罪分…

力扣经典题目解析--搜索二维矩阵(小米一面)

原题地址: . - 力扣&#xff08;LeetCode&#xff09; 给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c…

一键生成values-sw<N>dp文件夹插件

插件名&#xff1a;SmallestWidth Dimens&#xff0c;可在AS插件中搜索安装 安装插件后&#xff0c;可使用快捷键ALTP或者在Tools|SmallestWidth 启动插件 插件启动后可自主选择要在那个moudel下生成values-sw<N>dp文件夹&#xff0c;默认有一些文件夹&#xff0c;你也…

Day 2.exec函数族和线程的基本概念、相关函数接口

exec函数族 extern char **environ; int execl(const char *path, const char *arg, ... /* (char *) NULL */); int execlp(const char *file, const char *arg, ... /* (char *) NULL */); int execle(const…

无人艇军事应用展望与思考

源自&#xff1a;《远望要报》 作者&#xff1a;赵国安 “人工智能技术与咨询” 发布 一、无人艇作战使用场景 二、军用无人艇的发展趋势 三、军用无人艇的关键技术 四、世界主要国家无人艇发展动态 结束语 声明:公众号转载的文章及图片出于非商业性的教育和科研目的供大家参…

Vue概念详解【目录】

本专栏简介&#xff1a; 这个专栏是关于 Vue2 和 Vue3 各种概念的大集合&#xff01;它深入挖掘原理&#xff0c;分析各种优势和劣势&#xff0c;适配各种应用场景&#xff0c;部分内容还列出了代码示例&#xff0c;以清晰地讲述原理。在这里&#xff0c;你将全面了解 Vue2 和…

集团机构组网

在数字化转型的浪潮中&#xff0c;企业网络需求日益复杂化&#xff0c;尤其是对于大规模的集团机构来说&#xff0c;高效、安全且可靠的网络连接成为了业务发展的关键。传统网络架构已难以满足这些需求&#xff0c;而SD-WAN&#xff08;软件定义广域网&#xff09;技术的崛起&a…

四川易点慧电子商务有限公司抖音小店:可靠的新零售典范

随着电子商务的迅猛发展和社交媒体的广泛普及&#xff0c;越来越多的消费者选择在网上购物。在这个背景下&#xff0c;四川易点慧电子商务有限公司以其独特的商业模式和强大的供应链整合能力&#xff0c;在抖音小店平台上崭露头角&#xff0c;成为了一个值得信赖的购物新选择。…

提高办公效率:Excel在文秘与行政办公中的应用技巧

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 在当今信息化时代&#xff0c;Excel作为一款常…