vue3--通用 popover 气泡卡片组件实现

 背景 

在日常开发中,我们一般都是利用一些诸如:element-ui、element-plus、ant-design等组件库去做我们的页面或者系统

这些对于一些后台管理系统来说是最好的选择,因为后台管理系统其实都是大同小异的,包括功能、布局结构等

但是对于前台项目,比如官网、门户网站这些

比如bilibili

以及王者荣耀官网

等等,我们不难发现这些前台项目(官网)等,它们的风格是不同的,那么这个时候可能一些组件库就无法满足我们的设计要求和一些炫酷的效果了,就需要我们自己去自定义一些通用的组件

那么下面我们就从自定义一个popover通用气泡组件开始吧

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu如何显示pcl版本

终端输入: apt-cache show libpcl-dev可以看到,Ubuntu20.04,下载的pcl,应该都是1.10版本的

dayjs日期格式化,开发uniapp或unicloud前后端进行时间格式转换

一、 为什么要用日期格式化 因为在开发项目过程中,会遇到各种各样的日期格式,有的显示完整的年-月-日 时:分:秒,而有的场景就只显示月-日等格式,还有就是显示当前时间和注册时间的间隔时长等,场景非常多,如…

Docker部署Kamailio,并使用LinPhone实现网络通话

前提条件 准备一个路由器,一个服务器,两个终端设备(手机或电脑) docker部署安装 我使用的是windows系统,docker desktop 先启动Docker desktop打开cmd,输入docker命令docker run --name kamailio --rm…

【MySQL】多表查询——内连接,左/右连接

目录 准备工作 1.多表查询 2.INNER JOIN(内连接) 2.1.笛卡尔积 1.2.笛卡尔积的过滤 1.3.INNER JOIN(显式内连接) 1.4.SELF JOIN(自连接) 3. LEFT JOIN(左连接) 3.1.一个例子…

联系拯救者Y9000P2022笔记本电脑进入BIOS快捷键

联系拯救者Y9000P2022笔记本电脑进入BIOS快捷键 文章目录 联系拯救者Y9000P2022笔记本电脑进入BIOS快捷键1. 进入BIOS快捷键2. 快速进入BIOS设置界面3. 快速进入启动项选择界面 1. 进入BIOS快捷键 进入BIOS设置界面的快捷键为F2快速进入启动项选择界面的快捷键为F12 2. 快速进…

asyn queueRequest使用实例

使用queueRequest读写端口驱动的示例&#xff0c;驱动驱动程序使用一个基于asyn实现了asynCommon和asynOctet的驱动程序-CSDN博客中编写的驱动程序&#xff0c;本程序的C代码如下&#xff1a; #include <stdlib.h> #include <stdio.h> #include <string.h>#…

Sqli-labs less-27

Sqli-labs less-27 过滤union\select绕过方式 ### 1. 逻辑绕过 例&#xff1a; 过滤代码 union select user,password from users 绕过方式 1 && (select user from users where userid1)‘admin’### 2.十六进制字符绕过 select ——> selec\x74 union——>un…

nacos的使用

nacos的使用 本专栏的上一篇文章已经部署好了nacos&#xff0c;我们就可以使用nacos做配置中心和注册中心了。 一、配置中心 有了nacos&#xff0c;我们在微服务项目的配置文件里只需要做一些简单的配置就行了&#xff1a;服务名、服务端口、nacos的地址。其余的配置都可以用…

RBTree(红黑树)的介绍和实现

欢迎来到杀马特的主页&#xff1a;羑悻的小杀马特.-CSDN博客 目录 ​编辑 一红黑树介绍&#xff1a; 1.1红黑树概念&#xff1a; 1.2红黑树遵循的原则&#xff1a; 1.3红黑树效率分析&#xff1a; 二.红黑树的实现&#xff1a; 2.1红黑树结构&#xff1a; 2.2红黑树节点…

如意控物联网项目(二)-ML307R模组软件调试之MQTT+硬件接口调试笔记

