vue3自定义实现悬浮固定按钮组件 |
您所在的位置：网站首页 › 华为nova2s怎么设置悬浮按钮功能图标 › vue3自定义实现悬浮固定按钮组件 |
vue3自定义实现悬浮固定按钮组件
|
目录
一、需求描述二、代码解读三、结果展示
一、需求描述
需要5个固定的悬浮圆，居于页面的右侧。鼠标悬浮在圆上面会显示对应的文字提示其中包含返回顶部悬浮圆，当页面滑至底部时出现，点击页面滑到顶部。点击按钮会给出弹窗
二、代码解读
提交
本平台所有代码均有自己一人开发，如有问题，请扫码联系！
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);
});
/* 关于弹窗样式 */
.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;
}
部分： ：定义了一个包含所有圆形按钮的容器，这些按钮在页面右下角垂直排列。每个按钮都被包裹在 组件内：这是为了在用户悬停在按钮上时显示一个提示文本。v-show="showTop"：通过Vue的指令 v-show 根据 showTop 变量的值来控制返回顶部按钮的显示与隐藏。弹窗部分：使用了 a-modal 组件，分别用于显示用户反馈和关于信息。部分： import 语句：引入了Vue 3的 ref、onMounted、onBeforeUnmount，以及Ant Design Vue库的 Tooltip 组件和自定义的 SvgIcon 组件。const props = defineProps(['images']);：通过 defineProps 获取父组件传递的 images 属性。关于弹窗逻辑：aboutVisible 控制关于弹窗的显示与隐藏，showAboutPopup 方法用于显示关于弹窗。反馈弹窗逻辑：feedbackVisible 控制反馈弹窗的显示与隐藏，showFeedbackPopup 方法用于显示反馈弹窗，handleSubmit 方法处理用户提交的反馈。返回顶部逻辑：showTop 控制返回顶部按钮的显示与隐藏，scrollToTop 方法用于平滑滚动到页面顶部。跳转逻辑：navigateToGitHub 和 navigateToGitee 方法用于在新窗口中打开 GitHub 和 Gitee 的链接。滚动事件监听：handleScroll 方法用于监听页面滚动事件，根据滚动位置来控制返回顶部按钮的显示与隐藏。生命周期钩子：onMounted 注册了滚动事件监听器，onBeforeUnmount 移除了滚动事件监听器。部分： 关于弹窗样式：通过定义 .image-container 类和其内部的 img 样式，控制关于弹窗中图片的展示方式。圆形按钮样式：定义了 .circle 类和其内部 a-icon 样式，包括按钮的大小、背景颜色、圆角等。弹窗底部样式：通过定义 .custom-modal-footer 类，将弹窗中的提交按钮放置在底部右侧。整个组件结合了Vue 3的响应式数据、生命周期钩子以及Ant Design Vue库提供的组件，实现了一组具有交互性和美观性的圆形按钮，以及与之关联的弹窗功能。 三、结果展示
|
【本文地址】
今日新闻 |
推荐新闻 |