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

参照jd页面显示效果：
思路分析，使用 el-menu 实现导航菜单，使用 el-dropdown 实现下拉效果

查看element官方文档，发现跟想要的效果有差距，如上图，我要实现hover时触发下拉菜单，并且下拉菜单为多列，每列有列名。

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

<template><div><el-menuclass="el-menu-demo"mode="horizontal"text-color="#999"background-color="#e3e4e5"><el-menu-itemv-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-itemv-if="items.sortTitle"v-text="items.sortTitle"disabledclass="dropdown-sortTitle"></el-dropdown-item><el-dropdown-itemv-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><spanclass="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>

用el-menu和el-dropdown实现下拉菜单相关推荐

vue、Dropdown 下拉菜单、Dropdown属性事件、vue Dropdown 全部下拉菜单、vue Dropdown 全部属性事件
vue.Dropdown 下拉菜单.Dropdown属性事件.vue Dropdown 全部下拉菜单.vue Dropdown 全部属性事件设计规则何时使用代码演示 1.基本 2.右键菜单 3. ...
element Dropdown二级下拉菜单
开发中经常遇见二级菜单开发,但是element中的Dropdown下拉菜单demo没有二级,所以在此记录一下. 此代码适用一级菜单二级菜单.样式需自己重新调整. 效果如图: html 代码 < ...
python3 循环获取checkbutton_Python3 tkinter基础 Menu add_checkbutton 多选的下拉菜单
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda : 4.5.11 typesetting : Markdown ...
关于element-plus的Dropdown 下拉菜单属性的修改
** 关于element-plus的dropdown的下拉菜单的样式修改 ** 因为所做的界面和element-plus所提供的颜色不相搭配,所以进行了颜色的修改 1.首先是下拉框本身可以看见原本的 ...
BootStrap3 下拉菜单dropdown
目录官方地址基本用法向上弹出菜单菜单项默认打开菜单项对齐左对齐右对齐带标题的下拉菜单带分割线的下拉菜单激活的菜单项禁用的菜单项整体代码官方地址 https://v3.boot ...
Bootstrap的下拉菜单
下拉菜单引入Boostrap的CSS和JS <div class="dropdown"><a data-toggle="dropdown" ...
css菜单下拉菜单_在CSS中创建下拉菜单
css菜单下拉菜单 CSS | 创建下拉菜单 (CSS | Creating Dropdown) Trivia: 琐事: We know the importance of navigation ba ...
linux boot菜单列表,Bootstrap 下拉菜单（Dropdowns）简介
Bootstrap 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与下拉菜单(Dropdown) JavaScript 插件的互动来实现. 如需使用下拉菜单,只需要在 class ...
bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠
分页: 分页功能是当遇到数据很多时,如果都放到一个页面上,那么找起来很不方便,而且不利于性能.此时采用分页功能就能很好的优化用户体验,可是如果自己开发分页功能,那么就会影响开发效率,bootstrap ...
android studio 下拉菜单,android studio 的下拉菜单Spinner使用详解
一.认识Spinner Spinner其实就是一个列表选择框.不过Android的列表选择框并不需要显示下拉列表,而是相当于弹出一个菜单供用户选择. Spinner 与 Gallery 都继承了Abs ...

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

用el-menu和el-dropdown实现下拉菜单相关推荐

最新文章

热门文章