perf(layout): 重构 layout 组件, 增强 carouel 轮播组件
This commit is contained in:
就眠仪式
parent
23ac843852
commit
3bd3dbf6cb
@ -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 |
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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
0
docs/docs/zh-CN/guide/contribution.md
Normal 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
0
docs/docs/zh-CN/guide/problem.md
Normal 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;
|
||||
}
|
||||
|
||||
@ -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: '贡献' },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -285,10 +285,10 @@ 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 {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,41 +1,43 @@
|
||||
<template>
|
||||
<lay-side>
|
||||
<ul class="layui-menu layui-menu-lg layui-menu-docs">
|
||||
<li
|
||||
v-for="menu in menus"
|
||||
:key="menu"
|
||||
class="layui-menu-item-group"
|
||||
lay-options="{type: 'group', isAllowSpread: true}"
|
||||
>
|
||||
<div class="layui-menu-body-title">{{ menu.title }}</div>
|
||||
<hr />
|
||||
<ul>
|
||||
<li
|
||||
v-for="children in menu.children"
|
||||
:key="children"
|
||||
:class="[
|
||||
currentPath === children.path ? 'layui-menu-item-checked2' : '',
|
||||
]"
|
||||
@click="handleClick(children)"
|
||||
>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link :to="children.path">
|
||||
<span>{{ children.title }}</span>
|
||||
<span class="layui-font-12 layui-font-gray">
|
||||
{{ children.subTitle }}
|
||||
</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-side>
|
||||
<lay-body>
|
||||
<div style="padding: 20px">
|
||||
<router-view />
|
||||
</div>
|
||||
</lay-body>
|
||||
<lay-layout>
|
||||
<lay-side>
|
||||
<ul class="layui-menu layui-menu-lg layui-menu-docs">
|
||||
<li
|
||||
v-for="menu in menus"
|
||||
:key="menu"
|
||||
class="layui-menu-item-group"
|
||||
lay-options="{type: 'group', isAllowSpread: true}"
|
||||
>
|
||||
<div class="layui-menu-body-title">{{ menu.title }}</div>
|
||||
<hr />
|
||||
<ul>
|
||||
<li
|
||||
v-for="children in menu.children"
|
||||
:key="children"
|
||||
:class="[
|
||||
currentPath === children.path ? 'layui-menu-item-checked2' : '',
|
||||
]"
|
||||
@click="handleClick(children)"
|
||||
>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link :to="children.path">
|
||||
<span>{{ children.title }}</span>
|
||||
<span class="layui-font-12 layui-font-gray">
|
||||
{{ children.subTitle }}
|
||||
</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-side>
|
||||
<lay-body>
|
||||
<div style="padding: 20px">
|
||||
<router-view />
|
||||
</div>
|
||||
</lay-body>
|
||||
</lay-layout>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
@ -1,41 +1,45 @@
|
||||
<template>
|
||||
<lay-side>
|
||||
<ul class="layui-menu layui-menu-lg layui-menu-docs">
|
||||
<li
|
||||
v-for="menu in menus"
|
||||
:key="menu"
|
||||
class="layui-menu-item-group"
|
||||
lay-options="{type: 'group', isAllowSpread: true}"
|
||||
>
|
||||
<div class="layui-menu-body-title">{{ menu.title }}</div>
|
||||
<hr />
|
||||
<ul>
|
||||
<lay-layout>
|
||||
<lay-side>
|
||||
<ul class="layui-menu layui-menu-lg layui-menu-docs">
|
||||
<li
|
||||
v-for="children in menu.children"
|
||||
:key="children"
|
||||
:class="[
|
||||
currentPath === children.path ? 'layui-menu-item-checked2' : '',
|
||||
]"
|
||||
@click="handleClick(children)"
|
||||
v-for="menu in menus"
|
||||
:key="menu"
|
||||
class="layui-menu-item-group"
|
||||
lay-options="{type: 'group', isAllowSpread: true}"
|
||||
>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link :to="children.path">
|
||||
<span>{{ children.title }}</span>
|
||||
<span class="layui-font-12 layui-font-gray">
|
||||
{{ children.subTitle }}
|
||||
</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="layui-menu-body-title">{{ menu.title }}</div>
|
||||
<hr />
|
||||
<ul>
|
||||
<li
|
||||
v-for="children in menu.children"
|
||||
:key="children"
|
||||
:class="[
|
||||
currentPath === children.path
|
||||
? 'layui-menu-item-checked2'
|
||||
: '',
|
||||
]"
|
||||
@click="handleClick(children)"
|
||||
>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link :to="children.path">
|
||||
<span>{{ children.title }}</span>
|
||||
<span class="layui-font-12 layui-font-gray">
|
||||
{{ children.subTitle }}
|
||||
</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-side>
|
||||
<lay-body>
|
||||
<div style="padding: 20px">
|
||||
<router-view />
|
||||
</div>
|
||||
</lay-body>
|
||||
</lay-side>
|
||||
<lay-body>
|
||||
<div style="padding: 20px">
|
||||
<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',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
@ -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"
|
||||
|
||||
1120
src/css/layer.css
1120
src/css/layer.css
File diff suppressed because it is too large
Load Diff
@ -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,
|
||||
@ -4927,7 +4849,7 @@ body .layui-table-tips .layui-layer-content {
|
||||
color: #5fb878 !important;
|
||||
}
|
||||
|
||||
.layui-breadcrumb a:nth-last-child(2) {
|
||||
.layui-breadcrumb a:nth-last-child(2) {
|
||||
color: #666;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,15 +1,38 @@
|
||||
<template>
|
||||
<div class="layui-side" :class="black ? 'layui-bg-black' : ''">
|
||||
<div class="layui-side-scroll">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="layui-side" :style="style">
|
||||
<slot />
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user