Vue3气泡卡片(Popover)
效果如下图在线预览APIsPopover参数说明类型默认值title卡片标题string | slotundefinedtitleStyle卡片标题样式CSSProperties{}content卡片内容string | slotundefinedcontentStyle卡片内容样式CSSProperties{}keyboard是否支持按键操作 (enter显示esc关闭)booleantruetooltipStyle设置弹出提示的样式CSSProperties{}更多属性请参考 TooltipSlots名称说明类型title自定义卡片标题v-slot:titlecontent自定义卡片内容v-slot:contentdefault自定义内容v-solt:defaultEvents名称说明类型openChange显示隐藏的回调(open: boolean) void创建气泡卡片组件Popover.vue其中引入使用了以下工具函数监听插槽存在 useSlotsExist使用requestAnimationFrame模拟实现setTimeout和setIntervalscript setup langtsimport{computed}fromvueimporttype{CSSProperties}fromvueimportTooltipfromcomponents/tooltipimport{useSlotsExist}fromcomponents/utilsexportinterfaceProps{title?:string// 卡片标题 string | slottitleStyle?:CSSProperties// 卡片标题样式content?:string// 卡片内容 string | slotcontentStyle?:CSSProperties// 卡片内容样式keyboard?:boolean// 是否支持按键操作 (enter 显示esc 关闭)tooltipStyle?:CSSProperties// 设置弹出提示的样式}constpropswithDefaults(definePropsProps(),{title:undefined,titleStyle:()({}),content:undefined,contentStyle:()({}),keyboard:true,tooltipStyle:()({})})constslotsExistuseSlotsExist([title,content])constshowTitlecomputed((){returnslotsExist.title||props.title})constshowContentcomputed((){returnslotsExist.content||props.content})/scripttemplateTooltip max-widthautobg-color#fff:tooltip-style{padding:12px,borderRadius:8px,textAlign:start,...tooltipStyle}:keyboardkeyboard:transition-duration200template #tooltipdiv v-ifshowTitleclasspopover-title:class{ mb8: showContent }:styletitleStyleslot nametitle{{title}}/slot/divdiv v-ifshowContentclasspopover-content:stylecontentStyleslot namecontent{{content}}/slot/div/templateslot/slot/Tooltip/templatestyle langlessscoped.popover-title{min-width:176px;color:rgba(0,0,0,0.88);font-weight:600;}.mb8{margin-bottom:8px;}.popover-content{color:rgba(0,0,0,0.88);}/style在要使用的页面引入其中引入使用了以下组件Vue3按钮ButtonVue3间距Spacescript setup langtsimportPopoverfrom./Popover.vueimport{ref}fromvueconstshowref(false)functionopenChange(open:boolean){console.log(open,open)}/scripttemplatedivclassml60h1{{$route.name}}{{$route.meta.title}}/h1h2classmt30 mb10基本使用/h2Popover titleTitleopen-changeopenChangetemplate #contentpContent/ppContent/p/templateButton typeprimaryHover me/Button/Popoverh2classmt30 mb10自定义样式/h2Popover:max-width180bg-color#000:title-style{ fontSize: 16px, fontWeight: bold, color: #1677ff }:content-style{ color: #fff }:tooltip-style{ padding: 12px 18px, borderRadius: 12px }template #titleCustom Title/templatetemplate #contentpCustom Content/ppCustom Content/p/templateButton typeprimaryHover me/Button/Popoverh2classmt30 mb10不同的触发方式/h2SpacePopover titleHover Titletemplate #contentpContent/ppContent/p/templateButton typeprimaryHover Me/Button/PopoverPopover titleClick Titletriggerclicktemplate #contentpContent/ppContent/p/templateButton typeprimaryClick Me/Button/Popover/Spaceh2classmt30 mb10从浮层内关闭/h2h3classmb10使用 show 属性控制显示隐藏/h3Popover v-model:showshowtitleClick Titletriggerclicktemplate #contentaclickshow falseClose/a/templateButton typeprimaryClick Me/Button/Popoverh2classmt30 mb10自定义过渡动画时间/h2Popover titleTransition Duration 300ms:transition-duration300template #contentpContent/ppContent/p/templateButton typeprimaryTransition Duration 300ms/Button/Popoverh2classmt30 mb10延迟显示隐藏/h2SpacePopover:show-delay300:hide-delay300titledelay 300mscontentVue Amazing UIButton typeprimaryDelay 300ms Popover/Button/PopoverPopover:show-delay500:hide-delay500titledelay 500mscontentVue Amazing UIButton typeprimaryDelay 500ms Popover/Button/Popover/Spaceh2classmt30 mb10隐藏箭头/h2Popover:arrowfalsetitleTitletemplate #contentpContent/ppContent/p/templateButton typeprimaryHide Arrow/Button/Popover/div/template

相关新闻

SpringBoot大学城水电管理系统开发复盘:从源码到论文

SpringBoot大学城水电管理系统开发复盘:从源码到论文

简介:在高校后勤信息化建设中,水电管理长期依赖人工抄表与Excel统计,数据错漏频发、对账困难。如何构建一套可靠的水电管理系统,成为许多开发者和毕业设计选题关注的重点。从工程实践出发,围绕基于SpringBoot、MyBatis…

2026/8/29 13:05:06 阅读更多 →
极简产品并发增长先守住哪条线

极简产品并发增长先守住哪条线

极简产品并发增长先守住哪条线产品刚开始增长时,最先该守住的不是某个理论吞吐数字,而是用户任务的状态。用户点击提交后,系统到底有没有接受请求?重复点击会不会创建两份任务?处理变慢时,用户能否知道该等…

2026/8/29 13:05:06 阅读更多 →
线性规划实战:从饲料混合问题到资源优化通用方法论

线性规划实战:从饲料混合问题到资源优化通用方法论

1. 从一道题到一套方法:饲料混合问题的实战拆解 最近在整理一些经典的线性规划与优化案例,翻到了这个“饲料混合加工问题”。坦白说,第一次看到“问题4的混合方案”这种标题,很多人可能会觉得这不过是一道枯燥的数学题&#xff0c…

2026/8/29 13:05:06 阅读更多 →

最新新闻

基于Spring Boot的网上订餐系统毕设完整实践指南

基于Spring Boot的网上订餐系统毕设完整实践指南

简介:每一个管理类系统的开发都离不开成熟的后端框架与数据库设计。Spring Boot作为Java生态中主流的快速开发框架,通过自动配置与起步依赖简化了项目搭建;而MySQL关系型数据库则为订单、用户、菜品等核心数据提供了稳定存储。两者结合&#…

2026/8/29 13:48:24 阅读更多 →
Vue3分页(Pagination)

Vue3分页(Pagination)

Vue2分页(Pagination) 可自定义设置以下属性: 当前页数(v-model:page),类型:number,默认 1 每页条数(v-model:pageSize),类型:numbe…

2026/8/29 13:48:24 阅读更多 →
Vue3按钮(Button)

Vue3按钮(Button)

可自定义设置以下属性: 设置按钮类型(type),类型:default | reverse | primary | danger | dashed | text | link,默认 default 设置按钮形状(shape),类型:d…

2026/8/29 13:48:24 阅读更多 →
AC自动机与动态规划结合:解决字符串过滤与安全文本生成问题

AC自动机与动态规划结合:解决字符串过滤与安全文本生成问题

1. 项目概述:当字符串过滤遇上动态规划与高精度做文本处理或者内容安全相关的开发,我们经常会遇到一个经典问题:给定一个“敏感词”词典,以及一个允许使用的字符集(比如只包含26个大写字母),要求…

2026/8/29 13:48:24 阅读更多 →
电脑时间长自动关机,睡眠后自动关机休眠,如何保持不关机

电脑时间长自动关机,睡眠后自动关机休眠,如何保持不关机

打开控制面板,找到电源选项,打开高级电源设置 找到睡眠,在此时间后休眠,把数值改为0,变成从不。之后电脑就会进入睡眠状态,不会自动关机休眠,可以随时唤醒。

2026/8/29 13:48:24 阅读更多 →
蓝桥杯国赛真题解析:01背包动态规划的核心原理与实战变种

蓝桥杯国赛真题解析:01背包动态规划的核心原理与实战变种

1. 从一道国赛真题,聊聊01背包的“形”与“神” 如果你参加过蓝桥杯,或者刷过一些算法题,对“01背包”这个名字肯定不会陌生。它几乎是动态规划入门的第一道坎,也是面试官检验候选人基本功的经典问题。题目描述简单到极致&#xf…

2026/8/29 13:47:23 阅读更多 →

日新闻

etc目录下的profile.d文件目录设置环境变量和全局脚本shell

etc目录下的profile.d文件目录设置环境变量和全局脚本shell

一、设置环境变量etc目录下的profile.d文件目录 /etc/profile.d1、编写 vi test.sh文件内容# jdk变量 export ZHK_HOME/root export PATH$PATH:$ZHK_HOME/test # 可以取出来ZHK_HOME变量给ZZZ_HOME赋值 export ZZZ_HOME${ZHK_HOME}/test2、刷新 执行source /etc/profile 命令使…

2026/8/29 0:00:24 阅读更多 →
【JavaScript】内存管理-垃圾回收机制-内存泄露

【JavaScript】内存管理-垃圾回收机制-内存泄露

内存管理 C 语言这样的底层语言一般都有底层的内存管理接口,比如 malloc()和free()。 而 JavaScript 是在创建变量(对象,字符串等)时自动进行了分配内存,并且在不使用它们时“自动”释放。释放的过程称为垃圾回收。 整…

2026/8/29 0:00:24 阅读更多 →
Labgrid-MCP:为嵌入式硬件实验室接入AI Agent操控能力

Labgrid-MCP:为嵌入式硬件实验室接入AI Agent操控能力

Labgrid-MCP 的目标是把 MCP(Model Context Protocol)能力延伸到真实嵌入式硬件实验室:AI Agent 通过一个标准化的 MCP Server,就能查看目标板状态、控制上电断电、复位开发板、读取串口日志,甚至执行镜像刷写。对于经…

2026/8/29 0:00:24 阅读更多 →

周新闻

[光学原理与应用-521]:对光的错误理解与纠偏

[光学原理与应用-521]:对光的错误理解与纠偏

首先光是一种能量的载体和形态,宏观上观察到的光是由无数个微观的光量子组成的,每个光子在产生的瞬间,其在真空的空间中以确定不变的速度沿着一个初始的方向一直向前,在微观层面,每个光量子的运动轨迹是以波函数所展现…

2026/8/28 11:23:26 阅读更多 →
SIP通话转接原理与REFER方法实战解析

SIP通话转接原理与REFER方法实战解析

1. 通话转接不是“挂断再拨号”,而是SIP会话的动态重定向你有没有遇到过这样的场景:客服坐席A正在和客户通电话,突然需要把这通对话无缝转给专家坐席B,客户完全感知不到中间的断连——既没听到忙音,也没被要求重新拨号…

2026/8/28 23:05:07 阅读更多 →
Kolla-ansible单节点OpenStack部署实战:从环境准备到排坑指南

Kolla-ansible单节点OpenStack部署实战:从环境准备到排坑指南

1. 为什么选择Kolla-ansible来部署单节点OpenStack?如果你正在寻找一种能把OpenStack从“概念”快速变成“可用的实验环境”的方法,那么Kolla-ansible几乎是当前最主流、最省心的选择。我见过太多人卡在手动编译依赖、配置服务、处理版本冲突的泥潭里&am…

2026/8/28 19:47:53 阅读更多 →

月新闻

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 还在为百度网盘macOS版的龟速下…

2026/8/29 4:34:53 阅读更多 →
终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的NCM格式文件无法在其他播放器播放而烦恼吗?ncmdump解密工具帮你轻松解决这个困…

2026/8/28 17:43:04 阅读更多 →
HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片:为英语学习 App 打造桌面级学习助手

HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片:为英语学习 App 打造桌面级学习助手

AgentCard 智能体卡片:为英语学习 App 打造桌面级学习助手适用平台:HarmonyOS 7.0 (API 26 Beta)一、引言 HarmonyOS 7.0(API 26 Beta)新增了 AgentCard 智能体卡片能力,这是继 HMAF(鸿蒙智能体框架&#x…

2026/8/29 2:05:18 阅读更多 →