使用element的小弹框并修改css

使用el-popover来做弹框:

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

html 复制代码
<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样式:

css 复制代码
.popover {
    padding: 14px 10px 17px 10px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
}

.popover .popper__arrow {
    display: none !important;
}
相关推荐
Larcher11 小时前
JS 变量提升:代码没动,为什么执行顺序就变了?
前端·javascript·前端框架
yingyima11 小时前
MySQL 事件调度器速查:核心语法与实战代码
前端
要写代码11 小时前
2026-Css忘掉一切、归零再启
css
GISer_Jing11 小时前
Claude Code多Agent架构深度剖析
前端·人工智能·架构·自动化
comphub11 小时前
comp-hub:让你的 Vue 业务组件真正"活"起来
前端
AI砖家12 小时前
Claude Code 跳过确认完全指南:让 AI 自己完成开发任务
前端·人工智能·python·ai编程·代码规范
KaMeidebaby12 小时前
卡梅德生物技术快报|Pull Down 实验在 lncRNA - 蛋白互作机制研究中的应用实例解析
大数据·前端·架构·spark·新浪微博
锋行天下12 小时前
让nginx网关扛下所有攻击
前端·后端·nginx
广州华水科技12 小时前
单北斗GNSS是什么?主要有哪些形变监测应用?
前端
边界条件╝13 小时前
微前端进阶(二)
前端