使用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;
}
相关推荐
凡大来啦15 小时前
v-for渲染的元素上使用ref
前端·javascript·vue.js
道可到15 小时前
前端开发的生存法则:如何从“像素工人”进化为价值创造者?
前端
eggcode15 小时前
Vue前端开发学习的简单记录
vue.js·学习
中微子15 小时前
TypeScript 泛型与 ReturnType 详解
前端
我叫张得帅15 小时前
从零开始的前端异世界生活--003--“探究Domain,DNS,Hosting”
前端
一大树15 小时前
H5在不同操作系统与浏览器中的兼容性挑战及全面解决方案
前端·ios
中微子15 小时前
TypeScript never 类型详解
前端
Strawberry_rabbit15 小时前
路由配置中的svg图标如何匹配
前端·css
练习前端两年半15 小时前
🔍 你真的会二分查找吗?
前端·javascript·算法
用户529807978249815 小时前
Vue 为何自动加载 index.vue?
前端