完成移动端的menu抽屉组件

components/header.vue

@@ -36,7 +36,12 @@
             placeholder="SEARCH"
           >
           </b-form-input>
-          <img class="ml-2" src="~assets/image/icon/menu.png" :alt="$t('common.menu')" />
+          <img 
+            class="ml-2" 
+            src="~assets/image/icon/menu.png" 
+            :alt="$t('common.menu')" 
+            @click="$refs.menuDrawerRef.drawer=true"
+          />
         </div>
       </div>
 
@@ -51,11 +56,15 @@
         </nuxt-link>
       </nav>
     </header>
+
+    <MenuDrawer ref="menuDrawerRef" />
   </div>
 </template>
 
 <script>
+import MenuDrawer from './menu-drawer.vue';
 export default {
+  components: { MenuDrawer },
   data() {
     return {
       searchVal: '',
@@ -125,7 +134,6 @@ nav {
   .nav-link-item {
     height: 100%;
     padding: 0 1.4375rem;
-    z-index: 99999;
     >a {
       color: #151516;
     }

components/menu-drawer.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-drawer
+    :visible.sync="drawer"
+    direction="ltr"
+    :with-header="false"
+    size="50%"
+  >
+    <div class="p-4">
+      <img class="mb-3" src="../assets/image/mob-logo.png" alt="logo" />
+      <el-tree
+        :data="menuList"
+        node-key="id"
+        highlight-current
+        @node-click="handleNodeClick"
+        :props="{
+          children: 'children',
+          label: 'name'
+        }"
+      />
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+
+export default {
+  name: 'MenuDrawer',
+  data() {
+    return {
+      drawer: false,
+      menuList: [
+        { name: this.$t('menu.Home'), href: '/' },
+        { name: this.$t('menu.AboutUs'), href: '/abou-us' },
+        { 
+          name: this.$t('menu.Products'), 
+          href: undefined,
+          children: [
+            { name: this.$t('menu.Products'), href: '/products' },
+            { name: this.$t('menu.Products'), href: '/products' },
+            { name: this.$t('menu.Products'), href: '/products' },
+            { name: this.$t('menu.Products'), href: '/products' },
+          ]
+        },
+        { name: this.$t('menu.News'), href: '/news' },
+        { name: this.$t('menu.Exhibition'), href: '/exhibition' },
+        { name: this.$t('menu.ContactUs'), href: '/contact-us' },
+        { name: this.$t('menu.Feedback'), href: '/feedback' },
+      ]
+    }
+  },
+  methods: {
+    handleNodeClick(data) {
+      if (data.href) {
+        this.$router.push(data.href)
+        this.drawer = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .is-current {
+  > .el-tree-node__content {
+    color: #015fe8;
+  }
+}
+
+</style>

nuxt.config.js

@@ -59,7 +59,7 @@ export default {
     '~plugins/axios',
     { src: "~plugins/router.js", ssr: true },
     { src: "~plugins/i18n.js", ssr: true },
-    { src: "~plugins/element-tree.js", ssr: true },
+    { src: "~plugins/element-ui.js", ssr: true },
     { src: "~plugins/vue-piczoom.js", ssr: false },
     { src: "~plugins/swiper.js", ssr: false },
   ],

plugins/element-ui.js

@@ -1,7 +1,9 @@
 import Vue from 'vue'
 import { 
   // 添加你需要的其他组件
-  Tree
+  Tree,
+  Drawer
 } from 'element-ui'
 
-Vue.use(Tree)
+Vue.use(Tree)
+Vue.use(Drawer)