menu 组件新增 inverted 属性

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);