component-message

一款基于 Vue 框架和 Element-UI 组件库开发的消息数量以及消息列表组件

component-message 有两种组件:

• 消息铃铛(ComponentMessage)
• 消息列表包含未读/已读/全部(ComponentMessageList)

install 安装

    npm i component-message --save

use 使用

在 main.js 中写入下面的代码

import Vue from 'vue'
import ComponentMessage from 'component-message' //引入组件
import 'component-message/styles/common-message.css' //引入样式
Vue.use(ComponentMessage)

接下来，你就可以在页面中使用 ComponentMessage

消息列表 ComponentMessageList

<template>
  <ComponentMessageList
    ref="ComponentMessageList"
    :token="token"
    :url="url"
    :systemCodeCurrent="systemCodeCurrent"
    :LoginId="LoginId"
    :UserCode="UserCode"
  />
</template>
<script>
export default {
  data() {
    return {
      token: '', //登录的token
      url: 'http://192.168.70.158:8800/api', //api地址，例如：http://192.168.70.158:8800/api
      LoginId: '', //api请求头，这里不是token，而是通过接口（/user/isLogin）返回的LoginId参数
      systemCodeCurrent: '', //当前系统编号
      UserCode: '' //登录人的编号/账号
    }
  },
  methods: {
    // 可以自行调用刷新的方法
    sx() {
      this.$refs.ComponentMessageList.refresh()
    }
  }
}
</script>

消息铃铛数量 ComponentMessage

<template>
  <ComponentMessage
    :url="url"
    :token="token"
    :systemCodeCurrent="systemCodeCurrent"
    :LoginId="LoginId"
    :PersonCode="UserCode"
    @checkMoreMsg="checkMoreMsg"
  />
</template>
<script>
export default {
  data() {
    return {
      token: '', //登录的token
      url: 'http://192.168.70.158:8800/api', //api地址，例如：http://192.168.70.158:8800/api
      LoginId: '', //api请求头，这里不是token，而是通过接口（/user/isLogin）返回的LoginId参数
      systemCodeCurrent: '', //当前系统编号
      UserCode: '' //登录人的编号/账号
    }
  },
  methods: {
    // 查看更多，跳转到更多列表的页面
    checkMoreMsg() {
      this.$router.push({
        name: ''
      })
    }
  }
}
</script>