1.0.0-beta.9 • Published 1 year ago
component-message v1.0.0-beta.9
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>
1.0.0-beta.9
1 year ago
1.0.0-beta.8
1 year ago
1.0.0-beta.7
1 year ago
1.0.0-beta.6
1 year ago
1.0.0-beta.5
1 year ago
1.0.0-beta.4
1 year ago
1.0.0-beta.3
1 year ago
1.0.0-beta.1
1 year ago