当前位置： 首页 > news >正文

【vue】在页面右下角添加悬浮按钮组件

news 来源：原创 2025/6/9 14:21:52

效果图：

如上图所示，需要在页面的左下角添加一个悬浮按钮，鼠标放上去时候展示更多详细按钮，点击触发相应方法。

<div class="floating-component"><!-- 悬浮内容 --><el-tooltip placement="left" effect="light" popper-class="too"><div slot="content"><el-button icon="el-icon-s-comment" class="butto" @click="handleQuestion">问题反馈 </el-button><br/><el-button icon="el-icon-question" class="butto" @click="handleHelp">帮助手册 </el-button></div><el-button icon="el-icon-menu" circle class="but"></el-button></el-tooltip>
</div><style scoped>
.floating-component {position: fixed; /* 固定位置 */bottom: 5%; /* 下边距 */right: 1%; /* 右边距 */padding: 0;border-radius: 50%; /* 圆角 */z-index: 10000; /* 设置 z-index 确保悬浮在顶层 */
}
.but {font-size: larger;color: rgb(0,119,216);box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2); /* 阴影 */
}
.butto {border: 0;padding: 10px;margin: 0;
}
</style><style>
.too.el-tooltip__popper.is-light {border: none !important;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);padding: 5px
}
/* 修改箭头边框 这里方位是left，所以 x-placement^="left" 并且是设置 border-right-color 的颜色*/
.too.el-tooltip__popper.is-light[x-placement^="left"] .popper__arrow {border-left-color: #eaeaea !important;
}
.too.el-tooltip__popper[x-placement^="left"] .popper__arrow {border-left-color: #eaeaea !important;
}
</style>

如果需要在所有页面上层展示，在vue项目的顶层路由文件中添加即可。

相关文章：

【vue】在页面右下角添加悬浮按钮组件

效果图&#xff1a; 如上图所示&#xff0c;需要在页面的左下角添加一个悬浮按钮&#xff0c;鼠标放上去时候展示更多详细按钮&#xff0c;点击触发相应方法。 <div class"floating-component"><!-- 悬浮内容 --><el-tooltip placement"left&qu…...

编程日记 2025/5/31 20:20:47

MyBatis-Plus中isNull与SQL语法详解：处理空值的正确姿势

目录 前言1. 探讨2. 基本知识3. 总结 前言 &#x1f91f; 找工作&#xff0c;来万码优才&#xff1a;&#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 基本的Java知识推荐阅读&#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&#x…...

编程日记 2025/5/27 22:51:09

C语言(指针练习2)

编写函数,要求用指针做形参&#xff0c;分别实现以下功能&#xff1a; &#xff08;1&#xff09;求一个字符串长度 &#xff08;2&#xff09;在一个字符 串中统计大写字母的个数 &#xff08;3&#xff09;在一个字符串中统计数字字符的个数 #include <stdio.h>int str…...

编程日记 2025/6/2 12:15:38

ES6学习Symbol（五）

这里写目录标题 一、概述二、代码 一、概述 ES6引入了一种新的原始数据类型Symbol&#xff0c;表示独一无二的值。 它是 JavaScript 语言的第七种数据类型&#xff0c;前六种是&#xff1a; undefined 、 null 、布尔值&#xff08;Boolean&#xff09;、字符串&#xff08;St…...

编程日记 2025/6/3 21:27:34

简易分页制作

简易分页功能实现 分页是一种常见的前端功能&#xff0c;特别是在需要展示大量数据时。它通过将数据分割成多个页面&#xff0c;帮助用户更容易浏览并提高页面加载性能。本文将介绍一个简易分页的实现思路及其代码实现&#xff0c;旨在帮助开发者快速理解并实现分页功能。 功…...

编程日记 2025/6/3 0:54:28

概率论得学习和整理27：关于离散的数组 随机变量数组的均值，方差的求法3种公式，思考和细节。

