• ElementUI浅尝辄止32：NavMenu 导航菜单

    为网站提供导航功能的菜单。常用于网站平台顶部或侧边栏菜单导航。

    1.如何使用？顶栏

    1. /*导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。*/
    2.  
    3. default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    4.   <el-menu-item index="1">处理中心el-menu-item>
    5.   <el-submenu index="2">
    6.     <template slot="title">我的工作台template>
    7.     <el-menu-item index="2-1">选项1el-menu-item>
    8.     <el-menu-item index="2-2">选项2el-menu-item>
    9.     <el-menu-item index="2-3">选项3el-menu-item>
    10.     <el-submenu index="2-4">
    11.       <template slot="title">选项4template>
    12.       <el-menu-item index="2-4-1">选项1el-menu-item>
    13.       <el-menu-item index="2-4-2">选项2el-menu-item>
    14.       <el-menu-item index="2-4-3">选项3el-menu-item>
    15.     el-submenu>
    16.   el-submenu>
    17.   <el-menu-item index="3" disabled>消息中心el-menu-item>
    18.   <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理a>el-menu-item>
    20. <div class="line">div>
    21. <el-menu
    22.   :default-active="activeIndex2"
    23.   class="el-menu-demo"
    24.   mode="horizontal"
    25.   @select="handleSelect"
    26.   background-color="#545c64"
    27.   text-color="#fff"
    28.   active-text-color="#ffd04b">
    29.   <el-menu-item index="1">处理中心el-menu-item>
    30.   <el-submenu index="2">
    31.     <template slot="title">我的工作台template>
    32.     <el-menu-item index="2-1">选项1el-menu-item>
    33.     <el-menu-item index="2-2">选项2el-menu-item>
    34.     <el-menu-item index="2-3">选项3el-menu-item>
    35.     <el-submenu index="2-4">
    36.       <template slot="title">选项4template>
    37.       <el-menu-item index="2-4-1">选项1el-menu-item>
    38.       <el-menu-item index="2-4-2">选项2el-menu-item>
    39.       <el-menu-item index="2-4-3">选项3el-menu-item>
    40.     el-submenu>
    41.   el-submenu>
    42.   <el-menu-item index="3" disabled>消息中心el-menu-item>
    43.   <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理a>el-menu-item>
    44. el-menu>
    45.  
    46. <script>
    47.   export default {
    48.     data() {
    49.       return {
    50.         activeIndex: '1',
    51.         activeIndex2: '1'
    52.       };
    53.     },
    54.     methods: {
    55.       handleSelect(key, keyPath) {
    56.         console.log(key, keyPath);
    57.       }
    58.     }
    59.   }
    60. script>

    2.侧栏

    垂直菜单，可内嵌子菜单。

    1. //通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定。
    2.  
    3. class="tac">
    4.   <el-col :span="12">
    5.     <h5>默认颜色h5>
    6.     <el-menu
    7.       default-active="2"
    8.       class="el-menu-vertical-demo"
    9.       @open="handleOpen"
    10.       @close="handleClose">
    11.       <el-submenu index="1">
    12.         <template slot="title">
    13.           <i class="el-icon-location">i>
    14.           <span>导航一span>
    15.         template>
    16.         <el-menu-item-group>
    17.           <template slot="title">分组一template>
    18.           <el-menu-item index="1-1">选项1el-menu-item>
    19.           <el-menu-item index="1-2">选项2el-menu-item>
    20.         el-menu-item-group>
    21.         <el-menu-item-group title="分组2">
    22.           <el-menu-item index="1-3">选项3el-menu-item>
    23.         el-menu-item-group>
    24.         <el-submenu index="1-4">
    25.           <template slot="title">选项4template>
    26.           <el-menu-item index="1-4-1">选项1el-menu-item>
    27.         el-submenu>
    28.       el-submenu>
    29.       <el-menu-item index="2">
    30.         <i class="el-icon-menu">i>
    31.         <span slot="title">导航二span>
    32.       el-menu-item>
    33.       <el-menu-item index="3" disabled>
    34.         <i class="el-icon-document">i>
    35.         <span slot="title">导航三span>
    36.       el-menu-item>
    37.       <el-menu-item index="4">
    38.         <i class="el-icon-setting">i>
    39.         <span slot="title">导航四span>
    40.       el-menu-item>
    41.     el-menu>
    42.   el-col>
    43.   <el-col :span="12">
    44.     <h5>自定义颜色h5>
    45.     <el-menu
    46.       default-active="2"
    47.       class="el-menu-vertical-demo"
    48.       @open="handleOpen"
    49.       @close="handleClose"
    50.       background-color="#545c64"
    51.       text-color="#fff"
    52.       active-text-color="#ffd04b">
    53.       <el-submenu index="1">
    54.         <template slot="title">
    55.           <i class="el-icon-location">i>
    56.           <span>导航一span>
    57.         template>
    58.         <el-menu-item-group>
    59.           <template slot="title">分组一template>
    60.           <el-menu-item index="1-1">选项1el-menu-item>
    61.           <el-menu-item index="1-2">选项2el-menu-item>
    62.         el-menu-item-group>
    63.         <el-menu-item-group title="分组2">
    64.           <el-menu-item index="1-3">选项3el-menu-item>
    65.         el-menu-item-group>
    66.         <el-submenu index="1-4">
    67.           <template slot="title">选项4template>
    68.           <el-menu-item index="1-4-1">选项1el-menu-item>
    69.         el-submenu>
    70.       el-submenu>
    71.       <el-menu-item index="2">
    72.         <i class="el-icon-menu">i>
    73.         <span slot="title">导航二span>
    74.       el-menu-item>
    75.       <el-menu-item index="3" disabled>
    76.         <i class="el-icon-document">i>
    77.         <span slot="title">导航三span>
    78.       el-menu-item>
    79.       <el-menu-item index="4">
    80.         <i class="el-icon-setting">i>
    81.         <span slot="title">导航四span>
    82.       el-menu-item>
    83.     el-menu>
    84.   el-col>
    86.  
    87. <script>
    88.   export default {
    89.     methods: {
    90.       handleOpen(key, keyPath) {
    91.         console.log(key, keyPath);
    92.       },
    93.       handleClose(key, keyPath) {
    94.         console.log(key, keyPath);
    95.       }
    96.     }
    97.   }
    98. script>

     3.展开折叠

    1. "isCollapse" style="margin-bottom: 20px;">
    2.   <el-radio-button :label="false">展开el-radio-button>
    3.   <el-radio-button :label="true">收起el-radio-button>
    5. <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
    6.   <el-submenu index="1">
    7.     <template slot="title">
    8.       <i class="el-icon-location">i>
    9.       <span slot="title">导航一span>
    10.     template>
    11.     <el-menu-item-group>
    12.       <span slot="title">分组一span>
    13.       <el-menu-item index="1-1">选项1el-menu-item>
    14.       <el-menu-item index="1-2">选项2el-menu-item>
    15.     el-menu-item-group>
    16.     <el-menu-item-group title="分组2">
    17.       <el-menu-item index="1-3">选项3el-menu-item>
    18.     el-menu-item-group>
    19.     <el-submenu index="1-4">
    20.       <span slot="title">选项4span>
    21.       <el-menu-item index="1-4-1">选项1el-menu-item>
    22.     el-submenu>
    23.   el-submenu>
    24.   <el-menu-item index="2">
    25.     <i class="el-icon-menu">i>
    26.     <span slot="title">导航二span>
    27.   el-menu-item>
    28.   <el-menu-item index="3" disabled>
    29.     <i class="el-icon-document">i>
    30.     <span slot="title">导航三span>
    31.   el-menu-item>
    32.   <el-menu-item index="4">
    33.     <i class="el-icon-setting">i>
    34.     <span slot="title">导航四span>
    35.   el-menu-item>
    36. el-menu>
    37.  
    38. <style>
    39.   .el-menu-vertical-demo:not(.el-menu--collapse) {
    40.     width: 200px;
    41.     min-height: 400px;
    42.   }
    43. style>
    44.  
    45. <script>
    46.   export default {
    47.     data() {
    48.       return {
    49.         isCollapse: true
    50.       };
    51.     },
    52.     methods: {
    53.       handleOpen(key, keyPath) {
    54.         console.log(key, keyPath);
    55.       },
    56.       handleClose(key, keyPath) {
    57.         console.log(key, keyPath);
    58.       }
    59.     }
    60.   }
    61. script>

  • 相关阅读:
    Java手写最大流算法应用拓展案例
    【专题复习】离散化
    day-43 代码随想录算法训练营（19） 动态规划 part 05
    Java实验报告（一）
    [H5动画制作系列 ] Text及Button 的基础原理Demo
    归并排序和快速排序的两种实现
    CLion搭建Qt开发环境，并解决目录重构问题（最新版）
    学会这个样生成性能测试报告，拿下20k轻轻松松
    linux线程互斥
    TCP协议
  • 原文地址：https://blog.csdn.net/W2457307263/article/details/132703285