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

更多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、效果图如下

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

相关推荐
我命由我123452 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
海天胜景2 小时前
vue3 当前页面方法暴露
前端·javascript·vue.js
天天向上10244 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y4 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁4 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
写不出来就跑路5 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
1undefined26 小时前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
paopaokaka_luck6 小时前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
用户3802258598246 小时前
vue3源码解析:依赖收集
前端·vue.js
wzyoung7 小时前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js