用el-menu和el-dropdown实现下拉菜单

秒速五厘米 2021-07-25 11:12 980阅读 0赞

参照jd页面显示效果：  
思路分析，使用 `el-menu` 实现导航菜单，使用 `el-dropdown` 实现下拉效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70]  
查看element官方文档，发现跟想要的效果有差距，如上图，我要实现hover时触发下拉菜单，并且下拉菜单为多列，每列有列名。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70 1]

此时我们可以使用容器 `<el-container>`包裹住`</el-dropdown-item>`，让第一行显示列名  
代码如下：

<template>
      <div>
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          text-color="#999"
          background-color="#e3e4e5"
        >
          <el-menu-item
            v-for="(mitem, mindex) in menuList"
            :key="mindex"
            :index="mitem.index"
          >
            <el-dropdown @command="onClick" v-if="mitem.menu">
              <span class="el-dropdown-link" v-text="mitem.menuItem">
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-container v-for="(items, index) in mitem.menu" :key="index">
                  <el-main>
                    <el-dropdown-item
                      v-if="items.sortTitle"
                      v-text="items.sortTitle"
                      disabled
                      class="dropdown-sortTitle"
                    >
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-for="(a, aindex) in items.dropdownItem"
                      :key="aindex"
                      :command="a.link"
                      v-text="a.title"
                    ></el-dropdown-item>
                  </el-main>
                </el-container>
              </el-dropdown-menu>
            </el-dropdown>
            <span
              class="el-dropdown-link"
              v-text="mitem.menuItem"
              slot="title"
              v-else
              @click="onClick(mitem.url)"
            >
            </span>
          </el-menu-item>
        </el-menu>
      </div>
    </template>
    
    <script>
    export default { 
      data() { 
        return { 
          activeIndex: "1",
          menuList: [
            { 
              index: "1",
              menuItem: "网站导航",
              menu: [
                { 
                  sortTitle: "特色主题",
                  dropdownItem: [
                    {  title: "新品首发", link: "/alert" },
                    {  title: "京东金融", link: "/alert" },
                    {  title: "全球购", link: "/alert" },
                    {  title: "国际站", link: "/alert" },
                    {  title: "京东会员", link: "/alert" },
                  ],
                },
                { 
                  sortTitle: "行业频道",
                  dropdownItem: [
                    {  title: "手机", link: "/alert" },
                    {  title: "智能数码", link: "/alert" },
                    {  title: "玩3C", link: "/alert" },
                    {  title: "电脑办公", link: "/alert" },
                    {  title: "家用电器", link: "/alert" },
                    {  title: "京鱼座智能", link: "/alert" },
                  ],
                },
                { 
                  sortTitle: "生活服务",
                  dropdownItem: [
                    {  title: "京东众筹", link: "/alert" },
                    {  title: "白条", link: "/alert" },
                    {  title: "京东金融App", link: "/alert" },
                    {  title: "京东小金库", link: "/alert" },
                  ],
                },
    
                { 
                  sortTitle: "更多精选",
                  dropdownItem: [
                    {  title: "合作招商", link: "/alert" },
                    {  title: "京东通信", link: "/alert" },
                    {  title: "京东E卡", link: "/alert" },
                    {  title: "企业采购", link: "/alert" },
                    {  title: "服务市场", link: "/alert" },
                    {  title: "办公生活馆", link: "/alert" },
                    {  title: "校园加盟", link: "/alert" },
                  ],
                },
              ],
            },
            { 
              index: "2",
              menuItem: "客户服务",
              menu: [
                { 
                  sortTitle: "客户",
                  dropdownItem: [
                    {  title: "帮助中心", link: "/alert" },
                    {  title: "售后服务", link: "/alert" },
                    {  title: "在线客服", link: "/alert" },
                    {  title: "意见建议", link: "/alert" },
                  ],
                },
                { 
                  sortTitle: "商户",
                  dropdownItem: [
                    {  title: "合作招商", link: "/alert" },
                    {  title: "成长中心", link: "/alert" },
                    {  title: "商家后台", link: "/alert" },
                    {  title: "京麦工作台", link: "/alert" },
                    {  title: "商家帮助", link: "/alert" },
                    {  title: "规则平台", link: "/alert" },
                  ],
                },
              ],
            },
            { 
              index: "3",
              menuItem: "手机京东",
            },
            { 
              index: "4",
              menuItem: "我的订单",
              url:
                "https://passport.jd.com/uc/login?
                ReturnUrl=https%3A%2F%2Forder.jd.com%2Fcenter%2Flist.action",
            },
          ],
        };
      },
      methods: { 
        onClick(url) { 
          console.log(url);
          window.location.href = url;
        },
        handleSelect(key, keyPath) { 
          console.log(key, keyPath);
        },
      },
    };
    </script>
    
    <style>
    .el-dropdown-link { 
      color: #999;
    }
    .el-dropdown-menu > .el-container { 
      width: 170px;
      float: left;
    }
    .dropdown-sortTitle { 
      font-weight: 700;
      color: #666 !important;
      border-bottom: 1px solid #ececec;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70]: /images/20210725/7e897015d7854cc79ba4bf264c556fd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70 1]: /images/20210725/37f390d6112d446f819431d1b20b6c16.png