目录 概要 1、 操作系统----RTOS kernel CMSIS-RTOS2 2、 程序API文档 3、 MQTT调试记录-2024年10月9日 4、 ML307_APP_DEMO_SDK使用指南 5、 MQTT登录onenet平台成功 6、 ML307R链接onenet平台成功-接收数据成功 7、 timer定时器调试 8、 操作系统--OS程序学习 1. 事件…

【实战指南】Vue.js 介绍组件数据绑定路由构建高效前端应用

学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……&#xff09; 2、学会Oracle数据库入门到入土用法(创作中……&#xff09; 3、手把手教你开发炫酷的vbs脚本制作(完善中……&#xff09; 4、牛逼哄哄的 IDEA编程利器技巧(编写中……&#xff09; 5、面经吐血整理的 面试技…

G1 GAN生成MNIST手写数字图像

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 G1 GAN生成MNIST手写数字图像 1. 生成对抗网络 (GAN) 简介 生成对抗网络 (GAN) 是一种通过“对抗性”学习生成数据的深度学习模型&#xff0c;通常用于生成…

SQL Injection | SQL 注入概述

关注这个漏洞的其他相关笔记&#xff1a;SQL 注入漏洞 - 学习手册-CSDN博客 0x01&#xff1a;SQL 注入漏洞介绍 SQL 注入就是指 Web 应用程序对用户输入数据的合法性没有判断&#xff0c;前端传入后端的参数是可控的&#xff0c;并且参数会带入到数据库中执行&#xff0c;导致…

CCS字体、字号更改+CCS下载官方链接

Step1、 按照图示箭头操作 step2 Step3 点击确定&#xff0c;点击Apply(应用)&#xff0c;点击Apply and close(应用和关闭) 4、历代版本下载链接 CCS下载&#xff1a;官方链接https://www.ti.com/tool/CCSTUDIO The last but not least 如果成功的解决了你的问题&#x…

MEMC功能详解

文章目录 MEMC的工作原理&#xff1a;优点&#xff1a;缺点&#xff1a;适用场景&#xff1a;1. Deblur&#xff08;去模糊&#xff09;2. Dejudder&#xff08;去抖动&#xff09;总结两者区别&#xff1a; MEMC&#xff08;Motion Estimation and Motion Compensation&#x…

【开源免费】基于SpringBoot+Vue.JS房屋租赁系统(JAVA毕业设计)

本文项目编号 T 020 &#xff0c;文末自助获取源码 \color{red}{T020&#xff0c;文末自助获取源码} T020&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…

编码方式知识整理【ASCII、Unicode和UTF-8】

编码方式 一、ASCII编码二、Unicode 编码三、UTF-8编码四、GB2312编码五、GBK编码 计算机中对数据的存储为二进制形式&#xff0c;但采用什么样的编码方式存储&#xff0c;效率更高。主要编码方式有 ASCII、Unicode、UTF-8等。 英文一般为1个字节&#xff0c;汉字一般为3个字节…

代码复现(五):GCPANet

文章目录 net.py1.class Bottleneck&#xff1a;残差块2.class ResNet&#xff1a;特征提取3.class SRM&#xff1a;SR模块4.class FAM&#xff1a;FIA模块5.class CA&#xff1a;GCF模块6.class SA&#xff1a;HA模块7.class GCPANet&#xff1a;网络架构 train.pytest.py 论文…

【数学二】一元函数积分学-定积分的应用-平面图形面积、旋转体体积、函数的平均值、平面曲线的弧长、旋转曲面面积

考试要求 1、理解原函数的概念&#xff0c;理解不定积分和定积分的概念. 2、掌握不定积分的基本公式&#xff0c;掌握不定积分和定积分的性质及定积分中值定理&#xff0c;掌握换元积分法与分部积分法. 3、会求有理函数、三角函数有理式和简单无理函数的积分. 4、理解积分上限…

进程与线程的区别

1.进程的简单了解 进程是计算机中程序在某个数据集合上的一次运行活动&#xff0c;是操作系统进行资源分配和调度的基本单位。 从不同角度来看&#xff1a; ● 资源分配角度&#xff1a;进程拥有独立的内存地址空间、系统资源&#xff08;如 CPU 时间、文件描述符等&#xf…