ci: 更新文档
This commit is contained in:
就眠仪式
parent
67a05b15c8
commit
ce26429bae
@ -1,32 +1,32 @@
|
||||
::: field 后台布局
|
||||
:::
|
||||
|
||||
<br>
|
||||
|
||||
<img src="../../../src/assets/layout.png"/>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<p>layui 之所以赢得如此多人的青睐，更多是在于它「前后界面兼备」的能力。既可编织出绚丽的前台页面，又可满足繁杂的管理系统界面需求。layui 致力于让每一位开发者都能轻松搭建自己的管理界面。下面是演示代码 :</p>
|
||||
|
||||
<br>
|
||||
|
||||
::: field 基础使用
|
||||
:::
|
||||
|
||||
```html
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-layout>
|
||||
<lay-header>
|
||||
<lay-logo>Layui Admin</lay-logo>
|
||||
</lay-header>
|
||||
<lay-header></lay-header>
|
||||
<lay-side></lay-side>
|
||||
<lay-body>
|
||||
<router-view></router-view>
|
||||
</lay-body>
|
||||
<lay-footer>pearadmin.com</lay-footer>
|
||||
<lay-body></lay-body>
|
||||
</lay-layout>
|
||||
```
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
::: field 布局组件
|
||||
:::
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
<img src="../../../src/assets/logo-2.png" style="height:220px;"/>
|
||||
|
||||
<lay-block>
|
||||
layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 , Layui 的 另 一 种 呈 现 方 式
|
||||
</lay-block>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<!--preload-links-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body style="zoom: 0.9">
|
||||
<div id="app">
|
||||
<!--app-html-->
|
||||
</div>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.8 KiB |
@ -1 +0,0 @@
|
||||
<svg id="b6a0220b-322a-435e-9212-1568a8115194" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="888" height="475.27072" viewBox="0 0 888 475.27072"><title>true_love</title><rect x="402.54442" y="219.17275" width="2.57298" height="13.89411" transform="translate(-11.71503 -369.44906) rotate(26.64397)" fill="#fff"/><path d="M426.98456,248.842a66.00006,66.00006,0,0,0-93.33814,0l-.01788.01788a65.982,65.982,0,0,0-93.30231,93.30237l-.01788.01788,93.33807,93.33807,93.33814-93.33807A66,66,0,0,0,426.98456,248.842Z" transform="translate(-156 -212.36464)" fill="#ff6584"/><path d="M709.42956,621.81706h-489.679a9.98831,9.98831,0,0,1-1.82989-.145l231.59565-401.157a16.2157,16.2157,0,0,1,28.22705,0L633.17308,489.72253l7.44637,12.8816Z" transform="translate(-156 -212.36464)" fill="#5fb878"/><polygon points="553.43 409.452 386.241 409.452 468.314 290.239 474.22 281.652 477.173 277.358 484.619 290.239 553.43 409.452" opacity="0.2"/><path d="M982.07935,621.36464H558.54722l82.07223-119.21293,5.9062-8.58777L753.47313,338.20663c7.01145-10.182,23.87881-10.81607,32.12223-1.92044a19.328,19.328,0,0,1,1.54006,1.92044Z" transform="translate(-156 -212.36464)" fill="#3f3d56"/><rect y="407.93322" width="888" height="2.24072" fill="#3f3d56"/><ellipse cx="570.05705" cy="586.26729" rx="32.34192" ry="10.15313" transform="translate(-329.28848 33.15083) rotate(-21.1763)" fill="#2f2e41"/><circle cx="349.2698" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="319.79361" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><rect x="359.09519" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><ellipse cx="336.16927" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="375.47085" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="350.90736" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="350.90736" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M442.52428,534.95878c-5.22292-23.39065,11.47266-47.02591,37.29064-52.79083s50.9816,8.52354,56.20452,31.91418-11.88759,32.01752-37.70556,37.78245S447.74721,558.34942,442.52428,534.95878Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><ellipse cx="440.41422" cy="603.0993" rx="32.34192" ry="10.15313" transform="translate(-453.46127 275.69894) rotate(-45)" fill="#2f2e41"/><path d="M473.49729,618.44821c0,6.33082,16.30083,18.832,34.38888,18.832s35.04764-17.82327,35.04764-24.15409-16.95958,1.22817-35.04764,1.22817S473.49729,612.11739,473.49729,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><ellipse cx="623.94295" cy="586.26729" rx="10.15313" ry="32.34192" transform="translate(-304.12811 743.93025) rotate(-68.8237)" fill="#2f2e41"/><circle cx="532.7302" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="698.5556" y="645.87743" width="19.65079" height="35.20766" transform="translate(1260.76198 1114.59789) rotate(-180)" fill="#2f2e41"/><rect x="659.25402" y="645.87743" width="19.65079" height="35.20766" transform="translate(1182.15883 1114.59789) rotate(-180)" fill="#2f2e41"/><ellipse cx="545.83073" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="506.52915" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="531.09264" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="531.09264" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M751.47572,534.95878c5.22292-23.39065-11.47266-47.02591-37.29064-52.79083s-50.9816,8.52354-56.20452,31.91418,11.88759,32.01752,37.70556,37.78245S746.25279,558.34942,751.47572,534.95878Z" transform="translate(-156 -212.36464)" fill="#5fb878"/><ellipse cx="753.58578" cy="603.0993" rx="10.15313" ry="32.34192" transform="translate(-361.73544 497.14467) rotate(-45)" fill="#2f2e41"/><path d="M720.50271,618.44821c0,6.33082-16.30083,18.832-34.38888,18.832s-35.04764-17.82327-35.04764-24.15409,16.95958,1.22817,35.04764,1.22817S720.50271,612.11739,720.50271,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><path d="M1044,527.22724c0,41.80115-24.85012,56.39655-55.5043,56.39655s-55.5043-14.5954-55.5043-56.39655,55.5043-94.97881,55.5043-94.97881S1044,485.42608,1044,527.22724Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><polygon points="830.474 364.865 831.042 329.881 854.699 286.601 831.131 324.393 831.387 308.663 847.691 277.35 831.454 304.5 831.454 304.5 831.914 276.209 849.373 251.28 831.986 271.76 832.273 219.884 830.469 288.559 830.617 285.726 812.866 258.555 830.332 291.164 828.678 322.761 828.629 321.922 808.166 293.329 828.567 324.885 828.36 328.836 828.323 328.896 828.34 329.22 824.144 409.383 829.751 409.383 830.423 367.977 850.775 336.499 830.474 364.865" fill="#3f3d56"/></svg>
|
||||
|
Before Width: | Height: | Size: 4.5 KiB |
@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<select :name="name" lay-verify="required" />
|
||||
<div
|
||||
class="layui-unselect layui-form-select"
|
||||
class="layui-unselect layui-form-select layui-search"
|
||||
:class="[openState ? 'layui-form-selected' : '']"
|
||||
@click="open"
|
||||
style="margin-left: 20px"
|
||||
>
|
||||
<div class="layui-select-title">
|
||||
<input
|
||||
@ -14,10 +15,12 @@
|
||||
style="
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: none;
|
||||
color: whitesmoke;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
width: 196px;
|
||||
height: 34px;
|
||||
"
|
||||
@input="change"
|
||||
/><i class="layui-edge" />
|
||||
/><i class="layui-edge"></i>
|
||||
</div>
|
||||
<dl class="layui-anim layui-anim-upbit" style="">
|
||||
<dd v-if="menus.length <= 0" class="layui-select-tips">无内容</dd>
|
||||
@ -36,7 +39,7 @@
|
||||
</template>
|
||||
|
||||
<script setup name="LaySelect" lang="ts">
|
||||
import { defineProps, Ref, ref } from 'vue'
|
||||
import { defineProps, ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { Recordable } from '/@src/module/type'
|
||||
|
||||
@ -101,3 +104,21 @@ const searchList = function (str: string, container: any) {
|
||||
return newList
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.layui-search .layui-anim::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
.layui-search .layui-anim::-webkit-scrollbar-corner {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
.layui-search .layui-anim::-webkit-scrollbar-thumb {
|
||||
background: #e6e6e6;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.layui-search .layui-anim::-webkit-scrollbar-track {
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
@ -1,33 +1,45 @@
|
||||
<template>
|
||||
<div class="width:100%;height:300px">
|
||||
<lay-layout>
|
||||
<lay-header style="background: #393d49">
|
||||
<lay-logo>
|
||||
<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: 10px; margin-bottom: 0px"
|
||||
style="margin-top: 0px; margin-bottom: 0px"
|
||||
>
|
||||
<li class="layui-nav-item">
|
||||
<router-link to="/zh-CN/home"> 首页 </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/layui-vue-sample"> 案例 </a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="https://gitee.com/layui-vue/layui-vue"> 仓库 </a>
|
||||
<a
|
||||
href="https://gitee.com/layui-vue"
|
||||
>
|
||||
<lay-icon type="layui-icon-fonts-code" size="18px"></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>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
@ -35,35 +47,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</lay-header>
|
||||
<lay-side>
|
||||
<ul
|
||||
class="layui-menu layui-menu-lg layui-menu-docs"
|
||||
style="padding: 6px"
|
||||
>
|
||||
<li
|
||||
v-for="menu in menus"
|
||||
:key="menu"
|
||||
:class="[
|
||||
currentPath === menu.path ? 'layui-menu-item-checked2' : '',
|
||||
]"
|
||||
@click="handleClick(menu)"
|
||||
>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link :to="menu.path">
|
||||
<span>{{ menu.title }}</span>
|
||||
<span class="layui-font-12 layui-font-gray">
|
||||
{{ menu.subTitle }}
|
||||
</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-side>
|
||||
<lay-body>
|
||||
<div style="padding: 20px">
|
||||
<router-view />
|
||||
</div>
|
||||
</lay-body>
|
||||
<router-view></router-view>
|
||||
</lay-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,11 +1,25 @@
|
||||
import BaseLayout from '../layouts/Layout.vue'
|
||||
import Component from '../view/component.vue'
|
||||
import Guide from '../view/guide.vue'
|
||||
import Home from '../view/home.vue'
|
||||
|
||||
const zhCN = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/zh-CN/guide/introduce',
|
||||
redirect: '/zh-CN/home',
|
||||
component: BaseLayout,
|
||||
meta: { title: '指南', icon: 'el-icon-position' },
|
||||
meta: { title: '首页', icon: 'el-icon-position' },
|
||||
children: [
|
||||
{
|
||||
path: '/zh-CN/home',
|
||||
component: Home,
|
||||
meta: { title: '指南' },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/guide',
|
||||
redirect: '/zh-CN/guide/introduce',
|
||||
component: Guide,
|
||||
meta: { title: '指南' },
|
||||
children: [
|
||||
{
|
||||
path: '/zh-CN/guide/introduce',
|
||||
@ -26,14 +40,14 @@ const zhCN = [
|
||||
path: '/zh-CN/guide/sandbox',
|
||||
component: () => import('../../docs/zh-CN/guide/sandbox.md'),
|
||||
meta: { title: '沙盒' },
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/',
|
||||
path: '/zh-CN/components',
|
||||
redirect: '/zh-CN/components/button',
|
||||
component: BaseLayout,
|
||||
meta: { title: '组件', icon: 'el-icon-copy-document' },
|
||||
component: Component,
|
||||
meta: { title: '组件' },
|
||||
children: [
|
||||
{
|
||||
path: '/zh-CN/components/layout',
|
||||
@ -225,8 +239,11 @@ const zhCN = [
|
||||
component: () => import('../../docs/zh-CN/components/colorPicker.md'),
|
||||
meta: { title: '颜色选择器' },
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default zhCN
|
||||
|
||||
293
docs/src/view/component.vue
Normal file
293
docs/src/view/component.vue
Normal file
@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<lay-side>
|
||||
<ul class="layui-menu layui-menu-lg layui-menu-docs" style="padding: 8px">
|
||||
<li
|
||||
v-for="menu in menus"
|
||||
:key="menu"
|
||||
:class="[currentPath === menu.path ? 'layui-menu-item-checked2' : '']"
|
||||
@click="handleClick(menu)"
|
||||
>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link :to="menu.path">
|
||||
<span>{{ menu.title }}</span>
|
||||
<span class="layui-font-12 layui-font-gray">
|
||||
{{ menu.subTitle }}
|
||||
</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-side>
|
||||
<lay-body>
|
||||
<div style="padding: 20px">
|
||||
<router-view />
|
||||
</div>
|
||||
</lay-body>
|
||||
</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: 4,
|
||||
title: '布局',
|
||||
subTitle: 'layout',
|
||||
path: '/zh-CN/components/layout',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '容器',
|
||||
subTitle: 'container',
|
||||
path: '/zh-CN/components/container',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '按钮',
|
||||
subTitle: 'button',
|
||||
path: '/zh-CN/components/button',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: '图标',
|
||||
subTitle: 'iconfont',
|
||||
path: '/zh-CN/components/icon',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: '面板',
|
||||
subTitle: 'panel',
|
||||
path: '/zh-CN/components/panel',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: '卡片',
|
||||
subTitle: 'card',
|
||||
path: '/zh-CN/components/card',
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: '动画',
|
||||
subTitle: 'animation',
|
||||
path: '/zh-CN/components/animation',
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: '栅格',
|
||||
subTitle: 'grid',
|
||||
path: '/zh-CN/components/grid',
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
title: '表单',
|
||||
subTitle: 'form',
|
||||
path: '/zh-CN/components/form',
|
||||
},
|
||||
{
|
||||
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: 16,
|
||||
title: '菜单',
|
||||
subTitle: 'nav',
|
||||
path: '/zh-CN/components/menu',
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
title: '面包屑',
|
||||
subTitle: 'breadcrumb',
|
||||
path: '/zh-CN/components/breadcrumb',
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
title: '进度',
|
||||
subTitle: 'progress',
|
||||
path: '/zh-CN/components/progress',
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
title: '时间线',
|
||||
subTitle: 'timeline',
|
||||
path: '/zh-CN/components/timeline',
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
title: '颜色',
|
||||
subTitle: 'color',
|
||||
path: '/zh-CN/components/color',
|
||||
},
|
||||
{
|
||||
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: 24,
|
||||
title: '字段',
|
||||
subTitle: 'field',
|
||||
path: '/zh-CN/components/field',
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
title: '空',
|
||||
subTitle: 'empty',
|
||||
path: '/zh-CN/components/empty',
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
title: '评分',
|
||||
subTitle: 'rate',
|
||||
path: '/zh-CN/components/rate',
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
title: '下拉菜单',
|
||||
subTitle: 'dropdown',
|
||||
path: '/zh-CN/components/dropdown',
|
||||
},
|
||||
{
|
||||
id: 28,
|
||||
title: '选项卡',
|
||||
subTitle: 'tab',
|
||||
path: '/zh-CN/components/tab',
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
title: '图标选择',
|
||||
subTitle: 'iconPicker',
|
||||
path: '/zh-CN/components/iconPicker',
|
||||
},
|
||||
{
|
||||
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: 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: 36,
|
||||
title: '开关',
|
||||
subTitle: 'switch',
|
||||
path: '/zh-CN/components/switch',
|
||||
},
|
||||
{
|
||||
id: 37,
|
||||
title: '滑块',
|
||||
subTitle: 'slider',
|
||||
path: '/zh-CN/components/slider',
|
||||
},
|
||||
{
|
||||
id: 38,
|
||||
title: '轮播',
|
||||
subTitle: 'carousel',
|
||||
path: '/zh-CN/components/carousel',
|
||||
},
|
||||
{
|
||||
id: 39,
|
||||
title: '下拉选择',
|
||||
subTitle: 'select',
|
||||
path: '/zh-CN/components/select',
|
||||
},
|
||||
{
|
||||
id: 40,
|
||||
title: '颜色选择器',
|
||||
subTitle: 'colorPicker',
|
||||
path: '/zh-CN/components/colorPicker',
|
||||
},
|
||||
]
|
||||
|
||||
const selected = ref(1)
|
||||
|
||||
const handleClick = function (menu) {
|
||||
selected.value = menu.id
|
||||
router.push(menu.path)
|
||||
}
|
||||
|
||||
return {
|
||||
menus,
|
||||
selected,
|
||||
currentPath,
|
||||
handleClick,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
83
docs/src/view/guide.vue
Normal file
83
docs/src/view/guide.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<lay-side>
|
||||
<ul class="layui-menu layui-menu-lg layui-menu-docs" style="padding: 8px">
|
||||
<li
|
||||
v-for="menu in menus"
|
||||
:key="menu"
|
||||
:class="[currentPath === menu.path ? 'layui-menu-item-checked2' : '']"
|
||||
@click="handleClick(menu)"
|
||||
>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link :to="menu.path">
|
||||
<span>{{ menu.title }}</span>
|
||||
<span class="layui-font-12 layui-font-gray">
|
||||
{{ menu.subTitle }}
|
||||
</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-side>
|
||||
<lay-body>
|
||||
<div style="padding: 20px">
|
||||
<router-view />
|
||||
</div>
|
||||
</lay-body>
|
||||
</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: '介绍',
|
||||
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>
|
||||
66
docs/src/view/home.vue
Normal file
66
docs/src/view/home.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<lay-body style="left: 0px;background-color:whitesmoke">
|
||||
<div class="site-banner">
|
||||
<div
|
||||
class="site-banner-bg"
|
||||
style1="background-image: url(/static/images/layui/banner/autumn.jpg?v=66); background-size: cover;"
|
||||
></div>
|
||||
<div class="site-banner-main">
|
||||
<div class="site-download">
|
||||
<router-link
|
||||
class="layui-inline site-down"
|
||||
to="/zh-CN/guide/getStarted"
|
||||
>Get Started</router-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-left:10%;margin-right:10%;">
|
||||
|
||||
</div>
|
||||
</lay-body>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
<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: 80px;
|
||||
font-size: 0;
|
||||
}
|
||||
.site-download a {
|
||||
position: relative;
|
||||
padding: 0 60px 0 60px;
|
||||
height: 65px;
|
||||
line-height: 65px;
|
||||
border-radius: 6px;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
@ -1057,10 +1057,10 @@ a cite {
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
background-color: #23262e;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user