el-menu-item添加红点消息提醒

小灬du

于 2024-07-18 11:42:00 发布

阅读量456

点赞数 2

文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/dmx1521856051/article/details/140518823

版权

1.在el-menu-item中添加el-badge

                            <el-menu-item
                                index="/a"
                                class="title"
                                >导航菜单
                                <el-badge value="1"></el-badge>
                            </el-menu-item>

2.设置css样式，显示红点

/* 红点显示 */
::v-deep .el-badge__content {
    width: 10px !important;
    height: 10px;
    line-height: 10px;
    color: #f56c6c;
    border-radius: 50%;
    position: absolute;
    top: -20px;
    padding: 0px;
    margin: 0px;
    font-size: 8px;
}