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

❗ 重命名 docs 为 example

Browse Source
This commit is contained in:
就眠儀式
2021-11-23 11:08:40 +08:00
parent 97788e3a77
commit 4a4ee87b65
88 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

360
example/src/view/component.vue Normal file
View File

@@ -0,0 +1,360 @@
<template>
<lay-layout>
<lay-side>
<lay-scroll style="overflow-y: 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">
<router-view />
</div>
</lay-body>
</lay-layout>
</template>
<script>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
const router = useRouter()
const currentPath = ref('/zh-CN/guide')
watch(
() => route.path,
(val) => {
currentPath.value = val
},
{
immediate: true,
deep: true,
}
)
const menus = [
{
id: 1,
title: '通用',
children: [
{
id: 20,
title: '颜色',
subTitle: 'color',
path: '/zh-CN/components/color',
},
{
id: 6,
title: '按钮',
subTitle: 'button',
path: '/zh-CN/components/button',
},
{
id: 7,
title: '图标',
subTitle: 'iconfont',
path: '/zh-CN/components/icon',
},
{
id: 10,
title: '动画',
subTitle: 'animation',
path: '/zh-CN/components/animation',
},
],
},
{
id: 1,
title: '布局',
children: [
{
id: 4,
title: '布局',
subTitle: 'layout',
path: '/zh-CN/components/layout',
},
{
id: 5,
title: '容器',
subTitle: 'container',
path: '/zh-CN/components/container',
},
{
id: 11,
title: '栅格',
subTitle: 'grid',
path: '/zh-CN/components/grid',
},
{
id: 8,
title: '面板',
subTitle: 'panel',
path: '/zh-CN/components/panel',
},
{
id: 9,
title: '卡片',
subTitle: 'card',
path: '/zh-CN/components/card',
},
],
},
{
id: 1,
title: '导航',
children: [
{
id: 16,
title: '菜单',
subTitle: 'nav',
path: '/zh-CN/components/menu',
},
{
id: 17,
title: '面包屑',
subTitle: 'breadcrumb',
path: '/zh-CN/components/breadcrumb',
},
{
id: 28,
title: '选项卡',
subTitle: 'tab',
path: '/zh-CN/components/tab',
},
{
id: 27,
title: '下拉菜单',
subTitle: 'dropdown',
path: '/zh-CN/components/dropdown',
},
],
},
{
id: 1,
title: '表单',
children: [
{
id: 36,
title: '开关',
subTitle: 'switch',
path: '/zh-CN/components/switch',
},
{
id: 32,
title: '复选框',
subTitle: 'checkbox',
path: '/zh-CN/components/checkbox',
},
{
id: 33,
title: '单选框',
subTitle: 'radio',
path: '/zh-CN/components/radio',
},
{
id: 34,
title: '输入框',
subTitle: 'input',
path: '/zh-CN/components/input',
},
{
id: 35,
title: '文本域',
subTitle: 'textarea',
path: '/zh-CN/components/textarea',
},
{
id: 39,
title: '下拉选择',
subTitle: 'select',
path: '/zh-CN/components/select',
},
{
id: 40,
title: '颜色选择器',
subTitle: 'colorPicker',
path: '/zh-CN/components/colorPicker',
},
{
id: 29,
title: '图标选择器',
subTitle: 'iconPicker',
path: '/zh-CN/components/iconPicker',
},
{
id: 26,
title: '评分',
subTitle: 'rate',
path: '/zh-CN/components/rate',
},
{
id: 37,
title: '滑块',
subTitle: 'slider',
path: '/zh-CN/components/slider',
},
{
id: 12,
title: '表单',
subTitle: 'form',
path: '/zh-CN/components/form',
},
],
},
{
id: 1,
title: '展示',
children: [
{
id: 18,
title: '进度',
subTitle: 'progress',
path: '/zh-CN/components/progress',
},
{
id: 19,
title: '时间线',
subTitle: 'timeline',
path: '/zh-CN/components/timeline',
},
{
id: 21,
title: '手风琴',
subTitle: 'collapse',
path: '/zh-CN/components/collapse',
},
{
id: 22,
title: '表格',
subTitle: 'table',
path: '/zh-CN/components/table',
},
{
id: 23,
title: '头像',
subTitle: 'avatar',
path: '/zh-CN/components/avatar',
},
{
id: 25,
title: '空',
subTitle: 'empty',
path: '/zh-CN/components/empty',
},
{
id: 29,
title: '分页',
subTitle: 'page',
path: '/zh-CN/components/page',
},
{
id: 30,
title: '树形组件',
subTitle: 'tree',
path: '/zh-CN/components/tree',
},
{
id: 31,
title: '穿梭框',
subTitle: 'transfer',
path: '/zh-CN/components/transfer',
},
{
id: 38,
title: '轮播',
subTitle: 'carousel',
path: '/zh-CN/components/carousel',
},
],
},
{
id: 1,
title: '辅助',
children: [
{
id: 13,
title: '徽章',
subTitle: 'badge',
path: '/zh-CN/components/badge',
},
{
id: 14,
title: '区块',
subTitle: 'block',
path: '/zh-CN/components/block',
},
{
id: 15,
title: '分割',
subTitle: 'line',
path: '/zh-CN/components/line',
},
{
id: 24,
title: '字段',
subTitle: 'field',
path: '/zh-CN/components/field',
},
],
},
{
id: 1,
title: '反馈',
children: [
{
id: 90,
title: '弹层',
subTitle: 'layer',
path: '/zh-CN/components/layer',
},
],
},
]
const selected = ref(1)
const handleClick = function (menu) {
selected.value = menu.id
router.push(menu.path)
}
return {
menus,
selected,
currentPath,
handleClick,
}
},
}
</script>

