使用element的小弹框并修改css

news2024/11/24 12:25:24

使用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.coloradmin.cn/o/1718383.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

安装 Android Studio 2024.1.1.6(Koala SDK35)和过程问题解决

记录更新Android Studio版本及适配Android V应用配置的一些过程问题。 安装包&#xff1a;android-studio-2024.1.1.6-windows.exe原版本&#xff1a;Android Studio23.2.1.23 Koala 安装过程 Uninstall old version 不会删除原本配置&#xff08;左下角提示&#xff09; Un…

配置华为路由器通过RADIUS对接安当ASP身份认证服务器以实现上网功能解决方案

当配置华为路由器通过RADIUS对接安当ASP身份认证服务器以实现上网功能时&#xff0c;以下是一个更详细的解决方案&#xff1a; 一、前期准备 1. 确认网络环境&#xff1a; 确保华为路由器与安当ASP身份认证服务器之间的网络连接稳定可靠。确定RADIUS协议所需的端口&#xff08…

博客星球大冒险:用Spring Boot和JWT打造你的数字王国

揭秘如何在Spring Boot中无缝集成JWT&#xff0c;为你的应用打造一个高度可扩展且安全的认证系统。从添加依赖到创建JWT过滤器&#xff0c;再到实现令牌的有效性管理和刷新机制&#xff0c;每一步都精心设计&#xff0c;确保你的乐园能够迎接成千上万的游客&#xff01; 文章目…

HOW - BFF 服务实践系列(一)

目录 一、BFF 介绍1.1 BFF 的概念1.2 为什么需要 BFF1.3 举例说明 二、适用于Web前端的BFF应该提供哪些能力2.1 接口聚合&#xff08;重要&#xff09;2.2 简化和优化的API2.3 安全和身份验证&#xff08;重要&#xff09;2.4 缓存机制2.5 错误处理和重试机制2.6 数据格式转换2…

Nvidia Orin/Jetson +GMSL/RLINC/VbyOne/FPDLink 同轴AI多相机同步车载视觉解决方案

在本次演讲中&#xff0c;介绍了多相机同步技术在自主机器中的应用情况&#xff0c;围绕无人配送小车、控制器视觉传感器方案升级、人形机器人三个典型案例中如何为客户提供高效的多相机同步解决方案进行了详细的讲解&#xff0c;并进一步介绍如何通过创新的多相机同步技术&…

掌控未来,爱普生SR3225SAA用于汽车钥匙、射频电路的智慧引擎

为了响应市场需求&#xff0c;Epson使用独家QMEMS*2技术所生产的石英振荡器&#xff0c;与其精巧的半导体技术所制造的射频传输器电路&#xff0c;开发了SR3225SAA。不仅内建的石英震荡器之频率误差仅有2 ppm&#xff0c;更使其封装尺寸达仅3.2 mm x 2.5 mm&#xff0c;为客户大…

Maven简介和快速入门

1.1Maven介绍 Maven – Introduction (apache.org) Maven就是一个软件&#xff0c;掌握软件安装、配置、以及基本功能&#xff08;项目构建、依赖管理&#xff09;。 1.2Maven主要作用 1.依赖管理&#xff1a; Maven 可以管理项目的依赖&#xff0c;包括自动下载所需依赖库、…

Aigtek功率放大器的主要性能要求有哪些

功率放大器是电子系统中的重要组件&#xff0c;用于将低功率信号放大到高功率水平。功率放大器的性能直接影响到信号的放大质量和系统的整体性能。下面西安安泰将介绍功率放大器的主要性能要求。 增益&#xff1a;功率放大器应当具有足够的增益&#xff0c;即将输入信号的幅度放…

机器人控制系列教程之D-H参数建模法

机器人运动学的研究依赖于机器人的模型的建立&#xff0c;目前较为多见的两种方法分别是Denavit-Hartenberg建模法&#xff08;简称&#xff1a;D-H建模法&#xff09;。该方法时由Denavit和Hartenberg于19955年提出的一种为关节链中的每一个杆件建立一个坐标系的矩阵方法&…

VIO System 丨适用于控制器开发前期的测试系统

