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

perf(layout): 重构 layout 组件, 增强 carouel 轮播组件

Browse Source
This commit is contained in:
就眠仪式 2021-10-24 17:23:39 +08:00
parent 23ac843852
commit 3bd3dbf6cb
22 changed files with 1076 additions and 764 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
docs/docs/zh-CN/components/carousel.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@ -33,3 +36,99 @@ export default {
</script>
:::
::: field 不同方向
:::
::: demo
<template>
<lay-carousel v-model="active" anim="updown">
<lay-carousel-item id="1">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目一</div>
</lay-carousel-item>
<lay-carousel-item id="2">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目二</div>
</lay-carousel-item>
<lay-carousel-item id="3">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目三</div>
</lay-carousel-item>
<lay-carousel-item id="4">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目四</div>
</lay-carousel-item>
</lay-carousel>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active = ref("1")
return {
active
}
}
}
</script>
:::
::: field 控制位置
:::
::: demo
<template>
{{active}}
<lay-carousel v-model="active" indicator="outside">
<lay-carousel-item id="1">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目一</div>
</lay-carousel-item>
<lay-carousel-item id="2">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目二</div>
</lay-carousel-item>
<lay-carousel-item id="3">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目三</div>
</lay-carousel-item>
<lay-carousel-item id="4">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目四</div>
</lay-carousel-item>
</lay-carousel>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active = ref("1")
return {
active
}
}
}
</script>
:::
::: field 轮播属性
:::
| Name | Description | Accepted Values |
| --------- | ------ | --- |
| v-model | 当前激活项 | `--` |
| anim | 切换方向 | `default` `updown` |
| indicator | 控制器位置 | `inside` `outside` `none` |
| arrow | 切换按钮状态 | `hover` `always` `none`|
::: field 轮播事件
:::
| Name | Description | Accepted Values |
| --------- | ------ | --- |
| change | 切换回调 | id |

144
docs/docs/zh-CN/components/layout.md
View File

@ -5,9 +5,147 @@
<template>
<lay-layout>
<lay-header></lay-header>
<lay-side></lay-side>
<lay-body></lay-body>
<lay-header>header</lay-header>
<lay-body>content</lay-body>
<lay-footer>footer</lay-footer>
</lay-layout>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
return {
}
}
}
</script>
<style>
.lay-code .layui-footer,
.lay-code .layui-header {
line-height: 60px;
text-align: center;
background: #87ca9a;
}
.lay-code .layui-side {
display: flex;
background: #77c38c;
align-items: center;
justify-content: center;
}
.lay-code .layui-body {
display: flex;
background: #5FB878;
align-items: center;
justify-content: center;
}
</style>
:::
::: field 左右布局
:::
::: demo
<template>
<lay-layout>
<lay-side>left</lay-side>
<lay-body>content</lay-body>
<lay-side>right</lay-side>
</lay-layout>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
return {
}
}
}
</script>
:::
::: field 后台布局
:::
::: demo
<template>
<lay-layout>
<lay-header>header</lay-header>
<lay-layout>
<lay-side>side</lay-side>
<lay-body>content</lay-body>
</lay-layout>
</lay-layout>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
return {
}
}
}
</script>
:::
::: field 复杂布局
:::
::: demo
<template>
<lay-layout>
<lay-side>side</lay-side>
<lay-layout>
<lay-header>header</lay-header>
<lay-body>body</lay-body>
<lay-footer>footer</lay-footer>
</lay-layout>
</lay-layout>
<hr>
<lay-layout>
<lay-layout>
<lay-header>header</lay-header>
<lay-body>body</lay-body>
<lay-footer>footer</lay-footer>
</lay-layout>
<lay-side>side</lay-side>
</lay-layout>
<hr>
<lay-layout>
<lay-header>Header</lay-header>
<lay-body>
<lay-layout>
<lay-side :width="160">Left</lay-side>
<lay-body>Content</lay-body>
</lay-layout>
</lay-body>
<lay-footer>Footer</lay-footer>
</lay-layout>
<hr>
<lay-layout>
<lay-header>Header</lay-header>
<lay-body>
<lay-layout>
<lay-body>Content</lay-body>
<lay-side :width="160">Right</lay-side>
</lay-layout>
</lay-body>
<lay-footer>Footer</lay-footer>
</lay-layout>
</template>

6
docs/docs/zh-CN/guide/changelog.md
View File

