使用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;
}
相关推荐
海上彼尚2 分钟前
Vue3中全局使用Sass变量方法
前端·css·sass
ᥬ 小月亮14 分钟前
TypeScript基础
前端·javascript·typescript
鱼樱前端20 分钟前
Vue3+TS 视频播放器组件封装(Video.js + Hls.js 最佳组合)
前端·javascript·vue.js
烛阴43 分钟前
JavaScript 函数进阶之:Rest 参数与 Spread 语法(二)
前端·javascript
GISer_Jing43 分钟前
ES6回顾:闭包->(优点:实现工厂函数、记忆化和异步实现)、(应用场景:Promise的then与catch的回调、async/await、柯里化函数)
前端·ecmascript·es6
天天向上102444 分钟前
vue项目清理node_modules缓存
前端·vue.js·缓存
Aphasia3111 小时前
组件通信的九种方式🤔
前端·vue.js
Foyo Designer1 小时前
【 <一> 炼丹初探:JavaWeb 的起源与基础】之 JavaWeb 项目的部署:从开发环境到生产环境
前端·经验分享·程序人生·firefox·学习方法·改行学it
洪洪呀1 小时前
uni-app & vue2 记住密码功能
前端·javascript·uni-app
noravinsc2 小时前
‌HTTP 401错误
前端·javascript·vue.js