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