fix: 横向导航栏模式下 children 无法自动隐藏
This commit is contained in:
@@ -13,7 +13,7 @@
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys">
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys1">
|
||||
<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>
|
||||
@@ -40,10 +40,10 @@ export default {
|
||||
setup() {
|
||||
|
||||
const selectedKey = ref("5")
|
||||
const openKeys = ref(["7"])
|
||||
const openKeys1 = ref(["7"])
|
||||
return {
|
||||
selectedKey,
|
||||
openKeys
|
||||
openKeys1
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -57,7 +57,7 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" :tree="true">
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys2" :tree="true">
|
||||
<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>
|
||||
@@ -79,11 +79,11 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const openKeys = ref(["7"])
|
||||
const openKeys2 = ref(["7"])
|
||||
const selectedKey = ref("5")
|
||||
|
||||
return {
|
||||
openKeys,
|
||||
openKeys2,
|
||||
selectedKey
|
||||
}
|
||||
}
|
||||
@@ -98,7 +98,7 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu level="true" v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys" :tree="true">
|
||||
<lay-menu level="true" v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys3" :tree="true">
|
||||
<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>
|
||||
@@ -120,11 +120,11 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const openKeys = ref(["7"])
|
||||
const openKeys3 = ref(["7"])
|
||||
const selectedKey = ref("5")
|
||||
|
||||
return {
|
||||
openKeys,
|
||||
openKeys3,
|
||||
selectedKey
|
||||
}
|
||||
}
|
||||
@@ -139,7 +139,7 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" theme="light" v-model:openKeys="openKeys" :tree="true">
|
||||
<lay-menu v-model:selectedKey="selectedKey" theme="light" v-model:openKeys="openKeys4" :tree="true">
|
||||
<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>
|
||||
@@ -161,11 +161,11 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const openKeys = ref(["7"])
|
||||
const openKeys4 = ref(["7"])
|
||||
const selectedKey = ref("5")
|
||||
|
||||
return {
|
||||
openKeys,
|
||||
openKeys4,
|
||||
selectedKey
|
||||
}
|
||||
}
|
||||
@@ -180,7 +180,7 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys5" v-model:tree="isTree">
|
||||
<lay-menu-item id="1">
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
@@ -218,11 +218,11 @@ export default {
|
||||
|
||||
const isTree = ref(true)
|
||||
const selectedKey = ref("5")
|
||||
const openKeys = ref(["7"])
|
||||
const openKeys5 = ref(["7"])
|
||||
|
||||
return {
|
||||
isTree,
|
||||
openKeys,
|
||||
openKeys5,
|
||||
selectedKey
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,6 +4,12 @@
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: describe 常用于行数据的交互筛选,在浩瀚的业务需求中,值得一用。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-transfer` 标签, 创建穿梭框
|
||||
|
||||
<template>
|
||||
|
||||
@@ -22,32 +22,31 @@ const themeVariable = {
|
||||
:::
|
||||
|
||||
```
|
||||
--global-primary-color: #009688;
|
||||
--global-primary-color: #009688; // 主题色
|
||||
|
||||
--global-normal-color: #1e9fff;
|
||||
--global-normal-color: #1e9fff; // 通用色
|
||||
|
||||
--global-warm-color: #ffb800;
|
||||
--global-warm-color: #ffb800; // 警告色
|
||||
|
||||
--global-danger-color: #ff5722;
|
||||
--global-danger-color: #ff5722; // 危险色
|
||||
|
||||
--global-checked-color: #5fb878;
|
||||
--global-checked-color: #5fb878; // 选中色
|
||||
|
||||
--global-border-radius: 2px;
|
||||
--global-border-radius: 2px; // 圆角度
|
||||
|
||||
--global-neutral-color-1: #FAFAFA;
|
||||
--global-neutral-color-1: #FAFAFA; // 辅助色-1
|
||||
|
||||
--global-neutral-color-2: #F6F6F6;
|
||||
--global-neutral-color-2: #F6F6F6; // 辅助色-2
|
||||
|
||||
--global-neutral-color-3: #eeeeee; // 辅助色-3
|
||||
|
||||
--global-neutral-color-4: #e2e2e2; // 辅助色-4
|
||||
|
||||
--global-neutral-color-3: #eeeeee;
|
||||
--global-neutral-color-5: #dddddd; // 辅助色-5
|
||||
|
||||
--global-neutral-color-4: #e2e2e2;
|
||||
--global-neutral-color-6: #d2d2d2; // 辅助色-6
|
||||
|
||||
--global-neutral-color-5: #dddddd;
|
||||
--global-neutral-color-7: #cccccc; // 辅助色-7
|
||||
|
||||
--global-neutral-color-6: #d2d2d2;
|
||||
|
||||
--global-neutral-color-7: #cccccc;
|
||||
|
||||
--global-neutral-color-8: #c2c2c2;
|
||||
|
||||
--global-neutral-color-8: #c2c2c2; // 辅助色-8
|
||||
```
|
||||
Reference in New Issue
Block a user