Menu 菜单栏

基础用法

<template>
  <div style="height: 500px">
    <plv-menu
      :active-index="activeIndex"
      @select="handleMenuSelect"
    >
      <plv-menu-item
        index="/menu-1"
        icon="camera"
        title="导航一"
      />
      <plv-menu-item
        index="/menu-2"
        icon="order-list"
        title="导航二"
      />
      <plv-menu-group
        icon="pie-chart"
        title="导航三"
      >
        <plv-menu-item
          index="/menu-3-1"
          title="选项一"
        />
        <plv-menu-item
          index="/menu-3-2"
          title="选项二"
        />
        <plv-menu-item
          index="/menu-3-3"
          title="选项三"
        />
      </plv-menu-group>
      <plv-menu-item
        index="/menu-4"
        icon="platform"
        title="导航四"
      />
      <plv-menu-group
        icon="id-card"
        title="导航五"
      >
        <plv-menu-item
          index="/menu-5-1"
          title="选项一"
        />
        <plv-menu-item
          index="/menu-5-2"
          title="选项二"
        />
        <plv-menu-item
          index="/menu-5-3"
          title="选项三"
        />
        <plv-menu-item
          index="/menu-5-4"
          title="选项三"
        />
      </plv-menu-group>
    </plv-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '/menu-1'
    };
  },

  methods: {
    handleMenuSelect(index) {
      this.activeIndex = index;
    }
  }
}
</script>

显示代码