使用element的小弹框并修改css

使用el-popover来做弹框:

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

<el-popoverplacement="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.mzph.cn/pingmian/19690.shtml

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

相关文章

深度解读:Apache Kafka如何超越消息引擎的界限

你提出了一个非常有趣且广泛的话题:Apache Kafka不仅仅是一个消息引擎系统。通过了解Kafka的发展历程和现状,我们可以更全面地理解其功能和应用场景。 Kafka的发展历程 起源和初衷 Kafka最初由LinkedIn开发,目的是解决其内部对数据实时处理和分析的需求。LinkedIn当时面临…

统信UOS SSH服务升级(ubuntu20)内网

服务器配置 系统信息 SSH版本 目标版本 openssh-server_8.2p1-4_arm64.deb 因为不通互联网&#xff0c;所以所有deb包需要手动下载&#xff08;可以连接互联网的可以自动忽略手动下载deb步骤&#xff0c;直接apt-get install xxx 即可&#xff09; 升级步骤 !!!deb下载方式…

Spring Boot中如何接入jetcache缓存

Spring Boot是一个非常流行的Java开发框架&#xff0c;JetCache是一个基于注解的高性能缓存框架。在Spring Boot项目中接入JetCache缓存&#xff0c;可以提高系统的性能和并发能力。 本文将介绍如何在Spring Boot项目中使用JetCache缓存&#xff0c;并提供一个详细案例来说明如…

C++容器之链表(std::list)

目录 1 概述2 使用实例3 接口使用3.1 construct3.2 assigns3.3 iterators3.4 capacity3.5 access3.6 assign3.7 emplace_front3.8 push_front3.9 pop_front3.10 emplace_back3.11 push_back

容器技术解析

引言 容器技术是近年来快速发展的一项技术,它改变了应用程序开发、交付和运行的方式。本文将探讨容器是什么、为什么使用容器以及使用容器的好处,并将容器与虚拟机进行比较,以便更好地理解容器技术。 容器是什么? 容器是一种轻量级、独立、可移植的软件打包技术。容器将…

C++中的异常处理机制

C的异常处理机制是一种处理运行时错误的方式&#xff0c;它允许程序在检测到错误时抛出一个异常&#xff0c;并在程序的某个合适的地方捕获并处理这个异常。这种机制提高了代码的健壮性和可维护性。 异常的基本用法 抛出异常&#xff1a;使用throw关键字抛出一个异常。throw后…

Xilinx IP解析之DDS Compiler v6.0(1)—— 基础概念

前言 DDS&#xff08;Direct Digital Synthesis&#xff0c;直接数字综合器&#xff09;是一种正弦波发生器&#xff0c;在Quartus中它被称为NCO&#xff08;Numerically Controlled Oscillator&#xff0c;数控振荡器&#xff09;&#xff0c;两者是对同一功能IP核的不同称呼。…

AI数据分析:用kimi生成一个正弦波数学动画

正弦波公式: ƒ(x) a * sin(x x0) b 公式中&#xff1a; a: 决定正弦函数振动幅度的大小&#xff1b; x0:表示x开始比0拖后的弧度值&#xff1b; b&#xff1a;表示函数偏离X轴的距离&#xff1b; 对于难以理解的学生来说&#xff0c;可以用动画把这个公式直观的展现出…

thinkphp6中怎么查看ThinkPHP版本号

<?php namespace app\controller; use app\BaseController; use think\app; //这句 class Index extends BaseController { public function test() { echo App::VERSION; //还有这句 } }

3d模型移动中心点偏移太远怎么解决?---模大狮模型网

在3D建模和动画制作中&#xff0c;移动模型时确保中心点的准确性至关重要。然而&#xff0c;有时候在移动模型时&#xff0c;中心点可能会偏移得太远&#xff0c;导致操作不便甚至影响到后续的工作流程。本文将介绍在3D模型移动中心点偏移太远时的常见原因&#xff0c;并提供解…

