菜单 menu 待优化

侧边栏菜单

使用说明

简单引入

引入menu组件后，通过menu-item组件定义菜单选项

(通过select事件，你可以接收到当前选中的下标（下标由0开始）)已废弃使用

通过select事件，你可以接收到当前选中的value

• 菜单选项1
• 菜单选项2
• 菜单选项3
• 菜单选项4

展开代码

<vi-menu @select="handleSelect">
  <vi-menu-item value="1">菜单选项1</vi-menu-item>
  <vi-menu-item value="2">菜单选项2</vi-menu-item>
  <vi-menu-item value="3">菜单选项3</vi-menu-item>
  <vi-menu-item value="4">菜单选项4</vi-menu-item>
</vi-menu>

<script setup>
  function handleSelect (val) {
    console.log(val)
  }
</script>

通过dedaultId定义默认选中下标 已废弃使用

• 菜单选项1
• 菜单选项2
• 菜单选项3
• 菜单选项4

展开代码

<vi-menu @select="handleSelect" :default-id="3">
  <vi-menu-item>菜单选项1</vi-menu-item>
  <vi-menu-item>菜单选项2</vi-menu-item>
  <vi-menu-item>菜单选项3</vi-menu-item>
  <vi-menu-item>菜单选项4</vi-menu-item>
</vi-menu>

自操控选中内容

可以通过v-model操控选中value

• 菜单选项1
• 菜单选项2
• 菜单选项3
• 菜单选项4

展开代码

<vi-menu v-model="pick">
  <vi-menu-item value="1">菜单选项1</vi-menu-item>
  <vi-menu-item value="2">菜单选项2</vi-menu-item>
  <vi-menu-item value="3">菜单选项3</vi-menu-item>
  <vi-menu-item value="4">菜单选项4</vi-menu-item>
</vi-menu>
<vi-button @click="pick = '3'">选中菜单3</vi-button>

<script setup>
  const pick = ref()
</script>

菜单阴影

通过shadow属性，可以开启菜单卡片阴影样式

• 菜单选项1
• 菜单选项2
• 菜单选项3
• 菜单选项4

展开代码

<vi-menu shadow>
  <vi-menu-item>菜单选项1</vi-menu-item>
  <vi-menu-item>菜单选项2</vi-menu-item>
  <vi-menu-item>菜单选项3</vi-menu-item>
  <vi-menu-item>菜单选项4</vi-menu-item>
</vi-menu>

vue-router路由模式

通过router属性开启路由匹配模式，在该模式下通过向item绑定to属性，开启路由跳转

WARNING

你需要确保当前环境下安装并注册了路由

• 去首页，真的会去啊慎点
• 这一页

展开代码

<vi-menu shadow router :default-id="2">
  <vi-menu-item to="/">去首页，真的会去啊慎点</vi-menu-item>
  <vi-menu-item to="/components/menu/">这一页</vi-menu-item>
</vi-menu>

菜单组

通过menu-group组件定义菜单组，菜单组可以无限嵌套

WARNING

菜单下标分配是按可选择的item的顺序来定的

通过title定义菜单组的

• 选项1-3
• 菜单选项1
• 选项2-3
• 菜单选项2
• 菜单选项3

选项4-6

菜单选项4

菜单选项5

菜单选项6

菜单选项7