目录 1 例子1&#xff1a;最典型的&#xff0c;最简单的数组的均值&#xff0c;方差的求法 2 例子1的问题&#xff1a;例子1只是1个特例&#xff0c;而不是普遍情况。 2.1 例子1各种默认假设&#xff0c;导致了求均值和方差的特殊性&#xff0c;特别简单。 2.2 我觉得 加权…...

编程日记 2025/6/4 17:58:04

arXiv-2024 | NavAgent：基于多尺度城市街道视图融合的无人机视觉语言导航

作者&#xff1a;Youzhi Liu, Fanglong Yao*, Yuanchang Yue, Guangluan Xu, Xian Sun, Kun Fu 单位&#xff1a;中国科学院大学电子电气与通信工程学院&#xff0c;中国科学院空天信息创新研究院网络信息系统技术重点实验室 原文链接&#xff1a;NavAgent: Multi-scale Urba…...

编程日记 2025/5/31 8:18:57

WPF 布局控件

wpf 布局控件有很多&#xff0c;常用的有&#xff1a;Grid, UniformGrid, Border, StackPanel, WrapPanel, DockPanel。 1. Grid Grid 经常作为控件的 Content 使用&#xff0c;常作为 Windows, UserControl 等 UI 元素的根节点。它用来展示一个 n 行 n 列的排版。 因此就有…...

编程日记 2025/6/2 5:38:03

在Mac电脑上安装adb环境

当你在命令行输入 adb version 或adb devices, 报错&#xff1a;zsh: command not found: adb &#xff0c;那么说明你的 Mac 上没有安装 ADB&#xff08;Android Debug Bridge&#xff09;&#xff0c;或者它没有添加到你的路径中。你可以按照以下步骤安装和配置 ADB&#xff…...

编程日记 2025/5/31 18:48:04

方正畅享全媒体新闻采编系统 reportCenter.do SQL注入漏洞复现

0x01 产品简介 方正畅享全媒体新闻生产系统是以内容资产为核心的智能化融合媒体业务平台，融合了报、网、端、微、自媒体分发平台等全渠道内容。该平台由协调指挥调度、数据资源聚合、融合生产、全渠道发布、智能传播分析、融合考核等多个平台组成，贯穿新闻生产策、采、编、发…...

编程日记 2025/6/2 2:57:47

Linux SHELL脚本中的常用命令

一.设置主机名称 1.文件的方式 [rootlocalhost 桌面]# vim /etc/hostname [rootlocalhost 桌面]# cat /etc/hostname shell.aaa.org 修改完毕文件后在当前的shell中是不生效的 如果需要看到效果&#xff0c;关闭当前shell后重新开启新的shell 2.通过命令更改主机名 [rootl…...

编程日记 2025/5/29 0:27:46

Go语言启动独立进程

文章目录 问题解决方案1. **将 npc.exe 启动为独立的进程**2. **修改 exec.Command 函数**示例代码解释为什么这样有效注意 问题 在你当前的代码中&#xff0c;调用 exec.Command("XXX.exe") 启动 XXX.exe 程序时&#xff0c;这个程序是由 Go 程序直接启动的。如果 …...

编程日记 2025/6/3 20:42:29

STM32中ADC模数转换器

一、ADC简介 ADC模拟-数字转换器 ADC可以将引脚连续变化的模拟电压转换为内存中存储的数字变量&#xff0c;建立模拟电路到数字电路的桥梁 12位逐次逼近型ADC&#xff0c;1us转换时间 输入电压范围&#xff1a; 0~3.3V&#xff0c;转换结果范围&#xff1a;0~4095 18个输入…...

编程日记 2025/6/1 0:29:53

为什么要用单例模式？

‌单例模式是一种创建型设计模式&#xff0c;用于确保某个类只有一个实例&#xff0c;并提供一个全局访问点&#xff0c;使得其他类可以轻松访问该实例‌。 使用单例模式的主要原因包括以下几点&#xff1a;‌ ‌确保唯一性‌&#xff1a;在某些情况下&#xff0c;我们需要确…...

