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

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

相关推荐
你的电影很有趣22 分钟前
lesson77:Vue组件开发指南:从基础使用到高级通信
javascript·vue.js·1024程序员节
7ayl6 小时前
Vue3 - Reactivity的核心流程
前端·vue.js
Z_B_L7 小时前
问题记录--elementui中el-form初始化表单resetFields()方法使用时出现的问题
前端·javascript·vue.js·elementui·1024程序员节
十一吖i13 小时前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
菜鸟una17 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
桃子不吃李子18 小时前
nextTick的使用
前端·javascript·vue.js
小二·20 小时前
从零开始:使用 Vue-ECharts 实现数据可视化图表功能
vue.js·信息可视化·echarts
前端 贾公子20 小时前
Element Plus组件v-loading在el-dialog组件上使用无效
前端·javascript·vue.js
qq_4198540520 小时前
自定义组件(移动端下拉多选)中使用 v-model
前端·javascript·vue.js