优化全部菜单

src/App.vue

@@ -98,6 +98,10 @@ html {
   font-size: var(--el-font-size-base) !important;
 }
 
+.el-popover__title {
+  font-size: var(--el-font-size-base) !important;
+}
+
 .el-dialog__header {
   background-color: #555;
   margin-right: 0 !important;

src/views/home/components/goods.vue

@@ -7,11 +7,23 @@
                 <el-text>{{ item.name }}</el-text>
             </div>
         </div>
-        <div class="all">
+        <el-popover trigger="click" :width="800" title="全部分类" :visible="showPopover">
-            <el-icon class="icon">
+            <template #reference>
-                <Menu />
+                <div class="all" @click="showMoreMenu">
-            </el-icon>
+                    <el-icon class="icon" :class="{ active: showPopover }">
-        </div>
+                        <Menu />
+                    </el-icon>
+                </div>
+            </template>
+            <template #default>
+                <div class="popover_wrap">
+                    <el-button :plain="categorysActive != index" type="primary" v-for="(item, index) in categorys"
+                        :key="item.id" @click="changeCategory(item, index)">
+                        {{ item.name }}
+                    </el-button>
+                </div>
+            </template>
+        </el-popover>
     </div>
     <div class="search_wrap">
         <div class="input">
@@ -64,10 +76,17 @@ const commdityName = ref('')
 const originalGoods = ref([])
 const goodsList = ref([])
 
+const showPopover = ref(false)
+
 const inputChange = _.debounce(function () {
     productqueryCommodityInfoAjax()
 }, 500)
 
+// 显示全部分类
+function showMoreMenu() {
+    showPopover.value = !showPopover.value
+}
+
 // 显示sku
 function showSkuHandle(item) {
     if (item.typeEnum == 'sku') {
@@ -88,6 +107,7 @@ function changeShopListType() {
 
 // 切换分类
 function changeCategory(item, index) {
+    showPopover.value = false
     categorysActive.value = index
     if (item.id) {
         goodsList.value = []
@@ -143,6 +163,12 @@ onMounted(async () => {
 </script>
 
 <style scoped lang="scss">
+.popover_wrap {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 20px 0;
+}
+
 .header {
     display: flex;
     height: 80px;
@@ -202,6 +228,11 @@ onMounted(async () => {
     .icon {
         color: #555;
         font-size: 20px;
+        transition: all .2s ease-in-out;
+
+        &.active {
+            transform: rotate(45deg)
+        }
     }
 }