JavaScript、Kotlin、Flutter可以开发鸿蒙APP吗?

自从去年华为宣布推出「鸿蒙Next」版本开始&#xff0c;标志着其操作系统的全面革新。鸿蒙Next将摒弃所有基于AOSP的代码&#xff0c;与Android系统彻底分离&#xff0c;实现完全自主的研发路径。通过精简约40%的冗余代码&#xff0c;鸿蒙Next致力于构建一个更高效、更流畅的系…

P1439 【模板】最长公共子序列

题目描述 给出 1,2,…,&#x1d45b; 的两个排列 &#x1d443;1​ 和 &#x1d443;2​ &#xff0c;求它们的最长公共子序列。 输入格式 第一行是一个数 &#x1d45b;。 接下来两行&#xff0c;每行为 &#x1d45b; 个数&#xff0c;为自然数 1,2,…,&#x1d45b; 的一…

QWidget成员函数功能和使用详细说明(二)(文字+用例+代码+效果图)

文章目录 1.测试工程配置2.成员函数2.1 void setFixedHeight(int h)2.2 void setFixedSize(const QSize &s)2.3 void setFixedSize(int w, int h)2.4 void setFixedWidth(int w)2.5 void setFocus(Qt::FocusReason reason)2.6 void setFocusPolicy(Qt::FocusPolicy policy)…

揭秘数字货币:比特币背后的技术逻辑

随着科技的飞速发展,数字货币作为一种新兴的经济形态,已经逐渐走入我们的视野。其中,比特币无疑是这一领域的佼佼者。那么,比特币背后的技术逻辑究竟是什么呢?本文将为您揭开这一神秘面纱。 一、区块链技术:比特币的基石 比特币的核心技术就是区块链(Blockchain)。区块…

六一儿童节与AIGC:科技与童趣的奇妙融

随着人工智能生成内容&#xff08;AIGC&#xff09;技术的发展&#xff0c;越来越多的应用和网站专门为儿童提供学习、游戏和绘画方面的支持。这些平台不仅能够提高孩子们的学习兴趣&#xff0c;还能激发他们的创造力。在六一儿童节即将到来之际&#xff0c;让我们来介绍几款利…

C++的复制和拷贝构造函数

什么复制&#xff0c;看下面这个例子&#xff0c;来理解什么是复制 第一个例子 int main() {int a 2;int b a;//实际是创建一个副本&#xff0c;他俩是独立的变量&#xff0c;它们有不同的内存地址&#xff08;复制&#xff09;b 3;//是可以修改的std::cin.get();}第二个例…

Nginx配置文件中静态资源文件禁止通过目录查看

Nginx配置文件中静态资源文件禁止通过目录查看 nginx作为文件服务器访问静态资源时&#xff0c;默认是可以通过目录路径查看该目录下的所有文件的&#xff0c;这样会被检查出漏洞&#xff0c;容易造成静态资源泄露。 方案 location /images {autoindex off;autoindex_exact_…

03-树3 Tree Traversals Again(浙大数据结构PTA习题)

03-树3 Tree Traversals Again 分数 25 作者 陈越 An inorder binary tree traversal can be implemented in a non-recursive way with a stack. For example, suppose that when a 6-node binary tree (with the keys numbered from 1 to 6) is traversed, th…

C++ 变量类型思维导图梳理

目前了解了前端、后端&#xff0c;准备再学习一门稍微底层的语言&#xff0c;整好自己年龄也比较大了&#xff0c;学个C语言&#xff0c;等以后哪天找不到前后端的工作了&#xff0c;就去做个少儿编程老师&#xff0c;为切换赛道做准备。 1、数据类型 定义&#xff1a;给变量…

LeetCode739:每日温度

题目描述 给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温度出现在几天后。如果气温在这之后都不会升高&#xff0c;请在该位置用 0 来代替。 解题思想 使用单…