700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Element UI三十七NavMenu导航菜单

Element UI三十七NavMenu导航菜单

时间:2023-09-16 08:16:01

相关推荐

Element UI三十七NavMenu导航菜单

简介

el-menu:该组件为网站提供导航功能的菜单。其属性表入下,

el-submenu:子菜单,其属性表如下,

el-menu-item:菜单项,其属性入下,

el-menu-group:为菜单分组,其属性表如下,

顶栏

通过mode属性可将导航菜单设置为水平模式,默认垂直。使用el-submenu组件可生成二级菜单。通过background-color、text-color和active-text-color属性可分别设置菜单的背景色、文字颜色和当前激活菜单的文字颜色。通过default-active设置默认激活的菜单。通过disabled属性可禁用某菜单项。下例为一个适用广泛的基础示例:

<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="4"><!--target属性指定链接在何处显示(是在新窗口还是原窗口),以下在新窗口打开,默认原窗口--><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item></el-menu><div></div><el-menu :default-active="activeIndex2" mode="horizontal" @select="handleSelect"background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="4"><!--target属性指定链接在何处显示(是在新窗口还是原窗口),以下在新窗口打开,默认原窗口--><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item></el-menu><script>export default {data() {return {activeIndex: '1',activeIndex2: '1'};},methods: {//自动传入菜单项的index和选中菜单项的indexPathhandleSelect(index,indexPath){console.log(index,indexPath);}}}</script>

侧栏

使用el-menu-item-group组件可实现菜单分组,分组名可通过title属性或子组件的slot属性设置。

折叠

通过collapse属性可将菜单收起。

官方文档

代码实例:“E:\sublime text 3\Sublime Text 3\itemname2\element-starter”

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。