108
example/src/view/guide.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<lay-layout>
<lay-side>
<lay-scroll style="overflow-y: 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">
<router-view />
</div>
</lay-body>
</lay-layout>
</template>
<script>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
const router = useRouter()
const currentPath = ref('/zh-CN/guide')
watch(
() => route.path,
(val) => {
currentPath.value = val
},
{
immediate: true,
deep: true,
}
)
const menus = [
{
id: 1,
title: '基础',
children: [
{
id: 1,
title: '介绍',
subTitle: 'introduce',
path: '/zh-CN/guide/introduce',
},
{
id: 2,
title: '安装',
subTitle: 'get started',
path: '/zh-CN/guide/getStarted',
},
{
id: 3,
title: '更新',
subTitle: 'change log',
path: '/zh-CN/guide/changelog',
}
],
},
]
const selected = ref(1)
const handleClick = function (menu) {
selected.value = menu.id
router.push(menu.path)
}
return {
menus,
selected,
currentPath,
handleClick,
}
},
}
</script>

108
example/src/view/hooks.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<lay-layout>
<lay-side>
<lay-scroll style="overflow-y: 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">
<router-view />
</div>
</lay-body>
</lay-layout>
</template>
<script>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
const router = useRouter()
const currentPath = ref('/zh-CN/guide')
watch(
() => route.path,
(val) => {
currentPath.value = val
},
{
immediate: true,
deep: true,
}
)
const menus = [
{
id: 1,
title: 'hooks',
children: [
{
id: 1,
title: '事件',
subTitle: 'useClickOutside',
path: '/zh-CN/hooks/useClickOutside',
},
{
id: 3,
title: '拖拽',
subTitle: 'useMove',
path: '/zh-CN/hooks/useMove',
},
{
id: 2,
title: '全屏',
subTitle: 'useFullScreen',
path: '/zh-CN/hooks/useFullScreen',
},
],
},
]
const selected = ref(1)
const handleClick = function (menu) {
selected.value = menu.id
router.push(menu.path)
}
return {
menus,
selected,
currentPath,
handleClick,
}
},
}
</script>

248
example/src/view/index.vue Normal file
View File

