ruoyi-nbcio项目增加右上角的消息提醒

宁波阿成2023-09-22 15:57

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

因为以后流程的通知需要提醒，所以右上角需要增加消息提醒。

1、增加右上角的按钮与信息

javascript 复制代码

<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的组件

javascript 复制代码

<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、增加上面消息跳转的路由

javascript 复制代码

{
    path: '/system',
    component: Layout,
    hidden: true,
    redirect: 'noredirect',
    children: [
      {
        path: 'notice',
        component: () => import('@/views/system/notice/index'),
        name: 'notice',
        meta: { title: '通知通告', icon: 'message' }
      }
    ]
  },

4、效果图如下

点击上面消息出现下面界面，以后还需要增加提示消息数量的红色数字。