menu 组件新增 inverted 属性

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

@@ -82,6 +82,47 @@ export default {
 
 :::
 
+::: title 反转样式
+:::
+
+::: demo
+
+<template>
+  <lay-menu v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys" :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> 
+    <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"])
+    const selectedKey = ref("5")
+
+    return {
+      openKeys,
+      selectedKey
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 切换主题
 :::
 
@@ -123,7 +164,6 @@ export default {
 
 :::
 
-
 ::: title 菜单插槽
 :::
 
@@ -179,6 +219,7 @@ export default {
 | v-model:selectedKey | 选中项 | --   |
 | v-model:openKeys    | 打开项 | --   |
 | theme    | 菜单主题 | `dark` `light`   |
+| inverted    | 特殊的激活样式 | `true` `false`  |
 
 :::
 

src/component/menu/index.less

@@ -4,8 +4,8 @@
 }
 
 .layui-nav .layui-show.layui-anim-upbit .layui-nav-item {
-  display: block;
   height: 40px;
+  display: block;
   line-height: 40px;
 }
 
@@ -164,8 +164,8 @@
 
 .layui-nav-tree .layui-nav-item > a {
   position: relative;
-  height: 42px;
-  line-height: 42px;
+  height: 40px;
+  line-height: 40px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -190,10 +190,8 @@
   background-color: #009688;
 }
 
-.layui-nav-tree .layui-nav-child dd.layui-this,
-.layui-nav-tree .layui-nav-child dd.layui-this a,
 .layui-nav-tree .layui-this,
-.layui-nav-tree .layui-this > a,
+.layui-nav-tree .layui-nav-child dd.layui-this,
 .layui-nav-tree .layui-this > a:hover {
   background-color: #009688;
   color: #fff;
@@ -281,6 +279,27 @@
   }
 }
 
+.layui-nav-tree {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
 .layui-nav-tree .layui-this * {
   color: white!important;
+}
+
+.layui-nav-tree.inverted .layui-this, 
+.layui-nav-tree.inverted .layui-this:hover {
+  border-radius: 4px;
+  margin: 0px 6px;
+  width: auto;
+}
+
+.layui-nav-tree.inverted .layui-this > a, 
+.layui-nav-tree.inverted .layui-this:hover > a  {
+  border-radius: 4px;
+}
+
+.layui-nav-tree.inverted .layui-this > a{
+  padding: 5px 24px 5px 24px;
 }

src/component/menu/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="layui-nav" :class="[tree ? 'layui-nav-tree' : '', theme === 'dark' ? 'layui-nav-dark':'layui-nav-light' ]">
+  <ul class="layui-nav" :class="[inverted ? 'inverted':'',tree ? 'layui-nav-tree' : '', theme === 'dark' ? 'layui-nav-dark':'layui-nav-light' ]">
     <slot></slot>
   </ul>
 </template>
@@ -13,6 +13,7 @@ export interface LayMenuProps {
   openKeys?: string[];
   tree?: boolean;
   theme?: string;
+  inverted?: boolean;
 }
 
 const emit = defineEmits(["update:selectedKey", "update:openKeys"]);
@@ -21,7 +22,8 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
   selectedKey: "",
   openKeys: () => [],
   tree: false,
-  theme: 'dark'
+  theme: 'dark',
+  inverted: false
 });
 
 const isTree = computed(() => props.tree);

src/theme/index.less

@@ -1967,8 +1967,7 @@ a cite {
 .layui-keyboard-list li,
 .layui-menu li,
 .layui-menu-body-title a:hover,
-.layui-menu-body-title > .layui-icon:hover,
-.layui-nav .layui-nav-item a {
+.layui-menu-body-title > .layui-icon:hover {
   transition: all 0.3s;
 }