src/layout/components/Navbar.vue

@@ -13,13 +13,37 @@
         </el-badge>
       </span>-->
       <span class="top-version">v1.0.0</span>
-      <span style="cursor: pointer;" @click="toMyCartPage">
+      <el-popover
+        placement="right"
+        width="400"
+        trigger="hover">
+        <el-table
+          :data="msgTableData"
+          border
+          style="width: 100%">
+          <el-table-column
+            prop="name"
+            label="消息通知类型">
+          </el-table-column>
+          <el-table-column
+            prop="count"
+            label="消息通知数量">
+          </el-table-column>
+          <el-table-column label="操作" width="100" >
+            <template slot-scope="scope">
+              <el-button type="text" @click="handleToMsgView(scope.row)">前往查看</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <span style="cursor: pointer;" @mouseover="toMyCartPage" slot="reference">
           <el-badge :value="totalCartCount >= 99 ? '99+' : totalCartCount" class="item">
             <el-tooltip class="item" effect="light" content="消息通知" placement="bottom">
               <i class="el-icon-bell"></i>
             </el-tooltip>
           </el-badge>
        </span>
+      </el-popover>
+
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
@@ -36,29 +60,6 @@
         </el-dropdown-menu>
       </el-dropdown>
 
-      <el-dialog
-        title="消息通知"
-        :visible.sync="msgVisible"
-        width="40%">
-        <el-table
-          :data="msgTableData"
-          border
-          style="width: 100%">
-          <el-table-column
-            prop="name"
-            label="消息通知类型">
-          </el-table-column>
-          <el-table-column
-            prop="count"
-            label="消息通知数量">
-          </el-table-column>
-          <el-table-column label="操作" width="100" >
-            <template slot-scope="scope">
-              <el-button type="text"@click="handleToMsgView(scope.row)">前往查看</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-dialog>
     </div>
   </div>
 </template>