layui/example/docs/zh-CN/components/menu.md

187 lines
3.7 KiB
Markdown
Raw Normal View History

::: anchor
:::
2021-10-26 01:13:23 +08:00
::: title 基础使用
2021-10-19 22:28:44 +08:00
:::
2021-09-29 23:42:53 +08:00
::: demo
<template>
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys">
2021-10-08 11:09:44 +08:00
<lay-menu-item title="首页" id="1"></lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单一" id="8"></lay-menu-item>
<lay-menu-item title="菜单二" id="9"></lay-menu-item>
<lay-sub-menu title="菜单三" id="10">
<lay-menu-item title="菜单一" id="11"></lay-menu-item>
<lay-menu-item title="菜单二" id="12"></lay-menu-item>
<lay-menu-item title="菜单三" id="13"></lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
2021-09-29 23:42:53 +08:00
</lay-menu>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const selectedKey = ref("5")
const openKeys = ref(["7"])
2021-09-29 23:42:53 +08:00
return {
selectedKey,
openKeys
2021-09-29 23:42:53 +08:00
}
}
}
</script>
:::
2021-10-01 18:20:41 +08:00
2021-10-26 01:13:23 +08:00
::: title 垂直导航
2021-10-19 22:28:44 +08:00
:::
2021-10-01 18:20:41 +08:00
::: demo
<template>
2022-01-09 22:11:28 +08:00
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" :tree="true">
<lay-menu-item title="首页" id="1"></lay-menu-item>
2021-10-08 11:09:44 +08:00
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单一" id="8"></lay-menu-item>
<lay-menu-item title="菜单二" id="9"></lay-menu-item>
<lay-sub-menu title="菜单三" id="10">
<lay-menu-item title="菜单一" id="11"></lay-menu-item>
<lay-menu-item title="菜单二" id="12"></lay-menu-item>
<lay-menu-item title="菜单三" id="13"></lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-menu>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const openKeys = ref(["7"])
2022-01-09 22:11:28 +08:00
const selectedKey = ref("5")
return {
openKeys,
selectedKey
}
}
}
</script>
:::
::: title 菜单插槽
:::
::: demo
<template>
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
<lay-menu-item id="1">
2022-01-09 22:11:28 +08:00
<router-link to="">首页</router-link>
</lay-menu-item>
2022-01-09 22:11:28 +08:00
<lay-sub-menu id="7">
<template v-slot:title>
<router-link to="">目录</router-link>
</template>
<lay-menu-item id="8">
<router-link to="">菜单一</router-link>
</lay-menu-item>
<lay-menu-item id="9">
<router-link to="">菜单二</router-link>
</lay-menu-item>
2022-01-09 22:11:28 +08:00
</lay-sub-menu>
2021-10-01 18:20:41 +08:00
</lay-menu>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
2021-10-15 14:57:48 +08:00
const isTree = ref(true)
const selectedKey = ref("5")
const openKeys = ref(["7"])
2021-10-15 14:57:48 +08:00
2021-10-01 18:20:41 +08:00
return {
isTree,
openKeys,
selectedKey
2021-10-01 18:20:41 +08:00
}
}
}
</script>
:::
2021-10-09 10:41:52 +08:00
2022-01-09 22:11:28 +08:00
::: title Menu 属性
2021-10-13 10:04:43 +08:00
:::
2021-10-12 18:00:09 +08:00
2021-11-07 15:55:08 +08:00
::: table
2021-11-07 15:56:24 +08:00
| 属性 | 描述 | 备注 |
| ------------------- | ------ | ---- |
| v-model:selectedKey | 选中项 | -- |
| v-model:openKeys | 打开项 | -- |
2021-11-07 15:55:08 +08:00
:::
2021-10-15 09:30:37 +08:00
2022-01-09 22:11:28 +08:00
::: title Menu Item 属性
:::
::: table
| 插槽 | 描述 | 备注 |
| ----- | -------- | ---- |
| title | 菜单标题 | -- |
:::
::: title Menu Item 插槽
:::
::: table
| 插槽 | 描述 | 备注 |
| ----- | -------- | ---- |
| title | 菜单标题 | -- |
:::
::: title Sub Menu 属性
:::
::: table
| 插槽 | 描述 | 备注 |
| ----- | -------- | ---- |
| title | 菜单标题 | -- |
:::
::: title Sub Menu 插槽
2021-10-15 09:30:37 +08:00
:::
2021-11-07 15:55:08 +08:00
::: table
| 插槽 | 描述 | 备注 |
| ----- | -------- | ---- |
| title | 菜单标题 | -- |
2021-11-07 15:55:08 +08:00
2021-11-07 15:56:24 +08:00
:::
2021-12-16 17:57:59 +08:00
::: comment
:::