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

feat: 新增 menu 组件 collapse 属性

Browse Source
This commit is contained in:
就眠儀式 2022-02-27 12:55:09 +08:00
parent 5443cfd1ff
commit c8b0457339
13 changed files with 260 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,20 +14,22 @@
<template> <template>
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys1"> <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys1">
<lay-menu-item title="首页" id="1"></lay-menu-item> <lay-menu-item id="1">首页</lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item> <lay-menu-item id="2">首页</lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item> <lay-menu-item id="3">首页</lay-menu-item>
<lay-sub-menu title="目录" id="7"> <lay-sub-menu id="7">
<lay-menu-item title="菜单1" id="8"></lay-menu-item> <template #title>
<lay-menu-item title="菜单2" id="9"></lay-menu-item> 首页
<lay-sub-menu title="菜单3" id="10"> </template>
<lay-menu-item title="菜单3-1" id="11"></lay-menu-item> <lay-menu-item id="8">首页</lay-menu-item>
<lay-menu-item title="菜单3-2" id="12"></lay-menu-item> <lay-menu-item id="9">首页</lay-menu-item>
<lay-sub-menu title="菜单3-3" id="13"> <lay-sub-menu title="菜单" id="10">
<lay-menu-item title="菜单3-3-1" id="14"></lay-menu-item> <template #title>
<lay-menu-item title="菜单3-3-2" id="15"></lay-menu-item> 首页
<lay-menu-item title="菜单3-3-3" id="16"></lay-menu-item> </template>
</lay-sub-menu> <lay-menu-item id="11">首页</lay-menu-item>
<lay-menu-item id="12">首页</lay-menu-item>
<lay-menu-item id="13">首页</lay-menu-item>
</lay-sub-menu> </lay-sub-menu>
</lay-sub-menu> </lay-sub-menu>
</lay-menu> </lay-menu>
@ -58,16 +60,22 @@ export default {
<template> <template>
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys2" :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 id="1">首页</lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item> <lay-menu-item id="2">首页</lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item> <lay-menu-item id="3">首页</lay-menu-item>
<lay-sub-menu title="目录" id="7"> <lay-sub-menu id="7">
<lay-menu-item title="菜单" id="8"></lay-menu-item> <template #title>
<lay-menu-item title="菜单" id="9"></lay-menu-item> 首页
</template>
<lay-menu-item id="8">首页</lay-menu-item>
<lay-menu-item id="9">首页</lay-menu-item>
<lay-sub-menu title="菜单" id="10"> <lay-sub-menu title="菜单" id="10">
<lay-menu-item title="菜单" id="11"></lay-menu-item> <template #title>
<lay-menu-item title="菜单" id="12"></lay-menu-item> 首页
<lay-menu-item title="菜单" id="13"></lay-menu-item> </template>
<lay-menu-item id="11">首页</lay-menu-item>
<lay-menu-item id="12">首页</lay-menu-item>
<lay-menu-item id="13">首页</lay-menu-item>
</lay-sub-menu> </lay-sub-menu>
</lay-sub-menu> </lay-sub-menu>
</lay-menu> </lay-menu>
@ -99,16 +107,22 @@ export default {
<template> <template>
<lay-menu level="true" v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys3" :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 id="1">首页</lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item> <lay-menu-item id="2">首页</lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item> <lay-menu-item id="3">首页</lay-menu-item>
<lay-sub-menu title="目录" id="7"> <lay-sub-menu id="7">
<lay-menu-item title="菜单" id="8"></lay-menu-item> <template #title>
<lay-menu-item title="菜单" id="9"></lay-menu-item> 首页
<lay-sub-menu title="菜单" id="10"> </template>
<lay-menu-item title="菜单" id="11"></lay-menu-item> <lay-menu-item id="8">首页</lay-menu-item>
<lay-menu-item title="菜单" id="12"></lay-menu-item> <lay-menu-item id="9">首页</lay-menu-item>
<lay-menu-item title="菜单" id="13"></lay-menu-item> <lay-sub-menu id="10">
<template #title>
首页
</template>
<lay-menu-item id="11">首页</lay-menu-item>
<lay-menu-item id="12">首页</lay-menu-item>
<lay-menu-item id="13">首页</lay-menu-item>
</lay-sub-menu> </lay-sub-menu>
</lay-sub-menu> </lay-sub-menu>
</lay-menu> </lay-menu>
@ -140,16 +154,44 @@ export default {
<template> <template>
<lay-menu v-model:selectedKey="selectedKey" theme="light" v-model:openKeys="openKeys4" :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 id="1">
<lay-menu-item title="用户" id="2"></lay-menu-item> <template #title>
<lay-menu-item title="角色" id="3"></lay-menu-item> 菜单
<lay-sub-menu title="目录" id="7"> </template>
<lay-menu-item title="菜单" id="8"></lay-menu-item> </lay-menu-item>
<lay-menu-item title="菜单" id="9"></lay-menu-item> <lay-menu-item id="2">
<template #title>
菜单
</template>
</lay-menu-item>
<lay-menu-item id="3">
<template #title>
菜单
</template>
</lay-menu-item>
<lay-sub-menu id="7">
<template #title>
目录
</template>
<lay-menu-item id="8">
菜单
</lay-menu-item>
<lay-menu-item id="9">
菜单
</lay-menu-item>
<lay-sub-menu title="菜单" id="10"> <lay-sub-menu title="菜单" id="10">
<lay-menu-item title="菜单" id="11"></lay-menu-item> <template #title>
<lay-menu-item title="菜单" id="12"></lay-menu-item> 目录
<lay-menu-item title="菜单" id="13"></lay-menu-item> </template>
<lay-menu-item id="11">
菜单
</lay-menu-item>
<lay-menu-item id="12">
菜单
</lay-menu-item>
<lay-menu-item id="13">
菜单
</lay-menu-item>
</lay-sub-menu> </lay-sub-menu>
</lay-sub-menu> </lay-sub-menu>
</lay-menu> </lay-menu>
@ -241,19 +283,107 @@ export default {
<br/> <br/>
<br/> <br/>
<lay-menu v-model:selectedKey="selectedKey" v-model:tree="isTree" v-model:openKeys="openKeys6" :collapse="collapse"> <lay-menu v-model:selectedKey="selectedKey" v-model:tree="isTree" v-model:openKeys="openKeys6" :collapse="collapse">
<lay-menu-item title="首页" id="1"></lay-menu-item> <lay-menu-item id="1">
<lay-menu-item title="用户" id="2"></lay-menu-item> <template #icon>
<lay-menu-item title="角色" id="3"></lay-menu-item> <lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="2">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="3">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-sub-menu title="目录" id="7"> <lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单1" id="8"></lay-menu-item> <template #icon>
<lay-menu-item title="菜单2" id="9"></lay-menu-item> <lay-icon type="layui-icon-home"></lay-icon>
<lay-sub-menu title="菜单3" id="10"> </template>
<lay-menu-item title="菜单3-1" id="11"></lay-menu-item> <template #title>
<lay-menu-item title="菜单3-2" id="12"></lay-menu-item> 首页
<lay-sub-menu title="菜单3-3" id="13"> </template>
<lay-menu-item title="菜单3-3-1" id="14"></lay-menu-item> <lay-menu-item id="8">
<lay-menu-item title="菜单3-3-2" id="15"></lay-menu-item> <template #icon>
<lay-menu-item title="菜单3-3-3" id="16"></lay-menu-item> <lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="9">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-sub-menu id="10">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
<lay-menu-item id="11">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="12">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-sub-menu id="13">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
<lay-menu-item id="14">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="15">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="16">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
</lay-sub-menu> </lay-sub-menu>
</lay-sub-menu> </lay-sub-menu>
</lay-sub-menu> </lay-sub-menu>
@ -288,7 +418,7 @@ export default {
::: table ::: table
| 属性 | 描述 | 备注 | | 属性 | 描述 | 备注 |
| ------------------- | ------ | ---- | | ------------------- | -------------- | -------------- |
| v-model:selectedKey | 选中项 | -- | | v-model:selectedKey | 选中项 | -- |
| v-model:openKeys | 打开项 | -- | | v-model:openKeys | 打开项 | -- |
| theme | 菜单主题 | `dark` `light` | | theme | 菜单主题 | `dark` `light` |

12
example/docs/zh-CN/guide/getStarted.md
View File

@ -5,21 +5,21 @@
<p> <p>
<a href="http://layui-vue.pearadmin.com" style="margin-left:30px;"> <a href="http://layui-vue.pearadmin.com" style="margin-left:30px;">
<img src="https://portrait.gitee.com/uploads/avatars/namespace/2868/8605626_layui_1634311144.png" alt="layui" width="110" style="border-radius:12px;"> <img src="https://portrait.gitee.com/uploads/avatars/namespace/2868/8605626_layui_1634311144.png" alt="layui" width="105" style="border-radius:12px;">
</a> </a>
<span style="font-size:30px;color:#e2e2e2;margin:30px;">+</span> <span style="font-size:32px;color:#e2e2e2;margin:30px;">+</span>
<a href="http://layui-vue.pearadmin.com"> <a href="http://layui-vue.pearadmin.com">
<img src="https://qn.antdv.com/vue.png" alt="layui" width="110" style="border-radius:12px;"> <img src="https://qn.antdv.com/vue.png" alt="layui" width="105" style="border-radius:12px;">
</a> </a>
<span style="font-size:30px;color:#e2e2e2;margin:30px;">=</span> <span style="font-size:32px;color:#e2e2e2;margin:30px;">=</span>
<a href="http://layui-vue.pearadmin.com"> <a href="http://layui-vue.pearadmin.com">
<img src="../../../src/assets/logo.jpg" alt="layui" width="110" style="border-radius:12px;"> <img src="../../../src/assets/logo.jpg" alt="layui" width="105" style="border-radius:12px;">
</a> </a>
</p> </p>
<br> <br>
::: describe 使用 (npm, yarn, pnpm) 工具安装 layui vue, 然后你就可以使用打包工具, 如 vite ::: describe 使用 npm 工具安装 layui vue, 然后你就可以使用打包工具, 如 vite rollup.
::: :::
``` ```

2
example/docs/zh-CN/guide/introduce.md
View File

@ -3,7 +3,7 @@
<p> <p>
<a href="http://layui-vue.pearadmin.com"> <a href="http://layui-vue.pearadmin.com">
<img src="../../../src/assets/logo-new.png" alt="layui" width="400"> <img src="../../../src/assets/logo-new.png" alt="layui" width="440">
</a> </a>
</p> </p>

27
example/src/view/index.vue
View File

@ -1,20 +1,20 @@
<template> <template>
<div <div class="site-container"
style="
margin-top: 60px;
background-color: whitesmoke;
height: 100%;
width: 100%;
"
> >
<div class="site-banner"> <div class="site-banner">
<div class="site-banner-main"> <div class="site-banner-main">
<div class="site-zfj site-zfj-anim"> <div class="site-zfj site-zfj-anim">
<img src="../assets/logo.jpg" style="width: 200px;border-radius: 10px;box-shadow: 2px 0 6px rgb(0 21 41 / 35%);" /> <img
src="../assets/logo.jpg"
style="width: 220px; border-radius: 10px"
/>
</div> </div>
<div class="layui-anim site-desc site-desc-anim"> <div class="layui-anim site-desc site-desc-anim">
<p class="web-font-desc">layui - vue</p> <p class="web-font-desc">layui - vue</p>
<cite>layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.</cite> <cite
>layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件
库.</cite
>
</div> </div>
<div class="site-download"> <div class="site-download">
<router-link class="layui-inline site-down" to="/zh-CN/guide" <router-link class="layui-inline site-down" to="/zh-CN/guide"
@ -109,15 +109,18 @@
</div> </div>
</template> </template>
<style> <style>
.site-container {
margin-top: 60px;
background-color: whitesmoke;
height: 100%;
width: 100%;
}
.site-banner { .site-banner {
position: relative; position: relative;
height: 600px; height: 600px;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
background-color: #393d49; background-color: #393d49;
background-image: url(../assets/background.svg);
background-repeat: no-repeat;
background-size: 100%;
} }
.site-banner-bg { .site-banner-bg {
background-position: center 0; background-position: center 0;

1
example/src/view/material.vue
View File

@ -59,7 +59,6 @@
height: 190px; height: 190px;
text-align: center; text-align: center;
font-weight: 300; font-weight: 300;
background-color: #009688;
color: #fff; color: #fff;
} }
.alone-banner h1 { .alone-banner h1 {

2
src/component/button/index.less
View File

@ -56,7 +56,7 @@
} }
.layui-btn-primary { .layui-btn-primary {
border-color: @global-neutral-color-3; border-color: @button-border-color;
background: 0 0; background: 0 0;
color: #666; color: #666;
} }

2
src/component/formItem/cnValidateMessage.ts
View File

@ -29,7 +29,7 @@ export default {
len: "%s必须是长度为%s个字符", len: "%s必须是长度为%s个字符",
min: "%s最小长度为%s个字符", min: "%s最小长度为%s个字符",
max: "%s最长%s个字符", max: "%s最长%s个字符",
range: "%s字符长度需要在%s和%s直接", range: "%s字符长度需要在%s和%s之间",
}, },
number: { number: {
len: "%s长度必须为%s", len: "%s长度必须为%s",

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

@ -159,7 +159,6 @@
text-align: center; text-align: center;
} }
//
.layui-nav.layui-nav-collapse { .layui-nav.layui-nav-collapse {
width: 60px; width: 60px;
span { span {
@ -170,8 +169,6 @@
} }
} }
.layui-nav-tree { .layui-nav-tree {
width: 200px; width: 200px;
padding: 0; padding: 0;

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

@ -5,7 +5,7 @@ export default {
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import { computed, provide } from "vue"; import { computed, provide, ref, watch } from "vue";
import "./index.less"; import "./index.less";
export interface LayMenuProps { export interface LayMenuProps {
@ -30,14 +30,17 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
collapse: false, collapse: false,
}); });
let oldOpenKeys = ref<string[]>([]);
const isTree = computed(() => props.tree); const isTree = computed(() => props.tree);
const isCollapse = computed(() => props.collapse);
const openKeys = computed({ const openKeys = computed({
get() { get() {
return props.openKeys; return props.openKeys;
}, },
set(val) { set(val) {
emit("update:selectedKey", val); emit("update:openKeys", val);
}, },
}); });
@ -50,9 +53,24 @@ const selectedKey = computed({
}, },
}); });
watch(
() => props.collapse,
() => {
if (props.collapse) {
// 删除所有打开
oldOpenKeys.value = props.openKeys;
emit("update:openKeys", []);
} else {
// 赋值所有打开
emit("update:openKeys", oldOpenKeys.value);
}
}, { immediate: true}
);
provide("isTree", isTree); provide("isTree", isTree);
provide("selectedKey", selectedKey); provide("selectedKey", selectedKey);
provide("openKeys", openKeys); provide("openKeys", openKeys);
provide("isCollapse", isCollapse);
</script> </script>
<template> <template>

11
src/component/menuItem/index.vue
View File

@ -27,8 +27,15 @@ const selectHandle = function () {
@click="selectHandle()" @click="selectHandle()"
> >
<a href="javascript:void(0)"> <a href="javascript:void(0)">
<slot v-if="slots.default"></slot> <i v-if="slots.icon">
<span v-else>{{ title }}</span> <slot name="icon"></slot>
</i>
<span v-if="slots.title">
<slot name="title"></slot>
</span>
<span v-else>
<slot></slot>
</span>
</a> </a>
</li> </li>
</template> </template>

9
src/component/subMenu/index.vue
View File

@ -28,6 +28,7 @@ const props = defineProps<LaySubMenuProps>();
const isTree: Ref<boolean> = inject("isTree") as Ref<boolean>; const isTree: Ref<boolean> = inject("isTree") as Ref<boolean>;
const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>; const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>; const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
const isCollapse: Ref<boolean> = inject("isCollapse") as Ref<boolean>;
const isOpen = computed(() => { const isOpen = computed(() => {
return openKeys.value.includes(props.id); return openKeys.value.includes(props.id);
@ -43,11 +44,13 @@ watch(isOpen, () => {
}); });
const openHandle = function () { const openHandle = function () {
if (!isCollapse.value) {
if (openKeys.value.includes(props.id)) { if (openKeys.value.includes(props.id)) {
openKeys.value.splice(openKeys.value.indexOf(props.id), 1); openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
} else { } else {
openKeys.value.push(props.id); openKeys.value.push(props.id);
} }
}
}; };
const setPosition = function () { const setPosition = function () {
@ -84,8 +87,12 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
:class="[isOpen && isTree ? 'layui-nav-itemed' : '']" :class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
> >
<a href="javascript:void(0)" @click="openHandle()"> <a href="javascript:void(0)" @click="openHandle()">
<i>
<slot v-if="slots.icon" name="icon"></slot>
</i>
<span>
<slot v-if="slots.title" name="title"></slot> <slot v-if="slots.title" name="title"></slot>
<span v-else>{{ title }}</span> </span>
<i <i
:class="[isOpen && !isTree ? 'layui-nav-mored' : '']" :class="[isOpen && !isTree ? 'layui-nav-mored' : '']"
class="layui-icon layui-icon-down layui-nav-more" class="layui-icon layui-icon-down layui-nav-more"