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

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

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

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

@ -5,21 +5,21 @@
<p>
<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>
<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">
<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>
<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">
<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>
</p>
<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>
<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>
</p>

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

@ -1,20 +1,20 @@
<template>
<div
style="
margin-top: 60px;
background-color: whitesmoke;
height: 100%;
width: 100%;
"
<div class="site-container"
>
<div class="site-banner">
<div class="site-banner-main">
<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 class="layui-anim site-desc site-desc-anim">
<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 class="site-download">
<router-link class="layui-inline site-down" to="/zh-CN/guide"
@ -109,15 +109,18 @@
</div>
</template>
<style>
.site-container {
margin-top: 60px;
background-color: whitesmoke;
height: 100%;
width: 100%;
}
.site-banner {
position: relative;
height: 600px;
text-align: center;
overflow: hidden;
background-color: #393d49;
background-image: url(../assets/background.svg);
background-repeat: no-repeat;
background-size: 100%;
}
.site-banner-bg {
background-position: center 0;

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

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

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

@ -56,7 +56,7 @@
}
.layui-btn-primary {
border-color: @global-neutral-color-3;
border-color: @button-border-color;
background: 0 0;
color: #666;
}
@ -113,4 +113,4 @@
color: #d2d2d2 !important;
cursor: not-allowed !important;
opacity: 1;
}
}

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

@ -67,4 +67,4 @@ const classes = computed(() => {
></i>
<slot v-else></slot>
</button>
</template>
</template>

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

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

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

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

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

@ -5,7 +5,7 @@ export default {
</script>
<script setup lang="ts">
import { computed, provide } from "vue";
import { computed, provide, ref, watch } from "vue";
import "./index.less";
export interface LayMenuProps {
@ -30,14 +30,17 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
collapse: false,
});
let oldOpenKeys = ref<string[]>([]);
const isTree = computed(() => props.tree);
const isCollapse = computed(() => props.collapse);
const openKeys = computed({
get() {
return props.openKeys;
},
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("selectedKey", selectedKey);
provide("openKeys", openKeys);
provide("isCollapse", isCollapse);
</script>
<template>

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

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

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

2
src/theme/index.less
View File

@ -3492,4 +3492,4 @@ body .layui-util-face .layui-layer-content {
.layui-anim-fadeout {
-webkit-animation-name: layui-fadeout;
animation-name: layui-fadeout;
}
}