使用element的小弹框并修改css

使用el-popover来做弹框:

滑动或点击元素要加插槽slot="reference"来展示弹框;

<el-popover
    placement="top"
    width="166"
    trigger="hover"
    popper-class="popover">
    <div>
        <div>
           <div>
               <i class="iconfont icon-lianjie-01"></i>
               <span>输入链接</span>
           </div>
           <div>
               <i class="iconfont icon-gerenkongjian"></i>
               <span>个人空间</span>
           </div>
        </div>
        <div slot="reference">
            <i class="iconfont icon-shangchuan-copy"></i>
        </div>
    </div>
</el-popover>

去掉默认小三角和更改padding样式:

.popover {
    padding: 14px 10px 17px 10px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
}

.popover .popper__arrow {
    display: none !important;
}

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

关于大模型多轮问答的两种方式

前言 大模型的多轮问答难点就是在于如何精确识别用户最新的提问的真实意图&#xff0c;而在常见的使用大模型进行多轮对话方式中&#xff0c;我接触到的只有两种方式&#xff1a; 一种是简单地直接使用 user 和 assistant 两个角色将一问一答的会话内容喂给大模型&#xff0c…

AIGC笔记--DDIM的简单实现

1--DDIM介绍 原论文&#xff1a;DENOISING DIFFUSION IMPLICIT MODELS 2--核心代码 # ddim的实现 def compute_alpha(beta, t):beta torch.cat([torch.zeros(1).to(beta.device), beta], dim0) # beta -> [1, beta]# 先通过cumprod计算累乘结果&#xff0c;即: alpha_(t)…

微软找腾讯接盘,Windows直接安装手机APP体验起飞了

熟悉微软的同学都知道微软有个传统艺能——什么好用砍什么。 比如 Win10 砍掉了还算方便的小娜&#xff0c;推出 Win11 砍掉了 Win10 上面好用的磁贴功能等。 上一秒用户还在夸奖点赞。 下一秒就给你砍掉&#xff0c;顺带还塞一堆 BUG 给你。 但没办法&#xff0c;PC 近乎垄断…

【WEEK15】 【DAY1】Swagger第四部分【中文版】

2024.6.3 Monday 接上文【WEEK14】 【DAY5】Swagger第三部分【中文版】 目录 16.9.拓展&#xff1a;其他皮肤16.9.1.修改pom.xml16.9.2.重启并分别访问对应的网址16.9.2.1.swagger-ui16.9.2.2.bootstrap-ui16.9.2.3.Layui-ui16.9.2.4.mg-ui 16.9.拓展&#xff1a;其他皮肤 16.…

【K8s】专题四(4):Kubernetes 控制器之 StatefulSet

以下内容均来自个人笔记并重新梳理&#xff0c;如有错误欢迎指正&#xff01;如果对您有帮助&#xff0c;烦请点赞、关注、转发&#xff01;欢迎扫码关注个人公众号&#xff01; 目录 一、基本介绍 二、工作原理 三、相关特性 四、资源清单&#xff08;示例&#xff09; 五…

AI写作:如何利用AI提升文章创作效率?

工欲善其事&#xff0c;必先利其器。 随着AI技术与各个行业或细分场景的深度融合&#xff0c;日常工作可使用的AI工具呈现出井喷式发展的趋势&#xff0c;AI工具的类别也从最初的AI文本生成、AI绘画工具&#xff0c;逐渐扩展到AI思维导图工具、AI流程图工具、AI生成PPT工具、AI…

cicd的基本概念

一.gitlab-cicd技术点 DevOps CI/CD理念与主流工具 DevOps 运动的兴起给业界提供了一个参考答案。其中CI 和 CD两个理念就是解决开发者和运维协同工作的一剂良方。 CI 是 Continuous Integration 的缩写&#xff0c;表示持续集成。CD 是 Continuous Delivery 的缩写&#xf…

10- Redis 键值对数据库是怎么实现的?

在开始将数据结构之前&#xff0c;先给介绍下 Redis 是怎样实现键值对&#xff08;key-value&#xff09;数据库的。 Redis 的键值对中的 key 就是字符串对象&#xff0c;而 value 可以是字符串对象&#xff0c;也可以是集合数据类型的对象&#xff0c;比如 List 对象&#xf…

刷题训练之分治快排

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;熟练掌握分治快排算法。 > 毒鸡汤&#xff1a;学习&#xff0c;学习&#xff0c;再学习 ! 学&#xff0c;然后知不足。 > 专栏选自&#xff1a;刷…

ThreadLocal与ForkJoin使用踩坑记录

