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
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 {