VIO综述 嵌入式软件的HIL测试需要复杂的测试系统及完整的ECU硬件&#xff0c;这导致通常只能在开发流程的后期阶段进行测试。全新推出的低成本解决方案VIO System&#xff0c;使得在开发前期不仅可以进行总线通讯测试&#xff0c;也可以同时进行I/O信号测试。 该系统旨在通过…

产品上市新闻稿怎么写?纯干货

一个产品的上市&#xff0c;想要达到一个非常好的宣传效果&#xff0c;前期的预热造势是必不可少的&#xff0c;投放产品上市新闻稿到权威专业的媒体&#xff0c;潜移默化去影响用户的心智&#xff0c;产品上市新闻稿怎么写&#xff1f;接下来伯乐网络传媒就来给大家分享一下&a…

MFC 解决Enter回车键和Esc取消键默认关闭窗口的三种方法

文章目录 问题描述问题原因解决办法方法一&#xff1a;在重载的PreTranslateMessage 函数中屏蔽回车和ESC 的消息方法二&#xff1a;重载OnOK函数方法三&#xff1a;将所有按钮类型设为普通按钮&#xff0c;并设置其中一个按钮为默认按钮 问题描述 一般情况下编写的MFC对话框程…

8086 汇编笔记(三):第一个程序

一、一个源程序从写出到执行的过程 第一步&#xff1a;编写汇编源程序 第二步&#xff1a;对源程序进行编译连接 第三步&#xff1a;执行可执行文件中的程序 二、源程序 codesg segment ; 定义一个段&#xff0c;段的名称为“codesg”&#xff0c;这个段从此开始…

day25-XML

1.xml 1.1概述【理解】 万维网联盟(W3C) 万维网联盟(W3C)创建于1994年&#xff0c;又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。 建立者&#xff1a; Tim Berners-Lee (蒂姆伯纳斯李)。 是Web技术领域最具权威和影响力的国际中立性技术标准机构。 到目前为…

散射技术在AI去衣中的作用及其伦理考量

引言&#xff1a; 在人工智能的众多应用领域中&#xff0c;图像处理一直是一个热门话题。近年来&#xff0c;随着深度学习技术的飞速发展&#xff0c;AI去衣功能引起了广泛的关注和讨论。这项技术的核心在于利用先进的算法对图像进行处理&#xff0c;以实现从图片或视频中移除衣…

java家政上门系统源码,一套同城预约、上门服务的家政系统源码

一款同城预约、上门服务的家政系统源码&#xff0c;用户端、服务端、管理端各端相互依赖又相互独立&#xff0c;支持选择项目、选择服务人员的下单方式&#xff0c;支持多城市并且设置每个城市专属服务项目。 技术架构&#xff1a;java1.8springboot mysql htmlThymeleaf uni…

Spring Cloud Alibaba-09-Seata分布式事务

Lison <dreamlison163.com>, v1.0.0, 2024.5.03 Spring Cloud Alibaba-09-Seata分布式事务 文章目录 Spring Cloud Alibaba-09-Seata分布式事务分布式事务基础事务本地事务分布式事务分布式事务的场景 分布式事务的解决方案全局事务可靠消息服务最大努力通知TCC事务 Se…

【C++】vector和list的迭代器

目录 前言 一.迭代器的使用 1.vector迭代器 2.list迭代器的使用 二.迭代器失效问题 1.vector迭代器失效问题 2.list迭代器失效问题 三.vector和list的对比 前言 我们在学习CSTL部分的时候&#xff0c;在vector和list的部分初步认识了迭代器&#xff0c;以及在初学阶段…

autocad背景色、引线文字大小

一、改变背景 在命令行输入op&#xff0c;回车&#xff0c;弹出配置对话框&#xff1a; 二、改变引线文字大小 选中引线&#xff0c;右键选择【特性】&#xff0c;在文字选项卡中设置文字高度&#xff1a;

小程序项目创建与Vant-UI引入

一&#xff0c;创建小程序项目 AppID可先用测试号&#xff1b; 模板来源选择 ’全部来源‘ &#xff0c;’基础‘ 。模板一定JS开头的&#xff1b; vant-weapp 官网 vant-Weapp 二&#xff0c;下载vant-weapp 组件 1&#xff0c;在新项目中打开 ’调试器‘&#xff1b; 2…