左侧header改造:0.0.3

src/components/newLayout/components/menu.vue

@@ -1,8 +1,17 @@
 <template>
-  <a-popover placement="rightBottom" overlay-class-name="head-popover">
-    <!--    <svg-icon class="menu-wrapper-icon" icon-class="question" />-->
-
-    <template slot="content">
+  <span style="margin-top: auto">
+    <el-popover
+      placement="right-end"
+      trigger="hover"
+      width="385"
+      :open-delay="200"
+    >
+      <!--  overlay-class-name="head-popover"  -->
+      <!--    <svg-icon class="menu-wrapper-icon" icon-class="question" />-->
+
+      <!--    <template slot="content">-->
+      <!--      -->
+      <!--    </template>-->
       <div class="menu-wrapper">
         <div
           v-for="item in menuBaseData"
@@ -16,34 +25,40 @@
           >
             {{ item.name }}
           </div>
-          <a-row
-            v-if="item.menuList.length"
-            :gutter="[24, 24]"
-            class="box"
-            style="margin: 0"
-          >
-            <a-col v-for="elm in item.menuList" :key="elm.key" :span="8" class="item-wrapper" @click="goToPage(elm)">
-              <span class="custom-icon-wrapper">
-                <i
-                  class="iconfont icon"
-                  :class="elm.menuBase.class"
-                  :style="{
-                    fontSize: '20px',
-                    color:
-                      elm.menuBase.color && !elm.menuBase.class
-                        ? elm.menuBase.color
-                        : 'transparent'
-                  }"
-                >{{ translateHtmlCharater(elm.menuBase.icon) }}</i>
+          <el-row v-if="item.menuList.length" class="box" style="margin: 0">
+            <el-col
+              v-for="elm in item.menuList"
+              :key="elm.key"
+              :span="8"
+              class="item-wrapper"
+            >
+              <span @click.stop="goToPage(elm)">
+                <span class="custom-icon-wrapper">
+                  <i
+                    class="iconfont icon"
+                    :class="elm.menuBase.class"
+                    :style="{
+                      fontSize: '20px',
+                      color:
+                        elm.menuBase.color && !elm.menuBase.class
+                          ? elm.menuBase.color
+                          : 'transparent'
+                    }"
+                    >{{ translateHtmlCharater(elm.menuBase.icon) }}</i
+                  >
+                </span>
+                <div class="name">{{ elm.name }}</div>
               </span>
-              <div class="name">{{ elm.name }}</div>
-            </a-col>
-          </a-row>
+            </el-col>
+          </el-row>
         </div>
       </div>
-    </template>
-    <i class="iconfont icon menu-wrapper-icon">&#x11911;</i>
-  </a-popover>
+      <span
+slot="reference"
+        ><i class="iconfont icon menu-wrapper-icon">&#x11911;</i></span
+      >
+    </el-popover>
+  </span>
 </template>
 
 <script>

src/main.js

@@ -6,9 +6,9 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 // import locale from 'element-ui/lib/locale/lang/en' // lang i18n 英文
 
-import { DatePicker, Popover, Row, Col } from 'ant-design-vue'
+import { DatePicker, Popover } from 'ant-design-vue'
 
-Vue.use(DatePicker).use(Popover).use(Row).use(Col)
+Vue.use(DatePicker).use(Popover)
 
 import '@/styles/index.scss' // global css