theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
就眠儀式 2022-01-30 00:04:36 +08:00
parent 887109590e
commit 668a02a538
4 changed files with 62 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
example/docs/zh-CN/components/menu.md
View File

@ -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 菜单插槽
:::

5
package.json
View File

@ -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/**/*'",
"publish": "npm publish --access=public"
"lint:prettier": "prettier --write 'src/**/*'"
},
"dependencies": {
"@layui/hooks-vue": "^0.1.6",

14
src/component/menu/index.less
View File

@ -269,4 +269,18 @@
left: 0;
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;
}

4
src/component/menu/index.vue
View File

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