vue爬坑之路(十)----element-ui

NavMenu导航菜单:

  <el-menu

    :default-active="$route.path" //当前激活菜单的 index
    unique-opened:true   //是否只保持一个子菜单的展开
    class="el-menu-vertical-demo"  
    @open="handleOpen"   //事件展开指定的 sub-menu
    @close="handleClose"  //收起指定的 sub-menu
    @select="handleSelect"  //菜单激活回调
    background-color="#fff"
    text-color="#545c64"
    active-text-color="rgb(98, 151, 218)" //当前激活菜单的文本颜色

  >

    <el-submenu index="1"> //index唯一标志
      <template slot="title">  //具名slot,分组名通过title属性直接设定
        <i class="el-icon-location"></i>
        <span>账号管理</span>
      </template>
      <el-menu-item-group> //分组
        <el-menu-item index="/">
          <router-link to="/" tag="span" class="span">C端用户账号管理</router-link>
        </el-menu-item>
        <el-menu-item index="/POSAccountManage">
          <router-link to="/POSAccountManage" tag="span" class="span">门店商户账号</router-link>
        </el-menu-item>
      </el-menu-item-group>

    </el-submenu>

    <el-submenu index="1-1">
      <template slot="title">商家店铺商品</template>
      <el-menu-item index="/merchantsShop">
        <router-link to="/merchantsShop" tag="span" class="span">商家店铺商品</router-link>
      </el-menu-item>
    </el-submenu>

  </el-menu>

猜你喜欢

转载自www.cnblogs.com/nanjie/p/10075242.html
今日推荐