由于并发的需要原因&#xff0c;使用CompletableFuture异步执行Dubbo接口&#xff0c;RpcContext中存储了tenantId等信息。上线一段时间后&#xff0c;发现有些时候拿到的上下文并不是自己线程的上下文。 原因分析 CompletableFuture.supplyAsync内部使用ForkJoinPool执行。 要…

【EI会议/稳定检索】2024年电机与电气控制国际会议(ICMEC 2024)

2024 International Conference on Motor and Electrical Control 2024年电机与电气控制国际会议 【会议信息】 会议简称&#xff1a;ICMEC 2024 截稿时间&#xff1a;(以官网为准&#xff09; 大会地点&#xff1a;中国厦门 会议官网&#xff1a;www.meciac.com 会议邮箱&…

夸张,腾讯实习三个月,存款20W+

大家好&#xff0c;我是白露。 今天在牛客上看到一条帖子&#xff0c;让我感叹万分&#xff1a;实习两三个月&#xff0c;竟然已经存下了20多万的存款。 这也太夸张了吧&#xff1f;不太真实啊…… 很多网友表示疑问&#xff0c;“两三个月实习顶多存两三万吧&#xff1f;武理…

【工具】windows下VMware17解锁mac安装选项(使用unlocker427)

目录 0.简介 1.环境 2.安装前后对比 3.详细安装过程 3.1 下载unlocker427 1&#xff09;下载地址 2&#xff09;下载unlocker427.zip 3&#xff09;解压之后是这样的 4&#xff09;复制iso中的两个文件到你本地的VMware的安装目录下 5&#xff09;复制windows下的所有…

【笔记】从零开始做一个精灵龙女-装备阶段

这里只记录相对重要的步骤和一些思路 但是头发那块很详细哦~ &#xff08;标的小数字不用在意&#xff0c;那个是我网课的时长记录&#xff09; 耳环 1.创建一个圆环&#xff0c;调整参数 做好后再复制一个小的 肩甲 2.0-2.4 1.创建圆柱体/球体也可 然后把底部的两个点删…

有哪些好用的ai工具,可以提升科研、学习、办公等效率?

最近&#xff0c;Sora的诞生为AI再添了一把火。 据介绍&#xff0c;这款“文生视频”的Sora可以直接输出长达60秒的视频&#xff0c;并且包含高度细致的背景、复杂的多角度镜头&#xff0c;以及富有情感的多个角色。 不仅能准确呈现细节&#xff0c;还能理解物体在物理世界中…

Accelerate笔记:本地SGD

本地 SGD 是一种分布式训练技术&#xff0c;其中梯度不是每一步都同步。每个进程都会更新自己版本的模型权重&#xff0c;在给定的步数后&#xff0c;通过跨所有进程平均这些权重来同步它们。 在底层&#xff0c;本地 SGD 代码禁用了自动梯度同步&#xff08;但累积仍然如预期工…

什么是最好的手机数据恢复软件?6 款手机数据恢复软件 [2024 年更新]

什么是最好的手机数据恢复软件&#xff1f;在这篇文章中&#xff0c;您将了解 6 款最好的免费手机数据恢复软件&#xff0c;并学习如何恢复数据的完整指南。 最好的手机数据恢复软件是什么&#xff1f; 手机数据恢复软件是恢复智能手机中丢失或删除的文件、消息、照片和其他宝…

Win10文件系统错误(-2147219196)

问题出现的原因&#xff1a; C盘快挤满了&#xff0c;导致电脑很卡&#xff0c;于是删掉了C盘用户下的一些文件C:\Users\DIY-PC&#xff0c;省了五六十G的内存&#xff0c;结果发现把一些系统文件也删掉了&#xff0c;导致图片预览报错 问题现象&#xff1a; &#xff08;自…

6月软考新通知:24下集成大概率是中级蕞简单的一门

2024下半年软考6月新通知&#xff1a; 一、24下软考考试时间安排&#xff1a; 24下半年软考报名时间&#xff1a;8月19日-9月15日 24下半年软考考试时间&#xff1a;11月9-12日 24下半年软考成绩查询&#xff1a;12月中&#xff08;预计&#xff09; 二、考情分析 24上软考…

免费,C++蓝桥杯等级考试真题--第7级(含答案和解析)

C蓝桥杯等级考试真题--第7级 答案&#xff1a;D 解析&#xff1a;步骤如下&#xff1a; 首先&#xff0c;--a 操作会使 a 的值减1&#xff0c;因此 a 变为 3。判断 a > b 即 3 > 3&#xff0c;此时表达式为假&#xff0c;因为 --a 后 a 并不大于 b。因此&#xff0c;程…