@ -5,7 +5,11 @@
<template>
<lay-timeline>
<lay-timeline-item title="0.2.0">
[新增] carousel 轮播组件, 初步完成切换逻辑。<br>
[新增] carousel 轮播 anim 属性, 支持 default updown 不同方向轮播。<br>
[新增] carousel 轮播 arrow 属性, 支持 always hover none 不同状态切换按钮。<br>
[新增] carousel 轮播 indicator 属性, 支持 none inside outside 不同位置轮播控制器。<br>
[新增] carousel 轮播 change 事件, 用于自定义切换回调事件。<br>
[重构] layout 系列组件, 支持 纵向布局, 横向布局, 嵌套布局等。<br>
</lay-timeline-item>
<lay-timeline-item title="0.1.9">
[新增] carousel 轮播组件, 初步完成切换逻辑。<br>

0
docs/docs/zh-CN/guide/contribution.md Normal file
View File

3
docs/docs/zh-CN/guide/introduce.md
View File

@ -1,3 +1,6 @@
::: field 基本介绍
:::
<lay-block>
layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 , Layui 的 另 一 种 呈 现 方 式
</lay-block>

0
docs/docs/zh-CN/guide/problem.md Normal file
View File

11
docs/src/layouts/Layout.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="width:100%;height:300px">
<lay-layout>
<lay-header style="background: #393d49; border-bottom: 1px solid #404553">
<lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
<lay-header style="background: #393d49; border-bottom: 1px solid #404553"
><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
<img src="../assets/logo.png" />
</lay-logo>
<ul
@ -30,14 +30,14 @@
>
<li class="layui-nav-item">
<a href="https://gitee.com/layui-vue">
<lay-icon type="layui-icon-fonts-code" size="18px"></lay-icon>
<lay-icon type="layui-icon-fonts-code" size="14px"></lay-icon>
</a>
</li>
<li class="layui-nav-item">
<a
href="https://gitee.com/layui-vue/layui-vue/issues?assignee_id=&author_id=&branch=&collaborator_ids=&issue_search=&label_ids=&label_text=&milestone_id=&priority=&private_issue=&program_id=&project_id=Jmysy%2Flayui-vue&project_type=&scope=&sort=&state=all&target_project="
>
<lay-icon type="layui-icon-chat" size="18px"></lay-icon>
<lay-icon type="layui-icon-chat" size="14px"></lay-icon>
</a>
</li>
<li class="layui-nav-item">
@ -341,6 +341,9 @@ export default {
left: 15px;
top: 16px;
}
.layui-header > .layui-nav {
background-color: transparent;
}
.layui-menu-docs {
padding-top: 10px;
}

11
docs/src/router/zh-CN.ts
View File

@ -37,9 +37,14 @@ const zhCN = [
meta: { title: '更新' },
},
{
path: '/zh-CN/guide/sandbox',
component: () => import('../../docs/zh-CN/guide/sandbox.md'),
meta: { title: '沙盒' },
path: '/zh-CN/guide/problem',
component: () => import('../../docs/zh-CN/guide/problem.md'),
meta: { title: '问题' },
},
{
path: '/zh-CN/guide/contribution',
component: () => import('../../docs/zh-CN/guide/contribution.md'),
meta: { title: '贡献' },
},
],
},

4
docs/src/styles/markdown.css
View File

@ -285,8 +285,8 @@ body::-webkit-scrollbar {
}
.layui-menu-item-group {
padding-left: 10px!important;
padding-right: 10px!important;
padding-left: 10px !important;
padding-right: 10px !important;
}
.layui-menu .layui-menu-item-group > .layui-menu-body-title {

2
docs/src/view/component.vue
View File

@ -1,4 +1,5 @@
<template>
<lay-layout>
<lay-side>
<ul class="layui-menu layui-menu-lg layui-menu-docs">
<li
@ -36,6 +37,7 @@
<router-view />
</div>
</lay-body>
</lay-layout>
</template>
<script>
import { ref, watch } from 'vue'

18
docs/src/view/guide.vue
View File

@ -1,4 +1,5 @@
<template>
<lay-layout>
<lay-side>
<ul class="layui-menu layui-menu-lg layui-menu-docs">
<li
@ -14,7 +15,9 @@
v-for="children in menu.children"
:key="children"
:class="[
currentPath === children.path ? 'layui-menu-item-checked2' : '',
currentPath === children.path
? 'layui-menu-item-checked2'
: '',
]"
@click="handleClick(children)"
>
@ -36,6 +39,7 @@
<router-view />
</div>
</lay-body>
</lay-layout>
</template>
<script>
import { ref, watch } from 'vue'
@ -80,6 +84,18 @@ export default {
subTitle: 'change log',
path: '/zh-CN/guide/changelog',
},
{
id: 4,
title: '问题',
subTitle: 'problem',
path: '/zh-CN/guide/problem',
},
{
id: 5,
title: '贡献',
subTitle: 'contribution',
path: '/zh-CN/guide/contribution',
},
],
},
]

