【无标题】如何完成一个消息提醒页面

奋斗者格洛古

已于 2023-08-03 16:33:20 修改

阅读量143

点赞数

文章标签： vue.js javascript 前端

于 2023-08-03 16:32:00 首次发布

本文链接：https://blog.csdn.net/m0_57005111/article/details/132086710

版权

本案例是使用气泡卡组件配合选项卡跟徽章完成消息提示页面；废话不多说，直接上代码

 <el-popover  placement="bottom" width="300" trigger="hover">
                            <el-tabs  @tab-click="handleClickMessages" >
                                    <el-tab-pane label="全部消息" name="first">全部消息</el-tab-pane>
                                     <el-tab-pane label="已读消息" name="second">已读消息</el-tab-pane>
                                     <el-tab-pane label="未读消息" name="third">
                                        <template v-slot:label>
                                     <!-- 定义未读消息，并添加徽章标记 -->
                                            <el-badge  :value="badgeCount1">
                                               <span>未读消息</span>
                                            </el-badge>
                                       </template>
                                      <p>{{'这是未读消息的内容'}}</p> 
                                   </el-tab-pane>
                            </el-tabs>
                            <el-button style="background-color: transparent; border: none;" slot="reference">
                          
                                 <el-badge is-dot :max="99" class="item">
                                    <img class="myWarning" src="../../小铃铛提示图片.png" style="width: 23px;-webkit-app-region: no-drag ;cursor:pointer;">
                                     >
                                </el-badge>
                            </el-button>
                        </el-popover>