未读消息mysql_实现未读消息实时提醒

html部分：

{{ unreadMessageCount }}

{{ unreadMessageCount }}

import {

unreadMessage // 查询消息未读数量

} from '@/api/personalCenter'

export default {

data() {

return {

timer: '',

unreadMessageCount: 0 // 未读消息

}

},

created() {

this.getUnreadMessage()

},

mounted() {

// 调用定时任务实时获取未读消息

this.timer = setInterval(this.getUnreadMessage, 30000)

},

methods: {

// 查询未读消息数量

getUnreadMessage() {

unreadMessage().then((res) => {

if (res.data.code === '000') {

this.unreadMessageCount = res.data.content

console.log(res)

}

}).catch((err) => {

console.log(err)

})

},

handleNotic() {

this.$router.push('/personalCenterManagement/information')

}

}

}

css部分：

.bell-circleGrey {

border-radius: 50%;

height: 16px;

width: 16px;

display: inline-block;

background: #c3bebe;

vertical-align: top;

}

.bell-circleRed {

border-radius: 50%;

height: 16px;

width: 16px;

display: inline-block;

background: red;

vertical-align: top;

}

.bell-number {

display: block;

color: #FFFFFF;

height: 16px;

line-height: 16px;

text-align: center;

font-size:6px;

}