您的当前位置：首页 element-ui中 el-popover组件如何改变背景色和小三角箭头？

element-ui中 el-popover组件如何改变背景色和小三角箭头？

来源：榕意旅游网

使用过el-popover组件的同学都会发现，直接修改背景色是修改不掉的，重新定义一个类名就可以了，代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .wrap {
            /* 背景色 */
            background: #03204e !important;
            color: #fff !important;
            border: 1px solid #0368f9 !important;
        }

        /* 下方是去除三角箭头的代码 */
        .wrap[x-placement^="bottom"] .popper__arrow::after {
            border-bottom-color: #03204e !important;
        }

        .wrap[x-placement^="bottom"] .popper__arrow {
            border-bottom-color: #0368f9 !important;
        }
    </style>
</head>

<body>
    <div id="app">

        <el-popover placement="bottom" width="300" trigger="click" popper-class="wrap">
            <el-button type="primary" slot="reference">点击</el-button>
            <div>
                popover弹窗内容
            </div>
        </el-popover>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {}
        }
    })
</script>

</html>

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文

违法及侵权请联系：TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务