更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio
因为以后流程的通知需要提醒，所以右上角需要增加消息提醒。
1、增加右上角的按钮与信息
<div class="right-menu"> <template v-if="device!=='mobile'"> <search id="header-search" class="right-menu-item" /> <el-tooltip content="消息" effect="dark" placement="bottom"> <message id="message" class="right-menu-item hover-effect" /> </el-tooltip> <el-tooltip content="源码地址" effect="dark" placement="bottom"> <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" /> </el-tooltip>
2、增加一个Message的组件
<template> <div> <svg-icon icon-class="message" @click="toNotice" /> </div> </template> <script> export default { name: 'Message', data() { return { } }, methods: { toNotice () { this.$router.push({ path: '/system/notice' }) //this.msgCount = 0 }, } } </script>
3、增加上面消息跳转的路由
{ path: '/system', component: Layout, hidden: true, redirect: 'noredirect', children: [ { path: 'notice', component: () => import('@/views/system/notice/index'), name: 'notice', meta: { title: '通知通告', icon: 'message' } } ] },
4、效果图如下
点击上面消息出现下面界面，以后还需要增加提示消息数量的红色数字。