3
docs/src/view/index.vue
View File

@ -4,7 +4,6 @@
background-color: whitesmoke;
height: 100%;
width: 100%;
margin-top: 60px;
"
>
<div class="site-banner">
@ -28,7 +27,7 @@
>
</div>
<div class="site-version">
<span>当前版本：v<cite class="site-showv">0.1.9</cite></span>
<span>当前版本：v<cite class="site-showv">0.2.0</cite></span>
<span
><router-link
class="layui-inline site-down"

382
src/css/layer.css
View File

File diff suppressed because it is too large Load Diff

82
src/css/layui.css
View File

@ -19,7 +19,6 @@ body {
}
.layui-edge,
.layui-header,
.layui-inline,
.layui-main {
position: relative;
@ -1020,86 +1019,17 @@ a cite {
margin: 0 auto;
}
.layui-header {
z-index: 1000;
height: 60px;
}
.layui-header a:hover {
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.layui-side {
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 999;
width: 200px;
}
.layui-side-scroll {
position: relative;
width: 220px;
height: 100%;
}
.layui-body {
position: relative;
left: 200px;
right: 0;
top: 0;
bottom: 0;
z-index: 900;
width: auto;
box-sizing: border-box;
}
.layui-layout-admin .layui-header {
top: 0;
left: 0;
right: 0;
position: fixed;
background-color: #23262e;
}
.layui-layout-admin .layui-side {
top: 60px;
width: 200px;
overflow-x: hidden;
}
.layui-layout-admin .layui-body {
position: absolute;
top: 60px;
padding-bottom: 44px;
}
.layui-layout-admin .layui-main {
width: auto;
margin: 0 15px;
}
.layui-layout-admin .layui-footer {
position: fixed;
left: 200px;
right: 0;
bottom: 0;
z-index: 990;
height: 44px;
line-height: 44px;
padding: 0 15px;
box-shadow: -1px 0 4px rgb(0 0 0 / 12%);
background-color: #fafafa;
}
.layui-layout-admin .layui-logo {
position: absolute;
.layui-logo {
left: 0;
top: 0;
width: 200px;
height: 100%;
height: 60px;
line-height: 60px;
text-align: center;
color: #009688;
@ -1107,10 +1037,6 @@ a cite {
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%);
}
.layui-layout-admin .layui-header .layui-nav {
background: 0 0;
}
.layui-layout-left {
position: absolute !important;
left: 200px;
@ -4826,10 +4752,6 @@ body .layui-table-tips .layui-layer-content {
background-color: #009688;
}
.layui-side .layui-nav-tree .layui-nav-bar {
width: 2px;
}
.layui-nav-tree .layui-nav-child dd.layui-this,
.layui-nav-tree .layui-nav-child dd.layui-this a,
.layui-nav-tree .layui-this,

17
src/module/body/index.vue
View File

@ -4,4 +4,21 @@
</div>
</template>
<script lang="ts">
export default {
name: 'LayBody',
}
</script>
<script setup name="LayBody" lang="ts"></script>
<style>
.layui-body {
display: block;
flex: 1;
overflow: auto;
height: 100%;
box-sizing: border-box;
min-height: 300px;
}
</style>

50
src/module/carousel/index.vue
View File

@ -1,9 +1,9 @@
<template>
<div
class="layui-carousel"
lay-anim
lay-indicator="inside"
lay-arrow="always"
:lay-anim="anim"
:lay-indicator="indicator"
:lay-arrow="arrow"
:style="{ width: width, height: height }"
>
<div carousel-item>
@ -24,18 +24,18 @@
lay-type="sub"
@click="prev"
>
</button
{{ anim === 'updown' ? '' : '' }}</button
><button
class="layui-icon layui-carousel-arrow"
lay-type="add"
@click="next"
>
{{ anim === 'updown' ? '' : '' }}
</button>
</div>
</template>
<script setup name="LayCarousel" lang="ts">
import { withDefaults, defineProps, provide, useSlots, ref } from 'vue'
import { withDefaults, defineProps, provide, useSlots, ref, computed } from 'vue'
const slot = useSlots() as any
const slots = slot.default && (slot.default() as any[])
@ -45,19 +45,31 @@ const props = withDefaults(
width?: string
height?: string
modelValue: string
anim: string
arrow: string
indicator: string
}>(),
{
width: '100%',
height: '280px',
anim: 'default',
arrow: 'hover',
indicator: 'inside'
}
)
const active = ref(props.modelValue)
const active = computed({
get() {
return props.modelValue
},
set(val) {
emit('update:modelValue', val)
},
})
const emit = defineEmits(['update:modelValue', 'change', 'close'])
const emit = defineEmits(['update:modelValue', 'change'])
const change = function (id: any) {
emit('update:modelValue', id)
emit('change', id)
active.value = id
}
@ -65,25 +77,25 @@ const change = function (id: any) {
provide('active', active)
const prev = function () {
for(var i = 0; i< slots.length; i++) {
if(slots[i].props.id === active.value) {
if(i === 0) {
return false;
for (var i = 0; i < slots.length; i++) {
if (slots[i].props.id === active.value) {
if (i === 0) {
return false
}
active.value = slots[i - 1].props.id
break;
break
}
}
}
const next = function () {
for(var i = 0; i< slots.length; i++) {
if(slots[i].props.id === active.value) {
if(i === slots.length - 1) {
return false;
for (var i = 0; i < slots.length; i++) {
if (slots[i].props.id === active.value) {
if (i === slots.length - 1) {
return false
}
active.value = slots[i + 1].props.id
break;
break
}
}
}

14
src/module/footer/index.vue
View File

@ -4,4 +4,16 @@
</div>
</template>
<script setup name="LayFooter" lang="ts"></script>
<script lang="ts">
export default {
name: 'LayFooter',
}
</script>
<script setup lang="ts"></script>
<style>
.layui-footer {
box-sizing: border-box;
}
</style>

12
src/module/header/index.vue
View File

@ -3,5 +3,15 @@
<slot />
</div>
</template>
<script setup name="LayHeader"></script>
<script lang="ts">
export default {
name: 'LayHeader',
}
</script>
<script setup lang="ts"></script>
<style>
.layui-header {
box-sizing: border-box;
height: 60px;
}
</style>

53
src/module/layout/index.vue
View File

@ -1,7 +1,54 @@
<template>
<div class="layui-layout layui-layout-admin">
<section :class="classes">
<slot />
</div>
</section>
</template>
<script lang="ts">
export default {
name: 'LayLayout',
}
</script>
<script setup lang="ts">
import { Component, computed, useSlots } from 'vue'
import Header from '../header/index.vue'
<script setup name="LayLayout" lang="ts"></script>
const props = withDefaults(
defineProps<{
isVertical?: boolean
}>(),
{
isVertical: false,
}
)
const slots = useSlots()
const isVertical = computed(() => {
if (!slots.default) return false
const vNodes = slots.default()
return vNodes.some((vNode) => {
const componentName = (vNode.type as Component).name
if (!componentName) return false
return [Header.name].includes(componentName)
})
})
const classes = computed(() => {
return ['layui-layout', { 'layui-layout-vertical': isVertical.value }]
})
</script>
<style>
.layui-layout {
display: flex;
flex: 1;
flex-basis: auto;
height: 100%;
width: 100%;
box-sizing: border-box;
}
.layui-layout-vertical {
flex-direction: column;
}
</style>

2
src/module/rate/index.vue
View File

@ -19,6 +19,7 @@ const props = withDefaults(
defineProps<{
length?: number
modelValue?: number
character?: string
}>(),
{
length: 5,
@ -45,7 +46,6 @@ const mouseenter = function (index: number) {
}
// select update 时, 通知 change 事件
emit('update:modelValue', index + 1)
}
</script>

4
src/module/scroll/index.vue
View File

@ -1,5 +1,7 @@
<template>
<div class="layui-side-scroll" />
<div class="layui-side-scroll">
<slot></slot>
</div>
</template>
<script setup name="LayScroll" lang="ts"></script>

41
src/module/side/index.vue
View File

@ -1,15 +1,38 @@
<template>
<div class="layui-side" :class="black ? 'layui-bg-black' : ''">
<div class="layui-side-scroll">
<div class="layui-side" :style="style">
<slot />
</div>
</div>
</template>
<script setup name="LaySide" lang="ts">
import { defineProps } from 'vue'
const props = defineProps<{
black?: boolean
}>()
<script lang="ts">
export default {
name: 'LaySide',
}
</script>
<script setup lang="ts">
import { computed, CSSProperties, defineProps } from 'vue'
const props = withDefaults(
defineProps<{
width?: string
}>(),
{
width: '200',
}
)
const style = computed<CSSProperties>(() => {
return {
width: `${props.width}px`,
}
})
</script>
<style>
.layui-side {
overflow: auto;
box-sizing: border-box;
min-height: 300px;
}
</style>