新增 menu 组件 theme 属性, 可选值 dark 与 light

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

@@ -7,7 +7,7 @@
 ::: demo
 
 <template>
-  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys">
+  <lay-menu v-model:selectedKey="selectedKey" theme="light" v-model:openKeys="openKeys">
     <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> 
@@ -82,6 +82,48 @@ export default {
 
 :::
 
+::: title 切换主题
+:::
+
+::: demo
+
+<template>
+  <lay-menu v-model:selectedKey="selectedKey" theme="light" 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 菜单插槽
 :::
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.3.6-alpha.4",
+  "version": "0.3.6-alpha.5",
   "author": "SleepRite",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
@@ -28,8 +28,7 @@
     "build:types": "rimraf types && tsc -d",
     "build:example": "vite build example",
     "lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
-    "lint:prettier": "prettier --write  'src/**/*'",
+    "lint:prettier": "prettier --write  'src/**/*'"
-    "publish": "npm publish --access=public"
   },
   "dependencies": {
     "@layui/hooks-vue": "^0.1.6",

src/component/menu/index.less

@@ -270,3 +270,17 @@
   overflow-x: hidden;
   z-index: 999;
 }
+
+.layui-nav-light {
+  background-color: #ffffff;
+  * {
+    color: grey!important;
+  }
+  .layui-nav-itemed > .layui-nav-child {
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+}
+
+.layui-nav-tree .layui-this * {
+  color: white!important;
+}

src/component/menu/index.vue

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