perf: 更新文档
This commit is contained in:
parent
3bd3dbf6cb
commit
3f60aabe19
@ -119,16 +119,16 @@ export default {
|
||||
::: field 轮播属性
|
||||
:::
|
||||
|
||||
| Name | Description | Accepted Values |
|
||||
| --------- | ------ | --- |
|
||||
| v-model | 当前激活项 | `--` |
|
||||
| anim | 切换方向 | `default` `updown` |
|
||||
| indicator | 控制器位置 | `inside` `outside` `none` |
|
||||
| arrow | 切换按钮状态 | `hover` `always` `none`|
|
||||
| Name | Description | Accepted Values |
|
||||
| --------- | ------------ | ------------------------- |
|
||||
| v-model | 当前激活项 | `--` |
|
||||
| anim | 切换方向 | `default` `updown` |
|
||||
| indicator | 控制器位置 | `inside` `outside` `none` |
|
||||
| arrow | 切换按钮状态 | `hover` `always` `none` |
|
||||
|
||||
::: field 轮播事件
|
||||
:::
|
||||
|
||||
| Name | Description | Accepted Values |
|
||||
| --------- | ------ | --- |
|
||||
| change | 切换回调 | id |
|
||||
| Name | Description | Accepted Values |
|
||||
| ------ | ----------- | --------------- |
|
||||
| change | 切换回调 | id |
|
||||
|
@ -29,18 +29,21 @@ export default {
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
background: #87ca9a;
|
||||
color: white;
|
||||
}
|
||||
.lay-code .layui-side {
|
||||
display: flex;
|
||||
background: #77c38c;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
.lay-code .layui-body {
|
||||
display: flex;
|
||||
background: #5FB878;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
@ -1,53 +1,51 @@
|
||||
<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)">
|
||||
<img src="../assets/logo.png" />
|
||||
</lay-logo>
|
||||
<ul
|
||||
class="layui-nav layui-layout-left"
|
||||
style="margin-top: 0px; margin-bottom: 0px"
|
||||
>
|
||||
<li class="layui-nav-item">
|
||||
<router-link to="/zh-CN/index"> 首页 </router-link>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<router-link to="/zh-CN/guide"> 指南 </router-link>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<router-link to="/zh-CN/components"> 组件 </router-link>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<lay-form>
|
||||
<lay-search :datas="menus" />
|
||||
</lay-form>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
class="layui-nav layui-layout-right"
|
||||
style="margin-top: 0px; margin-bottom: 0px"
|
||||
>
|
||||
<li class="layui-nav-item">
|
||||
<a href="https://gitee.com/layui-vue">
|
||||
<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="14px"></lay-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:void(0)"> 0.2.0 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-header>
|
||||
<router-view></router-view>
|
||||
</lay-layout>
|
||||
</div>
|
||||
<lay-layout class="layui-layout-document">
|
||||
<lay-header
|
||||
><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
|
||||
<img src="../assets/logo.png" />
|
||||
</lay-logo>
|
||||
<ul
|
||||
class="layui-nav layui-layout-left"
|
||||
style="margin-top: 0px; margin-bottom: 0px"
|
||||
>
|
||||
<li class="layui-nav-item">
|
||||
<router-link to="/zh-CN/index"> 首页 </router-link>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<router-link to="/zh-CN/guide"> 指南 </router-link>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<router-link to="/zh-CN/components"> 组件 </router-link>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<lay-form>
|
||||
<lay-search :datas="menus" />
|
||||
</lay-form>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
class="layui-nav layui-layout-right"
|
||||
style="margin-top: 0px; margin-bottom: 0px"
|
||||
>
|
||||
<li class="layui-nav-item">
|
||||
<a href="https://gitee.com/layui-vue">
|
||||
<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="14px"></lay-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:void(0)"> 0.2.0 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-header>
|
||||
<router-view></router-view>
|
||||
</lay-layout>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, watch } from 'vue'
|
||||
@ -335,6 +333,29 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.layui-layout-document > .layui-header {
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
background: #393d49;
|
||||
border-bottom: 1px solid #404553;
|
||||
}
|
||||
|
||||
.layui-layout-document > .layui-layout > .layui-side {
|
||||
overflow-x: hidden;
|
||||
position: fixed;
|
||||
margin-top: 60px;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.layui-layout-document > .layui-layout > .layui-body {
|
||||
margin-top: 60px;
|
||||
left: 200px;
|
||||
position: absolute;
|
||||
width: calc(100% - 200px);
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.layui-logo img {
|
||||
height: 31px;
|
||||
width: 82px;
|
||||
@ -350,6 +371,9 @@ export default {
|
||||
.layui-menu-docs .layui-menu-body-title .layui-font-gray {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.layui-side hr {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.layui-side {
|
||||
|
@ -253,4 +253,4 @@ const zhCN = [
|
||||
},
|
||||
]
|
||||
|
||||
export default zhCN
|
||||
export default zhCN
|
||||
|
@ -1,36 +1,40 @@
|
||||
<template>
|
||||
<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-scroll>
|
||||
<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-scroll>
|
||||
</lay-side>
|
||||
<lay-body>
|
||||
<div style="padding: 20px">
|
||||
@ -160,6 +164,12 @@ export default {
|
||||
id: 1,
|
||||
title: '表单',
|
||||
children: [
|
||||
{
|
||||
id: 36,
|
||||
title: '开关',
|
||||
subTitle: 'switch',
|
||||
path: '/zh-CN/components/switch',
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
title: '复选框',
|
||||
@ -184,30 +194,24 @@ export default {
|
||||
subTitle: 'textarea',
|
||||
path: '/zh-CN/components/textarea',
|
||||
},
|
||||
{
|
||||
id: 36,
|
||||
title: '开关',
|
||||
subTitle: 'switch',
|
||||
path: '/zh-CN/components/switch',
|
||||
},
|
||||
{
|
||||
id: 39,
|
||||
title: '下拉选择',
|
||||
subTitle: 'select',
|
||||
path: '/zh-CN/components/select',
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
title: '图标选择',
|
||||
subTitle: 'iconPicker',
|
||||
path: '/zh-CN/components/iconPicker',
|
||||
},
|
||||
{
|
||||
id: 40,
|
||||
title: '颜色选择器',
|
||||
subTitle: 'colorPicker',
|
||||
path: '/zh-CN/components/colorPicker',
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
title: '图标选择器',
|
||||
subTitle: 'iconPicker',
|
||||
path: '/zh-CN/components/iconPicker',
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
title: '评分',
|
||||
|
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<lay-layout>
|
||||
<lay-side>
|
||||
<lay-scroll>
|
||||
<ul class="layui-menu layui-menu-lg layui-menu-docs">
|
||||
<li
|
||||
v-for="menu in menus"
|
||||
@ -33,6 +34,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-scroll>
|
||||
</lay-side>
|
||||
<lay-body>
|
||||
<div style="padding: 20px">
|
||||
|
@ -1,11 +1,5 @@
|
||||
<template>
|
||||
<div
|
||||
style="
|
||||
background-color: whitesmoke;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
"
|
||||
>
|
||||
<div style="margin-top:60px;background-color: whitesmoke; height: 100%; width: 100%">
|
||||
<div class="site-banner">
|
||||
<div class="site-banner-main">
|
||||
<div class="site-zfj site-zfj-anim">
|
||||
|
@ -24,7 +24,6 @@ html #layuicss-layer {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
_height: expression(document.body.offsetHeight + 'px');
|
||||
}
|
||||
|
||||
.layui-layer {
|
||||
@ -839,7 +838,6 @@ html #layuicss-layer {
|
||||
height: 44px;
|
||||
margin-top: -22px;
|
||||
outline: 0;
|
||||
blr: expression(this.onFocus=this.blur());
|
||||
}
|
||||
|
||||
.layui-layer-imgprev {
|
||||
@ -873,7 +871,6 @@ html #layuicss-layer {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: #000\9;
|
||||
filter: Alpha(opacity=60);
|
||||
background-color: rgba(2, 0, 0, 0.35);
|
||||
color: #fff;
|
||||
|
@ -35,7 +35,14 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="LayCarousel" lang="ts">
|
||||
import { withDefaults, defineProps, provide, useSlots, ref, computed } from 'vue'
|
||||
import {
|
||||
withDefaults,
|
||||
defineProps,
|
||||
provide,
|
||||
useSlots,
|
||||
ref,
|
||||
computed,
|
||||
} from 'vue'
|
||||
|
||||
const slot = useSlots() as any
|
||||
const slots = slot.default && (slot.default() as any[])
|
||||
@ -54,7 +61,7 @@ const props = withDefaults(
|
||||
height: '280px',
|
||||
anim: 'default',
|
||||
arrow: 'hover',
|
||||
indicator: 'inside'
|
||||
indicator: 'inside',
|
||||
}
|
||||
)
|
||||
|
||||
@ -99,4 +106,4 @@ const next = function () {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
@ -16,4 +16,4 @@ export default {
|
||||
.layui-footer {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user