為網(wǎng)站提供導(dǎo)航功能的菜單。常用于網(wǎng)站平臺頂部或側(cè)邊欄菜單導(dǎo)航。

1.如何使用？頂欄

/*導(dǎo)航菜單默認(rèn)為垂直模式，通過mode屬性可以使導(dǎo)航菜單變更為水平模式。另外，在菜單中通過submenu組件可以生成二級菜單。Menu 還提供了background-color、text-color和active-text-color，分別用于設(shè)置菜單的背景色、菜單的文字顏色和當(dāng)前激活菜單的文字顏色。*/

<el-menu :default-active="activeIndex" class="el-menu-demo" 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">選項(xiàng)1</el-menu-item>
    <el-menu-item index="2-2">選項(xiàng)2</el-menu-item>
    <el-menu-item index="2-3">選項(xiàng)3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">選項(xiàng)4</template>
      <el-menu-item index="2-4-1">選項(xiàng)1</el-menu-item>
      <el-menu-item index="2-4-2">選項(xiàng)2</el-menu-item>
      <el-menu-item index="2-4-3">選項(xiàng)3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
  <el-menu-item index="4"><a  target="_blank">訂單管理</a></el-menu-item>
</el-menu>
<div class="line"></div>
<el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  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">選項(xiàng)1</el-menu-item>
    <el-menu-item index="2-2">選項(xiàng)2</el-menu-item>
    <el-menu-item index="2-3">選項(xiàng)3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">選項(xiàng)4</template>
      <el-menu-item index="2-4-1">選項(xiàng)1</el-menu-item>
      <el-menu-item index="2-4-2">選項(xiàng)2</el-menu-item>
      <el-menu-item index="2-4-3">選項(xiàng)3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
  <el-menu-item index="4"><a  target="_blank">訂單管理</a></el-menu-item>
</el-menu>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

2.側(cè)欄

垂直菜單，可內(nèi)嵌子菜單。文章來源地址http://www.zghlxwxcb.cn/news/detail-697885.html

//通過el-menu-item-group組件可以實(shí)現(xiàn)菜單進(jìn)行分組，分組名可以通過title屬性直接設(shè)定，也可以通過具名 slot 來設(shè)定。

<el-row class="tac">
  <el-col :span="12">
    <h5>默認(rèn)顏色</h5>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>導(dǎo)航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分組一</template>
          <el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
          <el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分組2">
          <el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">選項(xiàng)4</template>
          <el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">導(dǎo)航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">導(dǎo)航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">導(dǎo)航四</span>
      </el-menu-item>
    </el-menu>
  </el-col>
  <el-col :span="12">
    <h5>自定義顏色</h5>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>導(dǎo)航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分組一</template>
          <el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
          <el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分組2">
          <el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">選項(xiàng)4</template>
          <el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">導(dǎo)航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">導(dǎo)航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">導(dǎo)航四</span>
      </el-menu-item>
    </el-menu>
  </el-col>
</el-row>

<script>
  export default {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

?3.展開折疊

<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
  <el-radio-button :label="false">展開</el-radio-button>
  <el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">導(dǎo)航一</span>
    </template>
    <el-menu-item-group>
      <span slot="title">分組一</span>
      <el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
      <el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分組2">
      <el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <span slot="title">選項(xiàng)4</span>
      <el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">導(dǎo)航二</span>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">導(dǎo)航三</span>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">導(dǎo)航四</span>
  </el-menu-item>
</el-menu>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>

<script>
  export default {
    data() {
      return {
        isCollapse: true
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

到了這里，關(guān)于ElementUI淺嘗輒止32：NavMenu 導(dǎo)航菜單的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！