增加收到新消息提示

src/layouts/components/Header/components/Message.vue

@@ -2,7 +2,7 @@
   <div class="message">
     <el-popover placement="bottom" :width="310" trigger="click">
       <template #reference>
-        <el-badge :value="msgList.length" class="item">
+        <el-badge :value="msgList.length" class="item" @click="clickMsg">
           <i :class="'iconfont icon-xiaoxi'" class="toolBar-icon"></i>
         </el-badge>
       </template>
@@ -39,6 +39,21 @@
         </el-tab-pane>
       </el-tabs> -->
     </el-popover>
+    <el-popover
+      :visible="visible"
+      placement="bottom"
+      title="收到1条新消息"
+      :width="200"
+    >
+      <template #reference>
+        <el-badge  class="item">
+          <i :class="'iconfont icon-xiaoxi'" class="toolBar-icon" style="display: none"></i>
+        </el-badge>
+      </template>
+        <div>
+          {{socketStore.msg.title}}
+        </div>
+    </el-popover>
   </div>
 </template>
 
@@ -55,6 +70,7 @@
   const router = useRouter();
   const activeName = ref('first');
   const msgList = ref([]);
+  const visible = ref(false)
   const socketStore = useSocketStore();
   console.log('socketStore', socketStore)
   const query = () => {
@@ -70,6 +86,7 @@
     });
   }
   watch(() => socketStore.msg, (newValue, oldValue) => {
+    visible.value = true
     query()
   });
   import { getAppEnvConfig } from '@/utils/env';
@@ -83,6 +100,9 @@
   if (socketStore.ws){
     socketStore.sendMsg({ aa: 44 });
   }
+  const clickMsg = () => {
+    visible.value = false
+  }
   const clickMessage = (item) => {
     readMessage({
       msgId: item.id