@@ -0,0 +1,248 @@
<template>
<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">
<i
class="layui-icon"
style="color: #fff; color: rgba(255, 255, 255, 0.6)"
></i
>
</div>
<div class="layui-anim site-desc site-desc-anim">
<p class="web-font-desc">layui - vue</p>
<cite>layui vue, A component library for Vue 3 base on layui</cite>
</div>
<div class="site-download">
<router-link
class="layui-inline site-down"
to="/zh-CN/guide/getStarted"
>Get Started</router-link
>
</div>
<div class="site-version">
<span>当前版本：v<cite class="site-showv">0.2.4</cite></span>
<span
><router-link
class="layui-inline site-down"
to="/zh-CN/guide/changelog"
>更新日志</router-link
></span
>
<span>下载量：<em class="site-showdowns">1824</em></span>
</div>
</div>
<div class="site-banner-other">
<a
href="https://gitee.com/layui-vue"
target="_blank"
rel="nofollow"
class="site-star"
>
<i class="layui-icon"></i> Star <cite id="getStars">257</cite>
</a>
<a
href="https://gitee.com/layui-vue"
target="_blank"
rel="nofollow"
class="site-fork"
>
Gitee
</a>
</div>
</div>
<div style="margin-left: 10%; margin-right: 10%">
<div>
<ul class="layui-row layui-col-space30 site-idea">
<li class="layui-col-md8">
<div>
<fieldset class="layui-elem-field layui-field-title">
<legend>返璞归真</legend>
<p>
身处在前端社区的繁荣之下，我们都在有意或无意地追逐。而 layui
偏偏回望当初，奔赴在返璞归真的漫漫征途，自信并勇敢着，追寻于原生态的书写指令，试图以最简单的方式诠释高效。
</p>
</fieldset>
</div>
</li>
<li class="layui-col-md8">
<div>
<fieldset class="layui-elem-field layui-field-title">
<legend>双面体验</legend>
<p>
拥有双面的不仅是人生，还有
layui。一面极简，一面丰盈。极简是视觉所见的外在，是开发所念的简易。丰盈是倾情雕琢的内在，是信手拈来的承诺。一切本应如此，简而全，双重体验。
</p>
</fieldset>
</div>
</li>
<li class="layui-col-md8">
<div>
<fieldset class="layui-elem-field layui-field-title">
<legend>星辰大海</legend>
<p>
如果眼下还是一团零星之火，那运筹帷幄之后，迎面东风，就是一场烈焰燎原吧，那必定会是一番尽情的燃烧。待，秋风萧瑟时，散作满天星辰，你看那四季轮回<!--海天相接-->，正是
layui 不灭的执念。
</p>
</fieldset>
</div>
</li>
</ul>
</div>
</div>
<div class="footer footer-index">
<p>
Copyright © 2021 <a href="/index.html">layui-vue.pearadmin.com</a> MIT
Licensed
</p>
<p></p>
</div>
</div>
</template>
<style>
.site-banner {
position: relative;
height: 600px;
text-align: center;
overflow: hidden;
background-color: #393d49;
}
.site-banner-bg {
background-position: center 0;
}
.site-banner-bg,
.site-banner-main {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.site-download {
margin-top: 72px;
font-size: 0;
}
.site-download a {
position: relative;
padding: 0 50px 0 50px;
height: 60px;
line-height: 60px;
border-radius: 4px;
border: 1px solid #c2c2c2;
border-color: rgba(255, 255, 255, 0.2);
font-size: 24px;
color: #ccc;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.site-download a:hover {
background-color: rgba(255, 255, 255, 0.05);
border-radius: 50px;
color: #ccc;
}
.site-zfj {
padding-top: 25px;
height: 220px;
}
.site-zfj-anim i {
-webkit-animation-name: site-zfj;
animation-name: site-zfj;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.site-zfj i {
position: absolute;
left: 50%;
top: 50px;
width: 200px;
height: 200px;
margin-left: -100px;
font-size: 180px;
color: #c2c2c2;
}
.site-desc-anim {
-webkit-animation-name: site-desc;
animation-name: site-desc;
}
.site-desc {
position: relative;
height: 70px;
margin-top: 20px;
}
.site-desc .web-font-desc {
color: #fff;
color: rgba(255, 255, 255, 0.8);
font-size: 51px;
}
.web-font-desc {
font-style: normal;
font-weight: 300;
}
.site-desc cite {
position: absolute;
bottom: -40px;
left: 0;
width: 100%;
color: #c2c2c2;
color: rgba(255, 255, 255, 0.66);
font-style: normal;
}
.site-version {
position: relative;
margin-top: 18px;
color: #ccc;
font-size: 12px;
}
.site-version span {
padding: 0 3px;
}
.site-version * {
font-style: normal;
}
.site-version a {
color: #e2e2e2;
text-decoration: none;
margin-top: -4px;
}
.site-banner-other {
position: absolute;
left: 0;
bottom: 35px;
width: 100%;
text-align: center;
font-size: 0;
}
.site-banner-other a {
display: inline-block;
vertical-align: middle;
height: 28px;
line-height: 28px;
margin: 0 6px;
padding: 0 8px;
border-radius: 4px;
color: #c2c2c2;
color: rgba(255, 255, 255, 0.8);
border: 1px solid #c2c2c2;
border-color: rgba(255, 255, 255, 0.2);
font-size: 14px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.footer {
width: 100%;
padding: 30px 15px;
line-height: 30px;
text-align: center;
color: #666;
font-weight: 300;
}
</style>