使用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;
}
相关推荐
everyStudy1 小时前
前端五种排序
前端·算法·排序算法
甜兒.2 小时前
鸿蒙小技巧
前端·华为·typescript·harmonyos
Jiaberrr6 小时前
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
everyStudy6 小时前
JS中判断字符串中是否包含指定字符
开发语言·前端·javascript
城南云小白6 小时前
web基础+http协议+httpd详细配置
前端·网络协议·http
前端小趴菜、6 小时前
Web Worker 简单使用
前端
web_learning_3216 小时前
信息收集常用指令
前端·搜索引擎
tabzzz6 小时前
Webpack 概念速通:从入门到掌握构建工具的精髓
前端·webpack
LvManBa6 小时前
Vue学习记录之六(组件实战及BEM框架了解)
vue.js·学习·rust
200不是二百6 小时前
Vuex详解
前端·javascript·vue.js