src/layout/components/Navbar.vue

@@ -13,33 +13,10 @@
         </el-badge>
       </span>-->
       <span class="top-version">v1.0.0</span>
-      <span style="cursor: pointer;" @click="toMyCartPage">
+      <el-popover
-        <el-badge :value="totalCartCount >= 99 ? '99+' : totalCartCount" class="item">
+        placement="right"
-          <el-tooltip class="item" effect="light" content="消息通知" placement="bottom">
+        width="400"
-            <i class="el-icon-bell"></i>
+        trigger="hover">
-          </el-tooltip>
-        </el-badge>
-      </span>
-
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
-        <div class="avatar-wrapper">
-          <span style="font-size: 16px"><i class="el-icon-user"/> {{nickName}}</span>
-          <i class="el-icon-caret-bottom" />
-        </div>
-        <el-dropdown-menu slot="dropdown">
-          <router-link to="/user/profile">
-            <el-dropdown-item>个人中心</el-dropdown-item>
-          </router-link>
-          <el-dropdown-item divided @click.native="logout">
-            <span>退出登录</span>
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-
-      <el-dialog
-        title="消息通知"
-        :visible.sync="msgVisible"
-        width="40%">
         <el-table
           :data="msgTableData"
           border
@@ -58,7 +35,31 @@
             </template>
           </el-table-column>
         </el-table>
-      </el-dialog>
+        <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">
+          <span style="font-size: 16px"><i class="el-icon-user"/> {{nickName}}</span>
+          <i class="el-icon-caret-bottom" />
+        </div>
+        <el-dropdown-menu slot="dropdown">
+          <router-link to="/user/profile">
+            <el-dropdown-item>个人中心</el-dropdown-item>
+          </router-link>
+          <el-dropdown-item divided @click.native="logout">
+            <span>退出登录</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+
     </div>
   </div>
 </template>