使用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;
}
相关推荐
盟接之桥7 分钟前
盟接之桥--说制造:从“找缝隙”到“一万米深”——庖丁解牛式的制造业精进之道
大数据·前端·数据库·人工智能·物联网·制造
巴拉巴拉~~9 分钟前
Flutter 通用滑块组件 CommonSliderWidget:单值 / 范围 + 刻度 + 标签 + 样式自定义
开发语言·前端·javascript
期待のcode32 分钟前
验证码实现
java·vue.js
韭菜炒大葱33 分钟前
现代前端开发工程化:Vue3 + Vite 带你从 0 到 1 搭建 Vue3 项目🚀
前端·vue.js·vite
老华带你飞34 分钟前
志愿者服务管理|基于springboot 志愿者服务管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·spring
栀秋66641 分钟前
面试常考的最长递增子序列(LIS),到底该怎么想、怎么写?
前端·javascript·算法
Melrose43 分钟前
Flutter - 使用Jaspr来构建SEO友好网站
前端·flutter
有意义44 分钟前
让宠物打冰球!手把手教你用 Coze 多模态工作流 + Vue 3 打造 AI 拟人生成器
vue.js·前端工程化·coze
有点笨的蛋1 小时前
Vue3 项目:宠物照片变身冰球运动员的 AI 应用
前端·vue.js
盖头盖1 小时前
【nodejs中的ssrf】
前端