编程日记 2025/5/31 10:53:52

线性表查找：Python 实现与性能分析

引言 在数据处理领域&#xff0c;查找操作是一项基础且关键的任务。线性表作为一种常见的数据结构&#xff0c;其查找算法的效率直接影响程序的性能。本文将深入探讨线性表查找的原理、Python 实现以及性能分析&#xff0c;为你揭示如何在 Python 中高效地进行线性表查找。 一…...

编程日记 2025/6/1 18:34:57

QT3学习之进阶理解信号和槽：如何自定义一个类信号，供其它类调用槽函数

下面是QWidget源码&#xff0c;定义了两个事件 /*!This event handler can be reimplemented in a subclass to receivewidget enter events.An event is sent to the widget when the mouse cursor enters thewidget.\sa leaveEvent(), mouseMoveEvent(), event() */void QWi…...

编程日记 2025/6/3 13:31:18

（Image Signal Processor）ISP简介

文章目录 ISP功能简介ISP的主要功能ISP的主要模块1. **黑电平校正&#xff08;Black Level Correction, BLC&#xff09;**2. **噪声去除&#xff08;Denoise&#xff09;**3. **色彩校正&#xff08;Color Correction Matrix, CCM&#xff09;**4. **自动曝光&#xff08;Auto…...

编程日记 2025/5/29 6:07:49

upload-labs靶场保姆级攻略

第一关&#xff1a;删除前端js校验 写一个一句话木马&#xff0c;命名为1.php 一句话木马 浏览上传 我们发现不可以上传&#xff0c;右键检查&#xff0c;依次点击 找到return checkFile()删掉&#xff0c;再上传 去看一下是否已经写入进去一句话木马 页面什么也没有&#xff…...

编程日记 2025/5/20 5:25:55

02、10个富士胶片模拟的设置

二色彩 1、色彩的加减控制全局的饱和度增减&#xff1b; 2、色彩效果只提升暖色系饱和度&#xff1b; 3、FX蓝色大幅度提升蓝色系饱和度&#xff1b; 4、三个参数都不改变颜色的色相。 2.1 色彩 色彩调整的是拍摄画面整体的色彩饱和程度 2.2色彩效果 调整的是画面中暖色…...

编程日记 2025/6/1 16:04:41

大模型呼出机器人详解

大模型呼出机器人详解 原作者&#xff1a;开源呼叫中心FreeIPCC&#xff0c;其Github&#xff1a;https://github.com/lihaiya/freeipcc 大模型呼出机器人是基于大规模深度学习模型构建的智能化客服系统&#xff0c;它能够处理海量数据并学习其中的规律&#xff0c;从而实现高…...

编程日记 2025/6/2 10:08:26

计算机基础知识——数据结构与算法(三)（山东省大数据职称考试）

大数据分析应用-初级 第一部分 基础知识 一、大数据法律法规、政策文件、相关标准 二、计算机基础知识 三、信息化基础知识 四、密码学 五、大数据安全 六、数据库系统 七、数据仓库. 第二部分 专业知识 一、大数据技术与应用 二、大数据分析模型 三、数据科学 数据结构与算法…...

编程日记 2025/6/3 19:24:22

【Unity功能集】TextureShop纹理工坊（三）图层（下）

项目源码&#xff1a;在终章发布 索引 图层渲染绘画区域图层Shader 编辑器编辑模式新建图层设置当前图层上、下移动图层删除图层图层快照 图层 在PS中&#xff0c;图层的概念贯穿始终&#xff08;了解PS图层&#xff09;&#xff0c;他可以称作PS最基础也是最强大的特性之一。…...

编程日记 2025/6/3 7:33:07

基于 SSM 框架 Vue 电脑测评系统：引领电脑评测新方向

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 图4-1系统工作原理…...

编程日记 2025/5/29 23:09:17

Android笔记【19】

