cool-admin-vue/cool/modules/chat/components/notice.vue

<template>
	<li class="app-tools-notice" @click="openChatBox">
		<el-badge :value="number" :hidden="number === 0">
			<i class="el-icon-message-solid"></i>
		</el-badge>

		<!-- 聊天盒子 -->
		<cl-chat ref="chat" @message="updateNum"></cl-chat>
	</li>
</template>

<script>
export default {
	name: "cl-chat-notice",

	data() {
		return {
			visible: false,
			number: 0
		};
	},

	created() {
		this.refresh();
	},

	methods: {
		refresh() {
			this.$service.im.session.unreadCount().then((res) => {
				this.number = Number(res);
			});
		},

		updateNum(isOpen) {
			this.number += isOpen ? 0 : 1;
		},

		openChatBox() {
			this.$refs["chat"].open();
			this.number = 0;
		}
	}
};
</script>

<style lang="scss" scoped>
.app-tools-notice {
	position: relative;

	.el-icon-message-solid {
		font-size: 20px;
	}

	/deep/.el-badge {
		transform: scale(0.8);
	}
}
</style>