使用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;
}
相关推荐
m0_738120723 小时前
CTFshow系列——命令执行web38-40
前端·windows·安全·web安全
zhoxier4 小时前
elementui el-select 获取value和label 以及 对象的方法
javascript·vue.js·elementui
是小狐狸呀4 小时前
elementUI-表单-下拉框数据选中后,视图不更新
前端·javascript·elementui
四岁半儿7 小时前
常用css
前端·css
你的人类朋友7 小时前
说说git的变基
前端·git·后端
姑苏洛言7 小时前
网页作品惊艳亮相!这个浪浪山小妖怪网站太治愈了!
前端
字节逆旅8 小时前
nvm 安装pnpm的异常解决
前端·npm
Jerry8 小时前
Compose 从 View 系统迁移
前端
GIS之路8 小时前
2025年 两院院士 增选有效候选人名单公布
前端
四岁半儿8 小时前
vue,H5车牌弹框定制键盘包括新能源车牌
前端·vue.js