具体示例 run: val result someObject.run {// 这里可以使用 thisthis.someMethod() }let: val result someObject?.let {// 这里使用 itit.someMethod() }with: val result with(someObject) {// 这里使用 thissomeMethod() }apply: val obj SomeClass().apply {// 这里使…...

编程日记 2025/6/4 15:45:40

Redis 中 IntSet 底层数据结构

IntSet 底层数据结构 序言: 像字符串 SDS 只是保存了一个变量的值&#xff0c;但是像 Redis 中也是需要保存一些集合元素的&#xff0c;这里就介绍一下其中一种集合 IntSet&#xff0c;由于是 Set 所以也有 Set 的一些特性&#xff0c;不过也多加了一些特性&#xff1a; ● 唯…...

编程日记 2025/6/3 7:32:11

自然语言处理：我的学习心得与笔记

Pytorch 1.Pytorch基本语法 1.1 认识Pytorch 1.2 Pytorch中的autograd 2.Pytorch初步应用 2.1 使用Pytorch构建一个神经网络 2.2 使用Pytorch构建一个分类器 小节总结 学习了什么是Pytorch. 。Pytorch是一个基于Numpy的科学计算包,作为Numpy的替代者,向用户提供使用GPU强大…...

编程日记 2025/6/3 12:59:15

Altair: 轻松创建交互式数据可视化

Altair: 轻松创建交互式数据可视化 Altair 是一个基于 Vega-Lite 的 Python 数据可视化库&#xff0c;它旨在简化数据可视化的创建过程&#xff0c;尤其适用于统计图表的生成。Altair 强调声明式编码方式&#xff0c;通过简单的语法&#xff0c;用户能够快速创建复杂的交互式图…...

编程日记 2025/6/4 9:45:28

【NLP】序列到序列（seq2seq）建模工具fairseq使用详解

文章目录 一、fairseq简介二、安装方式2.1 pip安装2.2 源码安装 三、fairseq命令工具3.1 fairseq-preprocess3.2 fairseq-train3.3 fairseq-generate3.4 fairseq-interactivate3.5 fairseq-score3.6 fairseq-eval-lm 4. 常见报错报错1 参考资料 一、fairseq简介 fairseq 是 Fa…...

编程日记 2025/5/29 9:16:02

[极客大挑战 2019]HardSQL 1

[极客大挑战 2019]HardSQL 1 打开实例&#xff0c;发现是个登陆页面&#xff0c;查看源代码&#xff0c;发现又是GET提交check.php 万能密码尝试 不太行&#xff0c;怀疑字段或者空格被过滤&#xff0c;尝试闭合不加其他东西 确认空格、union、and等都被过滤了&#xff0c;尝试…...

编程日记 2025/6/3 19:10:19

天空分割代码

目录 依赖项： 分割源代码： 依赖项： groundingdino Grounded-Segment-Anything 分割源代码： generate_sky_mask.py import os, syssys.path.append(os.getcwd()) # Change to your folder here sys.path.append(Grounded-Segment-Anything)import argparse import os…...

编程日记 2025/5/31 8:56:34

Leetcode 三角形最小路径和

算法思想与代码详解 这段代码采用的是**动态规划&#xff08;Dynamic Programming&#xff09;**的思想&#xff0c;用来解决“120. 三角形最小路径和”问题。动态规划通过将问题分解成更小的子问题&#xff0c;并通过保存子问题的解来避免重复计算&#xff0c;从而提高效率。…...

编程日记 2025/6/1 22:59:13

[Unity]Unity跨平台开发之Android入门

安卓环境配置 安装依赖项 推荐使用Unity Hub进行安装&#xff0c;安装时勾选Android Build Support、Android SDK & NDK Tools、OpenJDK。或者指定已安装的依赖项。&#xff08;注意&#xff1a;指定的依赖项需要是从UnityHub安装的。比如之前安装Unity2022时勾选了上述依…...

编程日记 2025/6/3 1:26:04

搭建Flume

title: 搭建Flume date: 2024-11-30 23:59:00 categories: - 服务器 tags: - Flume - 大数据搭建Flume 本次实验环境&#xff1a;Centos 7-2009、JDK 8、Flume-1.11.0 开始安装 1. 下载安装文件到服务器 # 使用wget命令下载flume文件&#xff08;二选一&#xff09; wget …...

编程日记 2025/5/29 22:17:52

【从零开始入门unity游戏开发之——C#篇10】循环结构——while、do-while、for、foreach的使用

文章目录 一、while 循环1、语法&#xff1a;2、示例&#xff1a; 二、 do-while 循环1、语法&#xff1a;2、示例&#xff1a; 三、for 循环1、语法&#xff1a;2、示例&#xff1a; 四、foreach 循环1、语法&#xff1a;2、示例&#xff1a; 五、总结对比六、注意事项七、使用…...

编程日记 2025/6/1 18:52:50

flask flask-socketio创建一个网页聊天应用

应用所需环境&#xff1a; python 3.11.11 其他 只需要通过这个命令即可 pip install flask3.1.0 Flask-SocketIO5.4.1 -i https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple 最好是用conda创建一个新的虚拟环境来验证 完整的pip list如下 Package Version ----…...

编程日记 2025/6/4 14:44:54

MVCC了解

MVCC&#xff08;多版本并发控制&#xff09;学习指南及代码示例 一、学习MVCC前先了解什么 1. MVCC的定义和作用 MVCC是一种并发控制机制&#xff0c;用于解决并发事务访问数据库时可能出现的问题&#xff0c;如脏读、不可重复读和幻读。它通过为每个数据行维护多个版本来实…...

编程日记 2025/5/30 20:30:42

LabVIEW随机扫描成像系统

利用LabVIEW开发了一套随机扫描成像系统&#xff0c;利用硬件时钟实现声光偏转器&#xff08;AOD&#xff09;的频率控制与信号采集之间的高速时间同步。系统利用了高精度的时钟同步技术&#xff0c;确保了成像精度和重复性&#xff0c;从而有效提高了成像速度和质量。 项目背景…...

编程日记 2025/5/31 3:28:32

系统移植——Linux 内核顶层 Makefile 详解

一、概述 Linux Kernel网上下载的版本很多NXP等有自己对应的版本。需要从网上直接下载就可以。 二、Linux内核初次编译 编译内核之前需要先在 ubuntu 上安装 lzop 库 sudo apt-get install lzop 在 Ubuntu 中 新 建 名 为 “ alientek_linux ” 的 文 件夹 &#xff0c; …...

编程日记 2025/6/3 3:16:20

【一文了解】C#重点-委托1

本篇文章来学习一下C#的委托&#xff0c;委托是C#中的一个重要概念&#xff0c;它允许将方法作为参数传递给其他方法。C#中的委托类似于C或C中的函数指针&#xff0c;并且类型安全。 委托 1.委托的定义 委托&#xff08;delegate&#xff09;是方法的代理/代表&#xff0c;委托…...

编程日记 2025/6/2 16:26:36

LeetCode hot100-87

https://leetcode.cn/problems/longest-increasing-subsequence/?envTypestudy-plan-v2&envIdtop-100-liked 300. 最长递增子序列 已解答 中等 相关标签 相关企业 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。子序列 是由数组派生而来的序列&a…...

编程日记 2025/6/1 5:12:07

项目26：简易在线论坛 --- 《跟着小王学Python·新手》

项目26&#xff1a;简易在线论坛 — 《跟着小王学Python新手》 《跟着小王学Python》 是一套精心设计的Python学习教程&#xff0c;适合各个层次的学习者。本教程从基础语法入手&#xff0c;逐步深入到高级应用&#xff0c;以实例驱动的方式&#xff0c;帮助学习者逐步掌握Pyth…...

编程日记 2025/6/4 4:29:05

知乎 PB 级别 TiDB 数据库集群管控实践

以下文章来源于知乎技术专栏 &#xff0c;作者代晓磊 导读 在现代企业中&#xff0c;数据库的运维管理至关重要&#xff0c;特别是面对分布式数据库的复杂性和大规模集群的挑战。作为一款兼容 MySQL 协议的分布式关系型数据库&#xff0c;TiDB 在高可用、高扩展性和强一致性方…...

编程日记 2025/6/3 0:01:10

Intel(R) Iris(R) Xe Graphics安装Anaconda、Pytorch（CPU版本）

一、Intel(R) Iris(R) Xe Graphics安装Anaconda 下载网址&#xff1a;https://repo.anaconda.com/archive/ 双击Anaconda3-2024.10-1-Windows-x86_64&#xff0c;一直下一步&#xff0c;选择安装的路径位置&#xff0c;一直下一步就安装完成了。打开Anaconda PowerShell Promp…...

编程日记 2025/6/1 14:11:18

RK3588 , mpp硬编码rgb, 保存MP4视频文件.

RK3588 , mpp硬编码yuv, 保存MP4视频文件. ⚡️ 传送 ➡️ RK3588, FFmpeg 拉流 RTSP, mpp 硬解码转RGBRk3588 FFmpeg 拉流 RTSP, 硬解码转RGBUbuntu x64 架构, 交叉编译aarch64 FFmpeg mppCode Init MppMPP_RET init_mpp...

编程日记 2025/5/29 12:48:32

揭开 Choerodon UI 拖拽功能的神秘面纱

01 引言 系统的交互方式主要由点击、选择等组成。为了提升 HZERO 系统的用户体验、减少部分操作步骤&#xff0c;组件库集成了卓越的拖拽功能&#xff0c;让用户可以更高效流畅的操作系统。 例如&#xff1a;表格支持多行拖拽排序、跨表数据调整、个性化调整列顺序&#xff1…...

编程日记 2025/5/30 8:41:30

常用网络协议简述

网络协议是计算机网络中规定数据交换格式和交换规则的一套标准。以下是一些常用的网络协议及其简要解释&#xff1a; HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09; 用于从网络传输超文本数据到本地浏览器的传输协议。基于TCP协议&…...

编程日记 2025/6/1 19:55:52

本地电脑使用命令行上传文件至远程服务器

将本地文件上传到远程服务器&#xff0c;在本地电脑中cmd使用该命令&#xff1a; scp C:/Users/"你的用户名"/Desktop/environment.yml ws:~/environment.yml 其中&#xff0c;C:/Users/“你的用户名”/Desktop/environment.yml是本地文件的路径&#xff0c; ~/en…...

编程日记 2025/6/4 13:23:23

笔记day2

文章目录 1 NavigationDuplivated警告错误2 Home模块组件拆分3 三级联动组件完成4 完成其余静态组件5 POSTMAN测试接口6 axios二次封装6.1 为什么需要进行二次封装axios&#xff1f;6.2 在项目中经常API文件夹【axios】6.3 axios基础不好&#xff0c;可以参考git|NPM关于axios文…...

编程日记 2025/6/4 8:00:05

排序算法（3）——归并排序、计数排序

目录 1. 归并排序 1.1 递归实现 1.2 非递归实现 1.3 归并排序特性总结 2. 计数排序 代码实现 3. 总结 1. 归并排序 基本思想&#xff1a; 归并排序&#xff08;merge sort&#xff09;是建立在归并操作上的一种有效的排序算法&#xff0c;该算法是采用分治法&#xff0…...

编程日记 2025/6/3 2:25:25

【5】C#期末复习第5套

1.int a[3][2]{2,4,6,8,10.12};则*&#xff08;a[1]1&#xff09;的值是8 指向&#xff08;a[1]的第二个元素&#xff09; 再* 2.合并字符串库函数strcat 3.比较字符串库函数strcmp 4.执行结果是x3&#xff0c;y3 int x3,y; int *px&x; y*px; (优先级高于*) 5.*p[5]没…...

编程日记 2025/5/29 22:39:47