chore: 升级 monorepo 架构
This commit is contained in:
就眠儀式
10
package/document/src/App.vue
Normal file
10
package/document/src/App.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
export default {
|
||||
name: "App",
|
||||
};
|
||||
</script>
|
||||
33
package/document/src/assets/background.svg
Normal file
33
package/document/src/assets/background.svg
Normal file
@@ -0,0 +1,33 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%" viewBox="0 0 1400 800">
|
||||
|
||||
<rect x="1300" y="400" rx="40" ry="40" width="300" height="300" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
|
||||
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 1450 550" to="360 1450 550" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
|
||||
<path d="M 100 350 A 150 150 0 1 1 400 350 Q400 370 380 370 L 250 370 L 120 370 Q100 370 100 350" stroke="rgb(253, 214, 99)" fill="rgb(253, 214, 99)">
|
||||
<animateMotion path="M 800 -200 L 800 -300 L 800 -200" dur="20s" begin="0s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 210 530 ; -30 210 530 ; 0 210 530" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<circle cx="200" cy="150" r="30" stroke="#1a73e8" fill="#1a73e8">
|
||||
<animateMotion path="M 0 0 L 40 20 Z" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- 三角形 -->
|
||||
<path d="M 165 580 L 270 580 Q275 578 270 570 L 223 483 Q220 480 217 483 L 165 570 Q160 578 165 580" stroke="rgb(238, 103, 92)" fill="rgb(238, 103, 92)">
|
||||
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 210 530" to="360 210 530" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<circle cx="1200" cy="600" r="30" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
|
||||
<animateMotion path="M 0 0 L -20 40 Z" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<path d="M 100 350 A 40 40 0 1 1 180 350 L 180 430 A 40 40 0 1 1 100 430 Z" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
|
||||
<animateMotion path="M 140 390 L 180 360 L 140 390" dur="20s" begin="0s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 140 390; -60 140 390; 0 140 390" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<rect x="400" y="600" rx="40" ry="40" width="100" height="100" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
|
||||
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="-30 550 750" to="330 550 750" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
215
package/document/src/assets/css/code.css
Normal file
215
package/document/src/assets/css/code.css
Normal file
@@ -0,0 +1,215 @@
|
||||
code {
|
||||
margin: 0;
|
||||
border-radius: 3px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-family: var(--code-font-family);
|
||||
font-size: 0.85em;
|
||||
color: var(--c-text-light);
|
||||
background-color: var(--code-inline-bg-color);
|
||||
}
|
||||
|
||||
code .token.deleted {
|
||||
color: #ec5975;
|
||||
}
|
||||
|
||||
code .token.inserted {
|
||||
color: var(--c-brand);
|
||||
}
|
||||
|
||||
div[class*='language-'] {
|
||||
position: relative;
|
||||
margin: 1rem -1.5rem;
|
||||
background-color: #fafafa;
|
||||
overflow-x: auto;
|
||||
border: 1px solid whitesmoke;
|
||||
}
|
||||
|
||||
li > div[class*='language-'] {
|
||||
border-radius: 6px 0 0 6px;
|
||||
margin: 1rem -1.5rem 1rem -1.25rem;
|
||||
}
|
||||
|
||||
@media (min-width: 420px) {
|
||||
div[class*='language-'] {
|
||||
margin: 1rem 1.8rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
li > div[class*='language-'] {
|
||||
margin: 1rem 0 1rem 0rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.lay-code div[class*='language-'] {
|
||||
margin: 1rem 0.8rem;
|
||||
margin: 0.5rem 0.8rem 1rem 0.8rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
[class*='language-'] pre,
|
||||
[class*='language-'] code {
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
[class*='language-'] pre {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: transparent;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
[class*='language-'] pre p {
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
[class*='language-'] code {
|
||||
padding: 0;
|
||||
line-height: var(--code-line-height);
|
||||
font-size: var(--code-font-size);
|
||||
color: #000;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
/* Line highlighting */
|
||||
|
||||
.highlight-lines {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 1.25rem 0;
|
||||
width: 100%;
|
||||
line-height: var(--code-line-height);
|
||||
font-family: var(--code-font-family);
|
||||
font-size: var(--code-font-size);
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.highlight-lines .highlighted {
|
||||
background-color: rgba(0, 0, 0, 0.66);
|
||||
}
|
||||
|
||||
/* Line numbers mode */
|
||||
|
||||
div[class*='language-'].line-numbers-mode {
|
||||
padding-left: 3.5rem;
|
||||
}
|
||||
|
||||
.line-numbers-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.5);
|
||||
padding: 1.25rem 0;
|
||||
width: 3.5rem;
|
||||
text-align: center;
|
||||
line-height: var(--code-line-height);
|
||||
font-family: var(--code-font-family);
|
||||
font-size: var(--code-font-size);
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* Language marker */
|
||||
|
||||
[class*='language-']:before {
|
||||
position: absolute;
|
||||
top: 0.6em;
|
||||
right: 1em;
|
||||
z-index: 2;
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/**
|
||||
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML.
|
||||
* Based on https://github.com/chriskempson/tomorrow-theme
|
||||
*
|
||||
* @author Rose Pritchard
|
||||
*/
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.attr-name,
|
||||
.token.namespace,
|
||||
.token.deleted {
|
||||
color: #e2777a;
|
||||
}
|
||||
|
||||
.token.function-name {
|
||||
color: #6196cc;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.function {
|
||||
color: #f08d49;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.class-name,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: #f8c555;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.builtin {
|
||||
color: #cc99cd;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.attr-value,
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: #7ec699;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url {
|
||||
color: #67cdcc;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: green;
|
||||
}
|
||||
3
package/document/src/assets/css/index.css
Normal file
3
package/document/src/assets/css/index.css
Normal file
@@ -0,0 +1,3 @@
|
||||
@import './code.css';
|
||||
@import './markdown.css';
|
||||
@import './vars.css';
|
||||
270
package/document/src/assets/css/markdown.css
Normal file
270
package/document/src/assets/css/markdown.css
Normal file
@@ -0,0 +1,270 @@
|
||||
.utterances {
|
||||
margin-top: 30px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1.4;
|
||||
font-size: 16px;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 600 !important;
|
||||
font-size: 16.8px !important;
|
||||
margin-top: 20px !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-weight: 700;
|
||||
font-size: 16.8px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
h1:hover .header-anchor,
|
||||
h1:focus .header-anchor,
|
||||
h2:hover .header-anchor,
|
||||
h2:focus .header-anchor,
|
||||
h3:hover .header-anchor,
|
||||
h3:focus .header-anchor,
|
||||
h4:hover .header-anchor,
|
||||
h4:focus .header-anchor,
|
||||
h5:hover .header-anchor,
|
||||
h5:focus .header-anchor,
|
||||
h6:hover .header-anchor,
|
||||
h6:focus .header-anchor {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 1.5rem;
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 420px) {
|
||||
h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 4px !important;
|
||||
margin-bottom: 22px !important;
|
||||
color: #000000d9 !important;
|
||||
font-weight: 500 !important;
|
||||
font-size: 20px !important;
|
||||
font-family: Avenir, -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
|
||||
helvetica neue, Arial, noto sans, sans-serif, apple color emoji,
|
||||
segoe ui emoji, segoe ui symbol, noto color emoji, sans-serif;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
area,
|
||||
button,
|
||||
[role='button'],
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
a.header-anchor {
|
||||
float: left;
|
||||
margin-top: 0.125em;
|
||||
margin-left: -0.87em;
|
||||
padding-right: 0.23em;
|
||||
font-size: 0.85em;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
a.header-anchor:hover,
|
||||
a.header-anchor:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.site-doc-icon {
|
||||
margin-bottom: 50px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.site-doc-icon li .doc-icon-name,
|
||||
.site-doc-icon li .doc-icon-code {
|
||||
color: #c2c2c2;
|
||||
}
|
||||
|
||||
.site-doc-icon li .doc-icon-fontclass {
|
||||
height: 40px;
|
||||
line-height: 20px;
|
||||
padding: 0 5px;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.site-doc-icon li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 16.5%;
|
||||
height: 105px;
|
||||
line-height: 25px;
|
||||
padding: 20px 0;
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
border: 1px solid #e2e2e2;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
transition: all 0.3s;
|
||||
-webkit-transition: all 0.3s;
|
||||
}
|
||||
.site-doc-icon li:hover{
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
|
||||
.site-doc-icon li .layui-icon {
|
||||
display: inline-block;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.site-doc-color {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.site-doc-necolor li div {
|
||||
border-radius: 0;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.site-doc-color li div {
|
||||
padding: 20px 10px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.site-doc-bgcolor li {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.site-idea {
|
||||
margin: 30px 0;
|
||||
margin-top: 16px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.site-idea li {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.site-idea li div {
|
||||
padding: 25px;
|
||||
line-height: 24px;
|
||||
border: 1px solid #d2d2d2;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.site-idea .layui-field-title {
|
||||
border-color: #d2d2d2;
|
||||
}
|
||||
|
||||
.site-idea .layui-field-title legend {
|
||||
margin: 0 20px 20px 0;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.anim .site-doc-icon {
|
||||
margin-bottom: 50px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.anim .site-doc-icon li {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.anim .site-doc-anim li {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.anim .site-doc-icon li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 16.5%;
|
||||
height: 105px;
|
||||
line-height: 25px;
|
||||
padding: 20px 0;
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
border: 1px solid #e2e2e2;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
transition: all 0.3s;
|
||||
-webkit-transition: all 0.3s;
|
||||
}
|
||||
|
||||
.anim .site-doc-icon li .layui-anim {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
line-height: 125px;
|
||||
margin: 0 auto 10px;
|
||||
text-align: center;
|
||||
background-color: var(--global-primary-color);
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.anim .site-doc-icon li .code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.markdown-body th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.layui-menu-item-group {
|
||||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
|
||||
.layui-menu .layui-menu-item-group > .layui-menu-body-title {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.lay-link:hover{
|
||||
color: #5FB878;
|
||||
}
|
||||
12
package/document/src/assets/css/vars.css
Normal file
12
package/document/src/assets/css/vars.css
Normal file
@@ -0,0 +1,12 @@
|
||||
:root {
|
||||
--c-white: #ffffff;
|
||||
--c-black: #000000;
|
||||
}
|
||||
|
||||
:root {
|
||||
--code-line-height: 24px;
|
||||
--code-font-family: var(--font-family-mono);
|
||||
--code-font-size: 14px;
|
||||
--code-inline-bg-color: rgba(27, 31, 35, 0.05);
|
||||
--code-bg-color: #282c34;
|
||||
}
|
||||
BIN
package/document/src/assets/layui-logo.png
Normal file
BIN
package/document/src/assets/layui-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
package/document/src/assets/logo-new.png
Normal file
BIN
package/document/src/assets/logo-new.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
package/document/src/assets/logo-png.png
Normal file
BIN
package/document/src/assets/logo-png.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
BIN
package/document/src/assets/logo.jpg
Normal file
BIN
package/document/src/assets/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
package/document/src/assets/logo.png
Normal file
BIN
package/document/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
1
package/document/src/assets/start.svg
Normal file
1
package/document/src/assets/start.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 40 KiB |
270
package/document/src/components/LayAnchor.vue
Normal file
270
package/document/src/components/LayAnchor.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<aside :class="classAside">
|
||||
<div class="lay-aside-top">
|
||||
<lay-button
|
||||
type="primary"
|
||||
size="xs"
|
||||
:class="classAsideBtn"
|
||||
@click="handlerBtnClick()"
|
||||
>
|
||||
<lay-icon :type="iconType" size="40"> </lay-icon>
|
||||
</lay-button>
|
||||
</div>
|
||||
<lay-scroll :scrollWidth="0">
|
||||
<ul>
|
||||
<li
|
||||
v-for="(anchor, index) in anchorList"
|
||||
:key="index"
|
||||
class="lay-aside-list"
|
||||
:class="{ active: index === activeIndex }"
|
||||
@click.prevent="handlerListItemClick(index, anchor)"
|
||||
>
|
||||
<a
|
||||
:href="`#${anchor}`"
|
||||
class="lay-aside-link"
|
||||
:class="{ active: index === activeIndex }"
|
||||
>{{ anchor }}</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-scroll>
|
||||
</aside>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, shallowRef, watch } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
anchors?: Array<string> | string;
|
||||
currIndex: number;
|
||||
show: boolean;
|
||||
}>();
|
||||
|
||||
let activeIndex = ref<number>(0);
|
||||
const show = ref<boolean>(props.show);
|
||||
const iconType = ref<string>("layui-icon-right");
|
||||
const anchors: string | string[] | undefined = props.anchors;
|
||||
/**滚动条高度 */
|
||||
const scrollTop = ref<number>(0);
|
||||
/**要监听的滚动元素 */
|
||||
const scrollRefEl = shallowRef<HTMLElement | undefined>(undefined);
|
||||
/**折叠动画 */
|
||||
let enableAnimation = false;
|
||||
|
||||
const anchorList = computed(() => {
|
||||
return typeof anchors === "string" ? anchors?.split(",") : anchors;
|
||||
});
|
||||
|
||||
const classAside = computed(() => [
|
||||
"lay-aside",
|
||||
{ "lay-aside-animation": enableAnimation },
|
||||
{ "lay-aside-collapse": !show.value },
|
||||
]);
|
||||
|
||||
const classAsideBtn = computed(() => {
|
||||
let classBtn = [];
|
||||
if (enableAnimation) {
|
||||
classBtn = [
|
||||
"lay-aside-collapse-btn",
|
||||
"lay-aside-animation",
|
||||
{ "lay-aside-collapse-btn-collapse": !show.value },
|
||||
];
|
||||
} else {
|
||||
classBtn = [
|
||||
"lay-aside-collapse-btn",
|
||||
{ "lay-aside-collapse-btn-collapse": !show.value },
|
||||
];
|
||||
|
||||
enableAnimation = true;
|
||||
}
|
||||
return classBtn;
|
||||
});
|
||||
|
||||
const handlerBtnClick = () => {
|
||||
show.value = !show.value;
|
||||
};
|
||||
|
||||
const handlerListItemClick = (index: number, id: string) => {
|
||||
activeIndex.value = index;
|
||||
scrollToTitle(id);
|
||||
};
|
||||
|
||||
/**锚点标签跟随滚动高亮 */
|
||||
const handlerScroll = () => {
|
||||
// 距离顶部 90 改变 activeIndex
|
||||
scrollTop.value = getScrollTop(scrollRefEl.value) + 90;
|
||||
anchorList.value?.forEach((item, index) => {
|
||||
const elOffsetTop = document.getElementById(item)?.offsetTop;
|
||||
if (elOffsetTop) {
|
||||
if (index === 0 && scrollTop.value < elOffsetTop) {
|
||||
activeIndex.value = 0;
|
||||
} else if (scrollTop.value >= elOffsetTop) {
|
||||
activeIndex.value = index;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handlerCollapse = () => {
|
||||
iconType.value = show.value ? "layui-icon-right" : "layui-icon-left";
|
||||
// @ts-ignore
|
||||
scrollRefEl.value!.firstElementChild!.style.marginRight = show.value
|
||||
? "180px"
|
||||
: "0px";
|
||||
};
|
||||
|
||||
watch(show, () => {
|
||||
handlerCollapse();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// @ts-ignore TODO 封装 hooks
|
||||
scrollRefEl.value = document.querySelector(".layui-body");
|
||||
if (!scrollRefEl.value) {
|
||||
throw new Error(`scroll element is not existed: ".layui-body"`);
|
||||
}
|
||||
scrollRefEl.value.scrollTop = 0;
|
||||
scrollRefEl.value?.addEventListener("scroll", throttle(handlerScroll, 500));
|
||||
// 如果已折叠,关闭组件初始渲染时的动画,然后自动开启
|
||||
// @ts-ignore
|
||||
show.value =
|
||||
scrollRefEl.value!.firstElementChild!.style.marginRight !== "0px";
|
||||
enableAnimation = show.value;
|
||||
});
|
||||
|
||||
/**获取滚动高度 */
|
||||
const getScrollTop = (el: HTMLElement | undefined): number => {
|
||||
return el
|
||||
? el.scrollTop
|
||||
: window.pageYOffset ||
|
||||
document.documentElement.scrollTop ||
|
||||
document.body.scrollTop ||
|
||||
0;
|
||||
};
|
||||
/**平滑滚动 */
|
||||
const scrollToTitle = (id: string): void => {
|
||||
document.getElementById(id)?.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
inline: "nearest",
|
||||
});
|
||||
};
|
||||
|
||||
const throttle = (func: Function, wait: number) => {
|
||||
var timer: any = null;
|
||||
return (...args: any) => {
|
||||
if (!timer) {
|
||||
timer = setTimeout(() => {
|
||||
timer = null;
|
||||
func.apply(this, args);
|
||||
}, wait);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.lay-aside {
|
||||
position: fixed;
|
||||
top: 65px;
|
||||
right: 17px;
|
||||
box-sizing: border-box;
|
||||
width: 180px;
|
||||
padding: 0 25px;
|
||||
border-left: 1px solid rgb(229 230 235);
|
||||
transition: none;
|
||||
-webkit-transition: none;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.lay-aside-collapse {
|
||||
right: -180px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.lay-aside-top {
|
||||
height: 29px;
|
||||
}
|
||||
|
||||
.lay-aside-link {
|
||||
display: inline-block;
|
||||
padding: 1px 4px;
|
||||
color: grey;
|
||||
font-size: 13px;
|
||||
line-height: 2;
|
||||
max-width: 140px;
|
||||
min-width: 68px;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s cubic-bezier(0, 0, 1, 1);
|
||||
}
|
||||
.lay-aside-list {
|
||||
position: relative;
|
||||
margin: 5px 0px 0px 4px;
|
||||
padding-left: 2px;
|
||||
max-width: 140px;
|
||||
border-radius: 2px;
|
||||
list-style: none;
|
||||
&:hover {
|
||||
background-color: #f6f6f6 !important;
|
||||
color: var(--global-checked-color);
|
||||
}
|
||||
&:active {
|
||||
background-color: #f6f6f6 !important;
|
||||
color: var(--global-checked-color);
|
||||
}
|
||||
&.active {
|
||||
background-color: #f6f6f6 !important;
|
||||
* {
|
||||
color: var(--global-checked-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lay-aside-collapse-btn {
|
||||
position: fixed;
|
||||
right: 197px;
|
||||
top: calc(50% - 20px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 40px;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 0px;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border: rgb(229 230 235) 1px solid;
|
||||
border-right: none;
|
||||
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
|
||||
transition: none;
|
||||
-webkit-transition: none;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
&:hover {
|
||||
background-color: #e2e2e2;
|
||||
}
|
||||
}
|
||||
.lay-aside-collapse-btn-collapse {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.lay-aside-animation {
|
||||
transition: right 200ms;
|
||||
-webkit-transition: right 200ms;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.lay-aside {
|
||||
width: 100px !important;
|
||||
}
|
||||
.lay-aside-collapse-btn {
|
||||
right: 98px;
|
||||
}
|
||||
.lay-aside-collapse-btn-collapse {
|
||||
right: 15px;
|
||||
}
|
||||
.lay-aside-list {
|
||||
max-width: 68px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
219
package/document/src/components/LayCode.vue
Normal file
219
package/document/src/components/LayCode.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div class="lay-code">
|
||||
<div id="source" class="source">
|
||||
<slot />
|
||||
<div v-if="$slots.description" class="description">
|
||||
<slot name="description" />
|
||||
</div>
|
||||
</div>
|
||||
<div ref="meta" class="meta">
|
||||
<div class="language-html">
|
||||
<slot name="code" />
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'is-fixed': isFixContorl }" class="control">
|
||||
<i
|
||||
class="layui-icon layui-icon-play btn"
|
||||
@click="onPlayground"
|
||||
title="在 Playground 中打开"
|
||||
/>
|
||||
<i
|
||||
class="layui-icon layui-icon-file btn"
|
||||
@click="copy"
|
||||
title="复制代码"
|
||||
/>
|
||||
<i
|
||||
class="layui-icon layui-icon-fonts-code btn"
|
||||
@click="toggle"
|
||||
title="查看代码"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { layer } from "@layui/layer-vue";
|
||||
import { onMounted, onUnmounted, ref, watch } from "vue";
|
||||
|
||||
import { usePlayGround } from "../plugin/usePlayground";
|
||||
|
||||
const meta = ref<HTMLElement>({} as HTMLElement);
|
||||
const isFixContorl = ref(false);
|
||||
const codeAreaHeight = ref(0);
|
||||
|
||||
const show = ref(false);
|
||||
|
||||
const toggle = function () {
|
||||
show.value = !show.value;
|
||||
};
|
||||
|
||||
const onPlayground = function () {
|
||||
const foundCodes = meta.value.getElementsByClassName("language-html");
|
||||
const foundCode = foundCodes[0];
|
||||
const SourceCode = foundCode.textContent || "";
|
||||
|
||||
const { link } = usePlayGround(SourceCode, true);
|
||||
window.open(link);
|
||||
};
|
||||
|
||||
const copy = function () {
|
||||
const foundCodes = meta.value.getElementsByClassName("language-html");
|
||||
const foundCode = foundCodes[0];
|
||||
let successful = false;
|
||||
// 使用原生系统剪贴板，只适用被授权安全的站点，http下不能使用
|
||||
if (navigator.clipboard && document.hasFocus()) {
|
||||
const text = foundCode.textContent || "";
|
||||
navigator.clipboard.writeText(text);
|
||||
successful = true;
|
||||
} else if (window.getSelection()) {
|
||||
// 使用document.execCommand
|
||||
// 代码div显示状态直接使用，隐藏状态则创建一个div
|
||||
var range = document.createRange();
|
||||
let copyDiv;
|
||||
if (show.value) {
|
||||
range.selectNode(foundCode);
|
||||
} else {
|
||||
copyDiv = document.createElement("div");
|
||||
copyDiv.innerHTML = foundCode.innerHTML;
|
||||
copyDiv.style.position = "fixed";
|
||||
copyDiv.style.left = "-9999px";
|
||||
document.body.appendChild(copyDiv);
|
||||
range.selectNode(copyDiv);
|
||||
}
|
||||
window.getSelection()?.addRange(range);
|
||||
try {
|
||||
successful = document.execCommand("copy");
|
||||
} catch (err) {
|
||||
successful = false;
|
||||
console.error(err);
|
||||
}
|
||||
window.getSelection()?.removeAllRanges();
|
||||
copyDiv?.remove();
|
||||
}
|
||||
|
||||
if (successful) {
|
||||
layer.msg("复制成功", { icon: 1, time: 1000 }, () => {});
|
||||
} else {
|
||||
layer.msg("复制失败", { icon: 2, time: 1000 }, () => {});
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const foundDescs = meta.value.getElementsByClassName("description");
|
||||
const foundCodes = meta.value.getElementsByClassName("language-html");
|
||||
|
||||
if (foundDescs.length) {
|
||||
codeAreaHeight.value =
|
||||
foundDescs[0].clientHeight + foundCodes[0].clientHeight + 30;
|
||||
} else {
|
||||
codeAreaHeight.value = foundCodes[0].clientHeight + 20;
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
watch(show, (value) => {
|
||||
if (value) {
|
||||
meta.value.style.height = `${codeAreaHeight.value}px`;
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
setTimeout(handleScroll, 100);
|
||||
} else {
|
||||
meta.value.style.height = "0";
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
}
|
||||
});
|
||||
|
||||
function handleScroll() {
|
||||
const { top, bottom } = meta.value.getBoundingClientRect();
|
||||
isFixContorl.value =
|
||||
bottom > window.innerHeight && top + 44 <= window.innerHeight;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.lay-code {
|
||||
margin: 1rem 0;
|
||||
border: 1px solid whitesmoke;
|
||||
border-radius: 3px;
|
||||
background: var(--c-bg);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.lay-code:hover {
|
||||
box-shadow: var(--shadow-2);
|
||||
}
|
||||
.lay-code .source {
|
||||
padding: 24px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.lay-code .meta {
|
||||
padding: 0 10px;
|
||||
height: 0;
|
||||
background-color: var(--c-page-background);
|
||||
overflow: hidden;
|
||||
transition: height 0.2s;
|
||||
}
|
||||
.lay-code .source .description {
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
margin-bottom: 0px;
|
||||
border: 1px solid whitesmoke;
|
||||
box-sizing: border-box;
|
||||
background: var(--c-bg);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: var(--c-text-light-1);
|
||||
word-break: break-word;
|
||||
}
|
||||
.lay-code .source .description p {
|
||||
margin: 0 !important;
|
||||
line-height: 26px !important;
|
||||
}
|
||||
.lay-code .source .description code {
|
||||
display: inline-block;
|
||||
padding: 1px 5px;
|
||||
margin: 0 4px;
|
||||
height: 18px;
|
||||
border-radius: 2px;
|
||||
background-color: var(--code-inline-bg-color);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: var(--c-text-light);
|
||||
}
|
||||
|
||||
.lay-code .control {
|
||||
height: 44px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid whitesmoke;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
background: var(--c-bg);
|
||||
text-align: center;
|
||||
color: var(--c-text);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
}
|
||||
.lay-code .control.is-fixed {
|
||||
position: sticky;
|
||||
z-index: 11;
|
||||
bottom: 0;
|
||||
}
|
||||
.lay-code .control:hover {
|
||||
background-color: var(--c-page-background);
|
||||
color: var(--c-brand);
|
||||
}
|
||||
.lay-code .control > i {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
line-height: 44px;
|
||||
transition: all 0.3s;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.btn:hover::before {
|
||||
color: #5fb878;
|
||||
}
|
||||
</style>
|
||||
73
package/document/src/components/LaySearch.vue
Normal file
73
package/document/src/components/LaySearch.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div id="docsearch"></div>
|
||||
</template>
|
||||
|
||||
<script setup name="LaySelect" lang="ts">
|
||||
import { onMounted } from "vue";
|
||||
|
||||
onMounted(() => {
|
||||
// @ts-ignore
|
||||
docsearch({
|
||||
appId: "BIYZTK0F0Q",
|
||||
apiKey: "de599990b844bc1b325310f61ad19a78",
|
||||
indexName: "layui-vue",
|
||||
container: "#docsearch",
|
||||
debug: false,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.DocSearch-Button {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Search-Icon,
|
||||
.DocSearch-Button-Placeholder {
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
:root {
|
||||
--docsearch-logo-color: var(--global-primary-color);
|
||||
--docsearch-primary-color: var(--global-primary-color);
|
||||
--docsearch-searchbox-background: rgba(255, 255, 255, 0.02);
|
||||
--docsearch-searchbox-focus-background: rgba(255, 255, 255, 0.02);
|
||||
--docsearch-container-background: rgba(0, 0, 0, 0.1);
|
||||
--docsearch-searchbox-shadow: inset 0 0 0 1px var(--docsearch-primary-color);
|
||||
}
|
||||
.DocSearch-Button {
|
||||
width: 150px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.DocSearch-Button-Container {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Placeholder {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.DocSearch-Button,
|
||||
.DocSearch-Button:hover,
|
||||
.DocSearch-Button:active,
|
||||
.DocSearch-Button:focus {
|
||||
border: 1px solid rgb(224, 224, 230);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Key {
|
||||
border: 1px solid rgba(60, 60, 60, 0.29);
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Search-Icon,
|
||||
.DocSearch-Button-Placeholder {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.DocSearch-Button-Keys {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
37
package/document/src/components/LayTableBox.vue
Normal file
37
package/document/src/components/LayTableBox.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="lay-table-box">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.lay-table-box table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
empty-cells: show;
|
||||
border-right: 1px solid whitesmoke;
|
||||
border-left: 1px solid whitesmoke;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.lay-table-box table tbody {
|
||||
border-bottom: 1px solid whitesmoke;
|
||||
}
|
||||
.lay-table-box table th,
|
||||
.lay-table-box table td {
|
||||
font-size: 14px;
|
||||
width: 50px;
|
||||
max-width: 180px;
|
||||
height: 50px; /*统一每一行的默认高度*/
|
||||
border-top: 1px solid whitesmoke; /*内部边框样式*/
|
||||
padding: 0 10px; /*内边距*/
|
||||
padding-left: 28px;
|
||||
}
|
||||
.lay-table-box table th {
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
.lay-table-box table th,
|
||||
.lay-table-box table td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
0
package/document/src/document/.keep
Normal file
0
package/document/src/document/.keep
Normal file
115
package/document/src/document/zh-CN/components/animation.md
Normal file
115
package/document/src/document/zh-CN/components/animation.md
Normal file
@@ -0,0 +1,115 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 在实用价值的前提之下，我们并没有内置过多花俏的动画。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div class="anim">
|
||||
<ul class="layui-border-box site-doc-icon site-doc-anim">
|
||||
<li style="height:auto">
|
||||
<div class="layui-anim layui-anim-down" @click="replay">顶部往下滑入</div>
|
||||
<div class="code">layui-anim-down</div>
|
||||
</li>
|
||||
<li style="height:auto">
|
||||
<div class="layui-anim layui-anim-downbit" @click="replay">微微往下滑入</div>
|
||||
<div class="code">layui-anim-downbit</div>
|
||||
</li>
|
||||
<li style="height:auto">
|
||||
<div class="layui-anim layui-anim-up" @click="replay">底部往上滑入</div>
|
||||
<div class="code">layui-anim-up</div>
|
||||
</li>
|
||||
<li style="height:auto">
|
||||
<div class="layui-anim layui-anim-upbit" @click="replay">微微往上滑入</div>
|
||||
<div class="code">layui-anim-upbit</div>
|
||||
</li>
|
||||
<li style="height:auto">
|
||||
<div class="layui-anim layui-anim-scale" @click="replay">平滑放大</div>
|
||||
<div class="code">layui-anim-scale</div>
|
||||
</li>
|
||||
<li style="height:auto">
|
||||
<div class="layui-anim layui-anim-scaleSpring" @click="replay">弹簧式放大</div>
|
||||
<div class="code">layui-anim-scaleSpring</div>
|
||||
</li>
|
||||
<li style="height:auto">
|
||||
<div class="layui-anim layui-anim-scalesmall" @click="replay">平滑放小</div>
|
||||
<div class="code">layui-anim-scalesmall</div>
|
||||
</li>
|
||||
<li style="height:auto">
|
||||
<div class="layui-anim layui-anim-scalesmall-spring" @click="replay">弹簧式放小</div>
|
||||
<div class="code">layui-anim-scalesmall-spring</div>
|
||||
</li>
|
||||
<li style="height:auto">
|
||||
<div class="layui-anim layui-anim-fadein" @click="replay">渐现</div>
|
||||
<div class="code">layui-anim-fadein</div>
|
||||
</li>
|
||||
<li style="height:auto">
|
||||
<div class="layui-anim layui-anim-fadeout" @click="replay">渐隐</div>
|
||||
<div class="code">layui-anim-fadeout</div>
|
||||
</li>
|
||||
<li style="height:auto">
|
||||
<div class="layui-anim layui-anim-rotate" @click="replay">360度旋转</div>
|
||||
<div class="code">layui-anim-rotate</div>
|
||||
</li>
|
||||
<li style="height:auto">
|
||||
<div class="layui-anim layui-anim-rotate layui-anim-loop" @click="replay">循环动画</div>
|
||||
<div class="code">追加：layui-anim-loop</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const replay = (e) => {
|
||||
const el = e.currentTarget;
|
||||
const targetClass = el.classList[1];
|
||||
el.classList.remove(targetClass);
|
||||
setTimeout(() => {
|
||||
el.classList.add(targetClass);
|
||||
},100)
|
||||
}
|
||||
return {
|
||||
replay
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 动画类名
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 类名 | 描述 | 使用 |
|
||||
| --------------------------------- | ------------ | ---------------------------------------------- |
|
||||
| layui-anim-down | 顶部往下滑入 | `layui-anim layui-anim-down` |
|
||||
| layui-anim-downbit | 微微往下滑入 | `layui-anim layui-anim-downbit` |
|
||||
| layui-anim-up | 底部往上滑入 | `layui-anim layui-anim-up` |
|
||||
| layui-anim-upbit | 微微往上滑入 | `layui-anim ayui-anim-upbit` |
|
||||
| layui-anim-scale | 平滑放大 | `layui-anim layui-anim-scale` |
|
||||
| layui-anim-scaleSpring | 弹簧式放大 | `layui-anim layui-anim-scaleSpring` |
|
||||
| layui-anim-scalesmall | 平滑放小 | `layui-anim layui-anim-scalesmall` |
|
||||
| layui-anim-scalesmall-spring | 弹簧式放小 | `layui-anim layui-anim-scalesmall-spring` |
|
||||
| layui-anim-fadein | 渐现 | `layui-anim layui-anim-fadein` |
|
||||
| layui-anim-fadeout | 渐隐 | `layui-anim layui-anim-fadeout` |
|
||||
| layui-anim-rotate | 360 度旋转 | `layui-anim layui-anim-rotate` |
|
||||
| layui-anim-rotate layui-anim-loop | 循环动画 | `layui-anim layui-anim-rotate layui-anim-loop` |
|
||||
|
||||
:::
|
||||
|
||||
::: previousNext animation
|
||||
:::
|
||||
139
package/document/src/document/zh-CN/components/avatar.md
Normal file
139
package/document/src/document/zh-CN/components/avatar.md
Normal file
@@ -0,0 +1,139 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 用来代表用户或事物，支持图片、图标或字符展示。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-avatar` 标签, 创建头像
|
||||
|
||||
<template>
|
||||
<lay-avatar :src="src"></lay-avatar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const src = ref("https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png")
|
||||
|
||||
return {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 圆角头像
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-avatar :src="src" radius></lay-avatar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
|
||||
|
||||
return {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 尺寸大小
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-avatar :src="src" size="xs"></lay-avatar>
|
||||
|
||||
<lay-avatar :src="src" size="sm"></lay-avatar>
|
||||
|
||||
<lay-avatar :src="src"></lay-avatar>
|
||||
|
||||
<lay-avatar :src="src" size="lg"></lay-avatar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
|
||||
|
||||
return {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 头像列表
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-avatar-list>
|
||||
<lay-avatar :src="src" radius></lay-avatar>
|
||||
<lay-avatar :src="src" radius></lay-avatar>
|
||||
<lay-avatar :src="src" radius></lay-avatar>
|
||||
<lay-avatar :src="src" radius></lay-avatar>
|
||||
<lay-avatar :src="src" radius></lay-avatar>
|
||||
</lay-avatar-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
|
||||
|
||||
return {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Avatar 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ------ | ---- | -------------- |
|
||||
| src | 图源 | -- |
|
||||
| size | 尺寸 | `xs` `sm` `lg` |
|
||||
| radius | 圆形 | `true` `false` |
|
||||
|
||||
:::
|
||||
|
||||
::: previousNext avatar
|
||||
:::
|
||||
135
package/document/src/document/zh-CN/components/backtop.md
Normal file
135
package/document/src/document/zh-CN/components/backtop.md
Normal file
@@ -0,0 +1,135 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 当用户需要频繁返回顶部查看相关内容时。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
|
||||
:::
|
||||
::: demo 回到顶部组件的默认样式，`lay-backtop` 会自动寻找最近的可滚动祖先元素，也可以使用 `target` 属性指定触发滚动事件的元素，通过滑动来查看页面右下角的正方形按钮。
|
||||
<template>
|
||||
<lay-backtop></lay-backtop>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
:::title 自定义
|
||||
|
||||
::: demo 回到顶部组件可自定义样式，限制宽高：50px \* 50px，`showHeight = 0` 将始终显示，`disabled` 属性禁用返回顶部。查看页面右下角的圆形按钮。
|
||||
|
||||
<template>
|
||||
<!-- 使用默认插槽自定义 -->
|
||||
<lay-tooltip content="插槽自定义 backtop " position="left">
|
||||
<lay-backtop @click="handlerClick" :showHeight="0" :bottom="160" bgcolor="#5FB878" circle disabled>
|
||||
<lay-icon type="layui-icon-dialogue" size="30px"></lay-icon>
|
||||
</lay-backtop>
|
||||
</lay-tooltip>
|
||||
<!-- 使用样式属性自定义 -->
|
||||
<lay-tooltip content="属性自定义 backtop " position="left">
|
||||
<lay-backtop :bottom="100" bgcolor="#5FB878" icon="layui-icon-up" circle></lay-backtop>
|
||||
</lay-tooltip>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { layer } from "@layui/layer-vue"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const handlerClick = () => {
|
||||
layer.msg("layui-vue", { time: 1000 });
|
||||
}
|
||||
|
||||
return {
|
||||
handlerClick,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 挂载容器
|
||||
|
||||
:::
|
||||
::: demo 通过设置 `target` 和 `position="absolute"` 参数，可对特定容器进行返回顶部操作
|
||||
|
||||
<template>
|
||||
<!-- 需要用一个 div 包裹触发滚动事件的目标元素和 lay-backtop 组件 -->
|
||||
<div class="wrapper" style="width:700px; height:300px;">
|
||||
<div id="scrollContent" style="overflow-y:auto; overflow-x:auto; width:700px; height:300px;background-color:whitesmoke;">
|
||||
<lay-panel v-for="(n,index) in 50" :key="n" style="margin:10px;padding:10px;">内容</lay-panel>
|
||||
</div>
|
||||
<lay-backtop target="#scrollContent" :showHeight="100" :bottom="30" position="absolute"></lay-backtop>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ------------ | --------------------------------------------- | ---------------- | ---------------- | ------------------------------ |
|
||||
| target | 可选，触发滚动事件的对象 | string \| Window | `window` | `CSS/Element 选择器` `window` |
|
||||
| showHeight | 可选，滚动高度达到该值后<br>显示回到顶部按钮 | number | `200` | — |
|
||||
| disabled | 可选，禁用点击返回顶部 | boolean | `false` | `true` `false` |
|
||||
| position | 可选，定位方式，特定容器内部<br>需设置为 absolute | string | `fixed` | `absolute` `fixed` |
|
||||
| right | 可选，按钮距离页面右边距 | number | `30` | — |
|
||||
| size | 可选，按钮大小 | string | —— | `medium` `small` |
|
||||
| bottom | 可选，按钮距离页面底部位置 | number | `40` | `40` |
|
||||
| bgcolor | 可选，背景颜色 | string | `#9F9F9F` | — |
|
||||
| opacity | 可选，不透明度 | number | `0.95` | `0-1` |
|
||||
| color | 可选，前景颜色 | string | `#FFFFFF` | — |
|
||||
| borderRadius | 可选，添加圆角 | number \| string | `2` | e: 2 \| 2px \|50% |
|
||||
| circle | 可选，使用圆形按钮 | boolean | `false` | `true` `false` |
|
||||
| icon | 可选，图标类型 | string | `layui-icon-top` | `lay-icon`组件支持的所有类型 |
|
||||
| iconSize | 可选，图标大小 | number | `30` | `30` |
|
||||
| iconColor | 可选，图标颜色 | string | `#FFFFFF` | — |
|
||||
|
||||
:::
|
||||
|
||||
::: title Backtop 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ------ | -------------------------- | -------- |
|
||||
| click | 点击回到顶部按钮的回调函数 | event |
|
||||
|
||||
:::
|
||||
|
||||
::: title Backtop 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 说明 |
|
||||
| ------ | ---------- |
|
||||
| default| 自定义内容 |
|
||||
|
||||
:::
|
||||
|
||||
::: previousNext backtop
|
||||
:::
|
||||
74
package/document/src/document/zh-CN/components/badge.md
Normal file
74
package/document/src/document/zh-CN/components/badge.md
Normal file
@@ -0,0 +1,74 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬，而显得十分和谐。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-badge` 标签, 创建徽章
|
||||
|
||||
<template>
|
||||
<lay-badge type="dot"></lay-badge>
|
||||
<lay-badge type="dot" theme="orange"></lay-badge>
|
||||
<lay-badge type="dot" theme="green"></lay-badge>
|
||||
<lay-badge type="dot" theme="cyan"></lay-badge>
|
||||
<lay-badge type="dot" theme="blue"></lay-badge>
|
||||
<lay-badge type="dot" theme="black"></lay-badge>
|
||||
<lay-badge type="dot" theme="gray"></lay-badge>
|
||||
<lay-badge >赤</lay-badge>
|
||||
<lay-badge theme="orange">橙</lay-badge>
|
||||
<lay-badge theme="green">绿</lay-badge>
|
||||
<lay-badge theme="cyan">青</lay-badge>
|
||||
<lay-badge theme="blue">蓝</lay-badge>
|
||||
<lay-badge theme="black">黑</lay-badge>
|
||||
<lay-badge theme="gray">灰</lay-badge>
|
||||
<lay-badge type="rim">6</lay-badge>
|
||||
<lay-badge type="rim">Hot</lay-badge>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Badge 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----- | ---- | --------------------------------------------- |
|
||||
| type | 类型 | `dot` `rim` |
|
||||
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Badge 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 备注 |
|
||||
| ----- | ---- | --------------------------------------------- |
|
||||
| default | 默认 | 非 `dot` 可用 |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext badge
|
||||
:::
|
||||
116
package/document/src/document/zh-CN/components/breadcrumb.md
Normal file
116
package/document/src/document/zh-CN/components/breadcrumb.md
Normal file
@@ -0,0 +1,116 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 显示当前页面在系统层级结构中的位置，并能向上返回。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-breadcrumb>
|
||||
<lay-breadcrumb-item title="工作空间"></lay-breadcrumb-item>
|
||||
<lay-breadcrumb-item title="控制台"></lay-breadcrumb-item>
|
||||
<lay-breadcrumb-item title="访问量"></lay-breadcrumb-item>
|
||||
</lay-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 指定分割
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-breadcrumb separator=">">
|
||||
<lay-breadcrumb-item title="热门音乐"></lay-breadcrumb-item>
|
||||
<lay-breadcrumb-item title="王杰"></lay-breadcrumb-item>
|
||||
<lay-breadcrumb-item title="谁明浪子心"></lay-breadcrumb-item>
|
||||
</lay-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 使用插槽
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-breadcrumb separator="--">
|
||||
<lay-breadcrumb-item>今天</lay-breadcrumb-item>
|
||||
<lay-breadcrumb-item>有些</lay-breadcrumb-item>
|
||||
<lay-breadcrumb-item>不开心</lay-breadcrumb-item>
|
||||
</lay-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Breadcrumb 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 默认值 |
|
||||
| --------- | ------ | ------ |
|
||||
| separator | 分割符 | `/` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Breadcrumb 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 默认值 |
|
||||
| ------- | -------- | ------ |
|
||||
| default | 默认插槽 | `--` |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext breadcrumb
|
||||
:::
|
||||
347
package/document/src/document/zh-CN/components/button.md
Normal file
347
package/document/src/document/zh-CN/components/button.md
Normal file
@@ -0,0 +1,347 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 按钮用于开始一个即时操作。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-button` 标签, 创建一个按钮
|
||||
|
||||
<template>
|
||||
<lay-button type="primary">原始按钮</lay-button>
|
||||
<lay-button>默认按钮</lay-button>
|
||||
<lay-button type="normal">百搭按钮</lay-button>
|
||||
<lay-button type="warm">暖色按钮</lay-button>
|
||||
<lay-button type="danger">警告按钮</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 简约按钮
|
||||
:::
|
||||
|
||||
::: demo 使用 `border` 属性设置边框颜色
|
||||
|
||||
<template>
|
||||
<lay-button>原始按钮</lay-button>
|
||||
<lay-button border="green">默认按钮</lay-button>
|
||||
<lay-button border="blue">百搭按钮</lay-button>
|
||||
<lay-button border="orange">暖色按钮</lay-button>
|
||||
<lay-button border="red">警告按钮</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 按钮尺寸
|
||||
:::
|
||||
|
||||
::: demo 使用 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
|
||||
|
||||
<template>
|
||||
<lay-button type="primary" size="lg">原始按钮</lay-button>
|
||||
<lay-button type="default" size="lg">默认按钮</lay-button>
|
||||
<lay-button type="normal" size="lg">百搭按钮</lay-button>
|
||||
<lay-button type="warm" size="lg">暖色按钮</lay-button>
|
||||
<lay-button type="danger" size="lg">警告按钮</lay-button>
|
||||
<lay-button type="disabled" size="lg">禁用按钮</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 流式按钮
|
||||
:::
|
||||
|
||||
::: demo 使用 `fluid` 属性, 创建最大化按钮
|
||||
|
||||
<template>
|
||||
<lay-button type="primary" fluid="true">最大化按钮</lay-button>
|
||||
<br/>
|
||||
<br/>
|
||||
<lay-button type="default" fluid="true">最大化按钮</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 圆角按钮
|
||||
:::
|
||||
|
||||
::: demo 使用 `radius` 属性，创建圆角按钮
|
||||
|
||||
<template>
|
||||
<lay-button type="primary" radius>原始按钮</lay-button>
|
||||
<lay-button type="default" radius>默认按钮</lay-button>
|
||||
<lay-button type="normal" radius>百搭按钮</lay-button>
|
||||
<lay-button type="warm" radius>暖色按钮</lay-button>
|
||||
<lay-button type="danger" radius>警告按钮</lay-button>
|
||||
<lay-button disabled radius>禁用按钮</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 按钮分组
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-button-group` 标签, 创建一个按钮组
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-button-group>
|
||||
<lay-button type="default">默认按钮</lay-button>
|
||||
<lay-button type="default">默认按钮</lay-button>
|
||||
<lay-button type="default">默认按钮</lay-button>
|
||||
</lay-button-group>
|
||||
<lay-button-group>
|
||||
<lay-button type="primary">默认按钮</lay-button>
|
||||
<lay-button type="primary">默认按钮</lay-button>
|
||||
<lay-button type="primary">默认按钮</lay-button>
|
||||
</lay-button-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 图标按钮
|
||||
:::
|
||||
|
||||
::: demo 结合 `lay-icon` 组件, 创建图标按钮
|
||||
|
||||
<template>
|
||||
<lay-button-container>
|
||||
<lay-button type="primary"><lay-icon type="layui-icon-left"></lay-icon></lay-button>
|
||||
<lay-button type="primary"><lay-icon type="layui-icon-right"></lay-icon></lay-button>
|
||||
<lay-button prefix-icon="layui-icon-left" suffix-icon="layui-icon-right"></lay-button>
|
||||
</lay-button-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 按钮容器
|
||||
:::
|
||||
|
||||
::: demo 尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器
|
||||
|
||||
<template>
|
||||
<lay-button-container>
|
||||
<lay-button type="default">新增</lay-button>
|
||||
<lay-button type="default">删除</lay-button>
|
||||
<lay-button type="default">修改</lay-button>
|
||||
</lay-button-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 加载按钮
|
||||
:::
|
||||
|
||||
::: demo 使用 `loading` 属性, 控制按钮的加载状态
|
||||
|
||||
<template>
|
||||
<lay-button-container>
|
||||
<lay-button type="default" :loading="loadState">加载</lay-button>
|
||||
<lay-switch v-model="loadState"></lay-switch>
|
||||
</lay-button-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const loadState = ref(true)
|
||||
|
||||
return {
|
||||
loadState
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 事件处理
|
||||
:::
|
||||
|
||||
::: demo 使用 `@click` 设置单击回调
|
||||
|
||||
<template>
|
||||
<lay-button type="default" @click="clickHandle">单击事件</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const clickHandle = () => {
|
||||
console.log('点击事件')
|
||||
}
|
||||
|
||||
return {
|
||||
clickHandle
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Button 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ----------- | -------- | ------- | --------- | ---------------------------------- |
|
||||
| type | 主题 | string | `primary` | `primary` `normal` `warm` `danger` |
|
||||
| size | 尺寸 | string | -- | `lg` `sm` `xs` |
|
||||
| fluid | 最大化 | boolean | `false` | `true` `false` |
|
||||
| radius | 圆角 | boolean | `false` | `true` `false` |
|
||||
| border | 边框 | string | `green` | `green` `blue` `orange` `red` |
|
||||
| disabled | 禁用 | boolean | `false` | `true` `false` |
|
||||
| loading | 加载 | boolean | `false` | `true` `false` |
|
||||
| native-type | 原生类型 | string | `button` | `button` `submit` `reset` |
|
||||
| prefix-icon | 前置图标 | string | -- | 内置 icon 集 |
|
||||
| suffix-icon | 后置图标 | string | -- | 内置 icon 集 |
|
||||
|
||||
:::
|
||||
|
||||
::: title Button 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 名称 | 描述 | 参数 |
|
||||
| ------- | -------- | ---- |
|
||||
| default | 默认内容 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Button Group 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ---- | ---- | ---- | ------ | ------ |
|
||||
| - | - | - | - |
|
||||
|
||||
:::
|
||||
|
||||
::: title Button Group 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ------- | -------- | ---- |
|
||||
| default | 默认内容 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext button
|
||||
:::
|
||||
226
package/document/src/document/zh-CN/components/card.md
Normal file
226
package/document/src/document/zh-CN/components/card.md
Normal file
@@ -0,0 +1,226 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-card` 标签, 创建卡片组件
|
||||
|
||||
<template>
|
||||
<div class="card-container">
|
||||
<lay-card title="标题">
|
||||
内容
|
||||
</lay-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.card-container {
|
||||
background: whitesmoke;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 卡片插槽
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div class="card-container">
|
||||
<lay-card>
|
||||
<template v-slot:title>
|
||||
标题
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
内容
|
||||
</template>
|
||||
</lay-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.card-container {
|
||||
background: whitesmoke;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 简单使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div class="card-container">
|
||||
<lay-card>
|
||||
内容
|
||||
</lay-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.card-container {
|
||||
background: whitesmoke;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 使用插槽
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div class="card-container">
|
||||
<lay-card>
|
||||
<template v-slot:title>
|
||||
标题
|
||||
</template>
|
||||
<template v-slot:extra>
|
||||
更多
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
内容
|
||||
</template>
|
||||
</lay-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.card-container {
|
||||
background: whitesmoke;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 边框阴影
|
||||
:::
|
||||
|
||||
::: demo 通过 shadow 属性设置卡片阴影出现的时机。 该属性的值可以是：always、hover或never。
|
||||
|
||||
<template>
|
||||
<div class="card-container">
|
||||
<lay-card>
|
||||
内容
|
||||
</lay-card>
|
||||
<lay-card shadow="hover">
|
||||
内容
|
||||
</lay-card>
|
||||
<lay-card shadow="never">
|
||||
内容
|
||||
</lay-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.card-container {
|
||||
background: whitesmoke;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title Card 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----- | ---- | ------ |
|
||||
| title | 标题 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Card 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 可选值 |
|
||||
| ------- | -------- | ------ |
|
||||
| default | 默认插槽 | -- |
|
||||
| header | 头部插槽 | -- |
|
||||
| body | 内容插槽 | -- |
|
||||
| extra | 扩展插槽 | -- |
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext card
|
||||
:::
|
||||
188
package/document/src/document/zh-CN/components/carousel.md
Normal file
188
package/document/src/document/zh-CN/components/carousel.md
Normal file
@@ -0,0 +1,188 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-carousel v-model="active">
|
||||
<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>
|
||||
|
||||
:::
|
||||
|
||||
::: title 不同方向
|
||||
:::
|
||||
|
||||
::: 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>
|
||||
|
||||
:::
|
||||
|
||||
::: title 控制位置
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<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>
|
||||
|
||||
:::
|
||||
|
||||
::: title 动态遍历
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-carousel v-model="active">
|
||||
<lay-carousel-item :id="item.id" v-for="item in arrays">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">{{ item.text }}</div>
|
||||
</lay-carousel-item>
|
||||
</lay-carousel>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const active = ref("1")
|
||||
|
||||
const arrays = ref([
|
||||
{id: "1", text: ""},
|
||||
{id: "2", text: ""},
|
||||
{id: "3", text: ""},
|
||||
{id: "4", text: ""}
|
||||
])
|
||||
|
||||
return {
|
||||
active,
|
||||
arrays
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title Carousel 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| --------- | ------------ | ------------------------- |
|
||||
| v-model | 当前激活项 | `--` |
|
||||
| anim | 切换方向 | `default` `updown` |
|
||||
| indicator | 控制器位置 | `inside` `outside` `none` |
|
||||
| arrow | 切换按钮状态 | `hover` `always` `none` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Carousel 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 可选值 |
|
||||
| ------ | -------- | ------ |
|
||||
| change | 切换回调 | id |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext carousel
|
||||
:::
|
||||
226
package/document/src/document/zh-CN/components/checkbox.md
Normal file
226
package/document/src/document/zh-CN/components/checkbox.md
Normal file
@@ -0,0 +1,226 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 在一组可选项中进行多项选择时。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-checkbox` 标签, 创建一个复选框
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-checkbox name="like" skin="primary" v-model="checked1" label="1" ></lay-checkbox>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const checked1 = ref(false)
|
||||
|
||||
return {
|
||||
checked1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 默认样式
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-checkbox name="like" label="1" v-model="checked2" >普通</lay-checkbox>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const checked2 = ref(false)
|
||||
|
||||
return {
|
||||
checked2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 复选框组
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-checkbox-group v-model="checkeds" @change="groupChange">
|
||||
<lay-checkbox name="like" skin="primary" label="1">写作</lay-checkbox>
|
||||
<lay-checkbox name="like" skin="primary" label="2">画画</lay-checkbox>
|
||||
<lay-checkbox name="like" skin="primary" label="3">运动</lay-checkbox>
|
||||
</lay-checkbox-group>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const checkeds = ref(['1','2']);
|
||||
const groupChange = function(val) {
|
||||
console.log("回调:" + JSON.stringify(val))
|
||||
}
|
||||
|
||||
return {
|
||||
checkeds,
|
||||
groupChange
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 完整案例
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-checkbox name="like" skin="primary" v-model="checked3" label="1">写作</lay-checkbox>
|
||||
<lay-checkbox name="like" skin="primary" v-model="checked4" label="2">画画</lay-checkbox>
|
||||
<lay-checkbox name="like" skin="primary" v-model="checked5" label="3">运动</lay-checkbox>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const checked3 = ref(true);
|
||||
const checked4 = ref(true);
|
||||
const checked5 = ref(true);
|
||||
|
||||
return {
|
||||
checked3, checked4, checked5
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 禁用状态
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-checkbox name="like" skin="primary" label="1" :disabled="disabled" v-model="checked6">禁用</lay-checkbox>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const disabled = ref(true)
|
||||
|
||||
const checked6 = ref(false);
|
||||
|
||||
return {
|
||||
disabled,checked6
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 事件回调
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-checkbox name="like" skin="primary" label="1" @change="change" v-model="checked7">回调</lay-checkbox>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const checked7 = ref(true);
|
||||
|
||||
const change = function(isChecked) {
|
||||
console.log("是否选中:" + isChecked)
|
||||
}
|
||||
|
||||
return {
|
||||
change,
|
||||
checked7
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Checkbox 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ------------------- | ------------- | -------------------- |
|
||||
| name | 原始属性 name | -- |
|
||||
| skin | 主题 | -- |
|
||||
| label | 选中值 | -- |
|
||||
| v-model | 是否选中 | `true` `false` |
|
||||
| change | 切换事件 | isChecked : 当前状态 |
|
||||
|
||||
:::
|
||||
|
||||
::: title Checkbox 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 可选值 |
|
||||
| ------ | -------- | -------------------- |
|
||||
| change | 切换事件 | isChecked : 当前状态 |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext checkbox
|
||||
:::
|
||||
255
package/document/src/document/zh-CN/components/collapse.md
Normal file
255
package/document/src/document/zh-CN/components/collapse.md
Normal file
@@ -0,0 +1,255 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 折叠面板则能有效地节省页面的可视面积。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-collapse v-model="openKeys">
|
||||
<lay-collapse-item title="标题" id="1"> 内容 </lay-collapse-item>
|
||||
<lay-collapse-item title="标题" id="2"> 内容 </lay-collapse-item>
|
||||
<lay-collapse-item title="标题" id="3"> 内容 </lay-collapse-item>
|
||||
</lay-collapse>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const openKeys = ref(["1","2","3"])
|
||||
|
||||
return {
|
||||
openKeys
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 手风琴效果
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-collapse v-model="openKeys2" accordion>
|
||||
<lay-collapse-item title="标题1" id="1"> 内容1 </lay-collapse-item>
|
||||
<lay-collapse-item title="标题2" id="2"> 内容2 </lay-collapse-item>
|
||||
<lay-collapse-item title="标题3" id="3"> 内容3 </lay-collapse-item>
|
||||
</lay-collapse>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const openKeys2 = ref("2")
|
||||
|
||||
return {
|
||||
openKeys2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 禁用属性
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-collapse v-model="openKeys3">
|
||||
<lay-collapse-item title="标题" id="1" disabled> 内容 </lay-collapse-item>
|
||||
<lay-collapse-item title="标题" id="2"> 内容 </lay-collapse-item>
|
||||
<lay-collapse-item title="标题" id="3" disabled> 内容 </lay-collapse-item>
|
||||
</lay-collapse>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const openKeys3 = ref(["1","2"])
|
||||
|
||||
return {
|
||||
openKeys3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 标题插槽
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-collapse v-model="openKeys4">
|
||||
<lay-collapse-item title="标题" id="1">
|
||||
<template #title>自定义标题<i class="layui-icon layui-icon-heart-fill" style="color:red;"></i></template>
|
||||
内容
|
||||
</lay-collapse-item>
|
||||
<lay-collapse-item title="标题" id="2">
|
||||
<template v-slot:title="props">自定义标题{{props}}</template>
|
||||
内容
|
||||
</lay-collapse-item>
|
||||
<lay-collapse-item title="标题" id="3"> 内容 </lay-collapse-item>
|
||||
</lay-collapse>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const openKeys4 = ref(["1","2"])
|
||||
|
||||
return {
|
||||
openKeys4
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title 关闭动画
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-collapse v-model="openKeys5" :collapseTransition="collapseTransition">
|
||||
<lay-collapse-item title="标题1" id="1"> 内容1 </lay-collapse-item>
|
||||
<lay-collapse-item title="标题2" id="2"> 内容2 </lay-collapse-item>
|
||||
<lay-collapse-item title="标题3" id="3"> 内容3 </lay-collapse-item>
|
||||
</lay-collapse>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const collapseTransition = ref(false)
|
||||
const openKeys5 = ref("2")
|
||||
|
||||
return {
|
||||
openKeys5,
|
||||
collapseTransition
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 事件使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-collapse v-model="emit1" @change="change">
|
||||
<lay-collapse-item title="标题1" :id="1"> 内容1 </lay-collapse-item>
|
||||
<lay-collapse-item title="标题2" :id="2"> 内容2 </lay-collapse-item>
|
||||
<lay-collapse-item title="标题3" id="haha"> 内容3 </lay-collapse-item>
|
||||
</lay-collapse>
|
||||
<div style="color:#ff5722;">F12 打开调试工具 -> console 控制面板进行查看事件输出</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const emit1 = ref([1, 2, "haha"])
|
||||
|
||||
const change = function(id, isShow, activeValues){
|
||||
console.log("change", id, isShow, activeValues);
|
||||
}
|
||||
|
||||
return {
|
||||
emit1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Collapse 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| Name | Description | Accepted Values | Default Value |
|
||||
| --------- | ----------------------- | --------------- | --------------- |
|
||||
| openKeys | 默认打开的折叠面板子项key | `string`/`array`| -- |
|
||||
| accordion | 是否开启手风琴效果 | `boolean` | `false` |
|
||||
| collapse-transition | 折叠动画 | `true` `false` | `true` |
|
||||
:::
|
||||
|
||||
::: title Collapse 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| Name | Description | Callback Params |
|
||||
| -------- | -------------------- | ---------------- |
|
||||
| change | 折叠面板变化触发事件 | (`id`, `isShow`, activeValues)<br> <br> `id`: (`number` / `string`)对应当前操作面板的值 <br> <br> `isShow`: (`boolean`)`true` -> 展开, `false` -> 折叠 <br> <br> `activeValues`: (`Array`)当前状态为展开的面板值集合|
|
||||
|
||||
:::
|
||||
|
||||
::: title Collapse Item 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| Name | Description | Accepted Values | Default Value |
|
||||
| --------- | ----------------------- | --------------- | --------------- |
|
||||
| id | 编号 | `string` | -- |
|
||||
| title | 标题 | `string` | -- |
|
||||
| disabled | 是否禁用 | `boolean` | `false` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Collapse Item 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| Name | Description | Params |
|
||||
| --------- | ----------------------- | --------------- |
|
||||
| -- | 默认插槽 --> 内容 | `{props}` |
|
||||
| title | 标题插槽 | `{props}` |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext collapse
|
||||
:::
|
||||
176
package/document/src/document/zh-CN/components/color.md
Normal file
176
package/document/src/document/zh-CN/components/color.md
Normal file
@@ -0,0 +1,176 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感。
|
||||
:::
|
||||
|
||||
::: title 主色调
|
||||
:::
|
||||
|
||||
::: demo layui 主要是以象征包容的墨绿作为主色调，由于它给人以深沉感，所以通常会以浅黑色的作为其陪衬，又会以蓝色这种比较鲜艳的色调来弥补它的色觉疲劳，整体让人清新自然，愈发耐看。【取色意义】：我们执着于务实，不盲目攀比，又始终不忘绽放活力。这正是 layui 所追求的价值。
|
||||
|
||||
<template>
|
||||
<ul class="layui-row layui-col-space15">
|
||||
<li class="layui-col-sm6">
|
||||
<div style="background-color: #009688;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#009688</p><p>
|
||||
</p><p tips="">主色调之一</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm6">
|
||||
<div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#5FB878</p><p>
|
||||
</p><p tips="">一般用于选中状态</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm6">
|
||||
<div style="background-color: #393D49;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#393D49</p><p>
|
||||
</p><p tips="">通常用于导航</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm6">
|
||||
<div style="background-color: #1E9FFF;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#1E9FFF</p><p>
|
||||
</p><p tips="">经典蓝</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 次色调
|
||||
:::
|
||||
|
||||
::: demo 事实上，layui 并非不敢去尝试一些亮丽的颜色，但许多情况下一个它可能并不是那么合适，所以我们把这些颜色归为“场景色”，即按照实际场景来呈现对应的颜色，比如你想给人以警觉感，可以尝试用上面的红色。
|
||||
|
||||
<template>
|
||||
<ul class="layui-row layui-col-space15">
|
||||
<li class="layui-col-sm6">
|
||||
<div style="background-color: #FFB800;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#FFB800</p><p>
|
||||
</p><p tips="">暖色系</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm6">
|
||||
<div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#FF5722</p><p>
|
||||
</p><p tips="">比较引人注意的颜色</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm6">
|
||||
<div style="background-color: #01AAED;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#01AAED</p><p>
|
||||
</p><p tips="">文本链接着色</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm6">
|
||||
<div style="background-color: #2F4056;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#2F4056</p><p>
|
||||
</p><p tips="">侧边色</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 中性色
|
||||
:::
|
||||
|
||||
::: demo layui 认为灰色系代表极简，因为这是一种神奇的颜色，几乎可以与任何元素搭配，不易形成视觉疲劳，且永远不会过时。低调而优雅！
|
||||
|
||||
<template>
|
||||
<ul class="layui-row site-doc-color site-doc-necolor">
|
||||
<li class="layui-col-md12">
|
||||
<div style="background-color: #FAFAFA;">
|
||||
<p>#FAFAFA</p><p>
|
||||
</p></div>
|
||||
</li>
|
||||
<li class="layui-col-md12">
|
||||
<div style="background-color: #f6f6f6;"><p>#F6F6F6</p><p></p></div>
|
||||
</li>
|
||||
<li class="layui-col-md4">
|
||||
<div style="background-color: #eeeeee;"><p>#eeeeee</p><p></p></div>
|
||||
</li>
|
||||
<li class="layui-col-md4">
|
||||
<div style="background-color: #e2e2e2;"><p>#e2e2e2</p><p></p></div>
|
||||
</li>
|
||||
<li class="layui-col-md4">
|
||||
<div style="background-color: #dddddd;"><p>#dddddd</p><p></p></div>
|
||||
</li>
|
||||
<li class="layui-col-md4">
|
||||
<div style="background-color: #d2d2d2;"><p>#d2d2d2</p><p></p></div>
|
||||
</li>
|
||||
<li class="layui-col-md4">
|
||||
<div style="background-color: #cccccc;"><p>#cccccc</p><p></p></div>
|
||||
</li>
|
||||
<li class="layui-col-md4">
|
||||
<div style="background-color: #c2c2c2;"><p>#c2c2c2</p><p></p></div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 颜色说明
|
||||
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| Class | 描述 | 使用 |
|
||||
| --------------- | ---- | ----------------------- |
|
||||
| layui-bg-red | 赤色 | class="layui-bg-red" |
|
||||
| layui-bg-orange | 橙色 | class="layui-bg-orange" |
|
||||
| layui-bg-green | 墨绿 | class="layui-bg-green" |
|
||||
| layui-bg-cyan | 藏青 | class="layui-bg-cyan" |
|
||||
| layui-bg-blue | 蓝色 | class="layui-bg-blue" |
|
||||
| layui-bg-black | 雅黑 | class="layui-bg-black" |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext color
|
||||
:::
|
||||
@@ -0,0 +1,72 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-color-picker v-model="color"></lay-color-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "vue";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const color = ref("#009688");
|
||||
|
||||
return {
|
||||
color
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 预设颜色
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-color-picker v-model="color" :preset="preset"></lay-color-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "vue";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const color = ref("#009688");
|
||||
|
||||
const preset = ref(["#009688", "#1e9fff", "#ffb800", "#ff5722", "#5fb878"])
|
||||
|
||||
return {
|
||||
color,
|
||||
preset
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Icon Picker 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| | | |
|
||||
| ---------- | -------- | --- |
|
||||
| v-model | 选中色 | -- |
|
||||
| preset | 预设颜色 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext colorPicker
|
||||
:::
|
||||
89
package/document/src/document/zh-CN/components/confirm.md
Normal file
89
package/document/src/document/zh-CN/components/confirm.md
Normal file
@@ -0,0 +1,89 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 需要一个简洁的确认框询问用户时。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button type="primary" @click="openConfirm1">信息框</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { layer } from "@layui/layer-vue"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const openConfirm1 = function() {
|
||||
layer.confirm("layui-vue 1.0.0 已经发布")
|
||||
}
|
||||
|
||||
return {
|
||||
openConfirm1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 指定操作
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button type="primary" @click="openConfirm2">询问框</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { layer } from "@layui/layer-vue"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const openConfirm2 = function() {
|
||||
layer.confirm("你如何看待 layui-vue 的发布", {btn: [{text:'站着看'},{text:'坐着看'}]})
|
||||
}
|
||||
|
||||
return {
|
||||
openConfirm2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title 组件方法
|
||||
:::
|
||||
|
||||
```
|
||||
layer.confirm(content, options)
|
||||
```
|
||||
|
||||
::: title 组件属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 备注 |
|
||||
| ------------------- | ------ | ---- |
|
||||
| content | 内容 | -- |
|
||||
| options | 选配属性 | { time: 加载时长, btn: 按钮组 } |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext confirm
|
||||
:::
|
||||
91
package/document/src/document/zh-CN/components/container.md
Normal file
91
package/document/src/document/zh-CN/components/container.md
Normal file
@@ -0,0 +1,91 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 页面容器, 用于控制内容的边距。
|
||||
:::
|
||||
|
||||
::: title 普通容器
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-container>
|
||||
<div class="container-demo"></div>
|
||||
</lay-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container-demo {
|
||||
width:100%;
|
||||
height: 300px;
|
||||
background: #79C48C;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 流式容器
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-container fluid>
|
||||
<div class="container-demo"></div>
|
||||
</lay-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container-demo {
|
||||
width:100%;
|
||||
height: 300px;
|
||||
background: #79C48C;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 容器属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----- | ------ | -------------- |
|
||||
| fluid | 流模式 | `true` `false` |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext container
|
||||
:::
|
||||
155
package/document/src/document/zh-CN/components/countup.md
Normal file
155
package/document/src/document/zh-CN/components/countup.md
Normal file
@@ -0,0 +1,155 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<h1 style="padding:20px 15px; font-family: sans-serif">
|
||||
<lay-count-up :startVal="0" :endVal="3600" :decimalPlaces="2"></lay-count-up>
|
||||
</h1>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 自定义前缀&后缀
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="handlerClick" type="primary" size="sm">更新</lay-button>
|
||||
<br/>
|
||||
<br/>
|
||||
<!-- 属性 -->
|
||||
<lay-card style="width:200px;height:120px;display:inline-block;">
|
||||
<h1 style="padding:20px 15px; font-family: sans-serif">
|
||||
<lay-count-up :end-val="countVal2" prefix="¥" suffix="↑"></lay-count-up>
|
||||
</h1>
|
||||
</lay-card>
|
||||
<!-- 插槽 -->
|
||||
<lay-card style="width:200px;height:120px;display:inline-block;">
|
||||
<h1 style="padding:20px 15px">
|
||||
<lay-count-up :end-val="18" :duration="2000">
|
||||
<template #prefix>
|
||||
<span style="font-size:75%">雷雨 </span>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<span style="font-size:75%">
|
||||
<sub>℃</sub> ⛈
|
||||
</span>
|
||||
</template>
|
||||
</lay-count-up>
|
||||
</h1>
|
||||
</lay-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const countVal2 = ref(98626);
|
||||
const handlerClick = () => {
|
||||
countVal2.value += 1000;
|
||||
}
|
||||
return {
|
||||
handlerClick,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Count Up 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
|
||||
| startVal | 起始值 | number | `0` | — |
|
||||
| endVal | 显示的值 | number | `0` | — |
|
||||
| decimal | 小数点 | string | `.` | — |
|
||||
| decimalPlaces | 小数位数 | number | `0` | — |
|
||||
| useGrouping | 是否使用千位分隔符 | boolean | `true` | `true` `false` |
|
||||
| separator | 分隔符 | string | `,` | — |
|
||||
| autoplay | 是否自动播放 | boolean | `true` | `true` `false` |
|
||||
| useEasing | 是否使用动画 | boolean | `true` | `true` `false` |
|
||||
| easingFn | 动画类型 | Array \| Function \| string | `easeInOutCubic` | — |
|
||||
| duration | 动画持续时间,单位: ms | number | `2000` | — |
|
||||
| prefix | 前缀 | string | — | — |
|
||||
| suffix | 后缀 | string | — | — |
|
||||
|
||||
:::
|
||||
|
||||
::: title Count Up 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 名称 | 描述 | 参数 |
|
||||
| ----- | -------- | ---- |
|
||||
| prefix | 前缀 | -- |
|
||||
| suffix | 后缀 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Count Up 动画类型
|
||||
:::
|
||||
|
||||
::: describe 可使用贝塞尔曲线定义动画
|
||||
:::
|
||||
|
||||
```
|
||||
easingFn: [0.75, 0, 0.25, 1]
|
||||
```
|
||||
|
||||
::: describe 也可以使用自定义函数
|
||||
:::
|
||||
|
||||
```
|
||||
const easeOutElastic = (n) => {
|
||||
return n === 0
|
||||
? 0
|
||||
: n === 1
|
||||
? 1
|
||||
: (2 ** (-10 * n)) * Math.sin((n * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1
|
||||
}
|
||||
|
||||
easingFn: easeOutElastic
|
||||
```
|
||||
|
||||
::: describe 通过以下字符串快速设置动画类型
|
||||
:::
|
||||
|
||||
```
|
||||
easeInSine easeOutSine easeInOutSine
|
||||
easeInQuad easeOutQuad easeInOutQuad
|
||||
easeInCubic easeOutCubic easeInOutCubic
|
||||
easeInQuart easeOutQuart easeInOutQuart
|
||||
easeInQuint easeOutQuint easeInOutQuint
|
||||
easeInExpo easeOutExpo easeInOutExpo
|
||||
easeInCirc easeOutCirc easeInOutCirc
|
||||
easeInBack easeOutBack easeInOutBack
|
||||
linear
|
||||
```
|
||||
|
||||
::: previousNext countUp
|
||||
:::
|
||||
242
package/document/src/document/zh-CN/components/datePicker.md
Normal file
242
package/document/src/document/zh-CN/components/datePicker.md
Normal file
@@ -0,0 +1,242 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 高级 Web 日历组件，完全开源无偿且颜值与功能兼备，足以应对日期相关的各种业务场景。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
选择的时间：{{endTime}}
|
||||
<lay-date-picker v-model="endTime"></lay-date-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const endTime = ref("2022-03-14 17:35:00");
|
||||
|
||||
return {
|
||||
endTime
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 日期时间
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
选择的时间：{{endTime2}}
|
||||
<lay-date-picker type="datetime" v-model="endTime2"></lay-date-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const endTime2 = ref("2022-03-04 17:35:00");
|
||||
|
||||
return {
|
||||
endTime2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 禁止修改
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<!-- 选择的时间：{{endTime3}} -->
|
||||
<lay-date-picker disabled type="year" v-model="endTime3"></lay-date-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const endTime3 = ref("2022-03-04 17:35:00");
|
||||
|
||||
return {
|
||||
endTime3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 年份选择
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
选择的时间：{{endTime3}}
|
||||
<lay-date-picker type="year" v-model="endTime3"></lay-date-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const endTime3 = ref("2022-03-04 17:35:00");
|
||||
|
||||
return {
|
||||
endTime3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 月份选择
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
选择的时间：{{endTime4}}
|
||||
<lay-date-picker type="month" v-model="endTime4"></lay-date-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const endTime4 = ref("2022-03-04 17:35:00");
|
||||
|
||||
return {
|
||||
endTime4
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 时间选择
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-date-picker type="time" v-model="endTime5"></lay-date-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const endTime5 = ref("2022-03-04 17:35:00");
|
||||
|
||||
return {
|
||||
endTime5
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 年月选择
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-date-picker type="yearmonth" v-model="endTime6"></lay-date-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const endTime6 = ref("2022-03-04 17:35:00");
|
||||
|
||||
return {
|
||||
endTime6
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 一次性选择
|
||||
:::
|
||||
|
||||
::: describe 只需要点击一次后自动关闭，无需点击确认按钮
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-date-picker v-model="endTime7" simple></lay-date-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const endTime7 = ref("2022-03-04 17:35:00");
|
||||
|
||||
return {
|
||||
endTime7
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Date Picker 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
|
||||
| v-model | 当前时间 | `string` | -- | — |
|
||||
| type | 选择类型 | `string` | `date` | `date` `datetime` `year` `month` `time` `yearmonth` |
|
||||
| disabled | 是否禁止修改 | `boolean` | false | — |
|
||||
| simple | 一次性选择，无需点击确认按钮 | `boolean` | false | — |
|
||||
|
||||
:::
|
||||
|
||||
::: previousNext transfer
|
||||
:::
|
||||
166
package/document/src/document/zh-CN/components/drawer.md
Normal file
166
package/document/src/document/zh-CN/components/drawer.md
Normal file
@@ -0,0 +1,166 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 屏幕边缘滑出的浮层面板。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible" type="primary">打开</lay-button>
|
||||
<lay-layer type="drawer" v-model="visible" title="标题">内容</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const visible = ref(false)
|
||||
const changeVisible = function() {
|
||||
visible.value = !visible.value;
|
||||
}
|
||||
return {
|
||||
visible,
|
||||
changeVisible
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title 抽屉嵌套
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible1" type="primary">打开</lay-button>
|
||||
<lay-layer type="drawer" v-model="visible1" title="标题">
|
||||
<lay-button @click="changeVisible2" type="primary" style="margin:10px;">打开</lay-button>
|
||||
<lay-layer type="drawer" area="200px" v-model="visible2" title="标题">
|
||||
内容
|
||||
</lay-layer>
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const visible1 = ref(false)
|
||||
const changeVisible1 = function() {
|
||||
visible1.value = !visible1.value;
|
||||
}
|
||||
const visible2 = ref(false)
|
||||
const changeVisible2 = function() {
|
||||
visible2.value = !visible2.value;
|
||||
}
|
||||
return {
|
||||
visible1,
|
||||
visible2,
|
||||
changeVisible1,
|
||||
changeVisible2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 函数调用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="openDrawer" type="primary">调用</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { layer } from "@layui/layer-vue"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const openDrawer = function() {
|
||||
layer.drawer({
|
||||
title: "标题",
|
||||
content: "内容"
|
||||
})
|
||||
}
|
||||
return {
|
||||
openDrawer
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 不同方向
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="openTopDrawer" type="primary">上</lay-button>
|
||||
<lay-button @click="openBottomDrawer" type="primary">下</lay-button>
|
||||
<lay-button @click="openLeftDrawer" type="primary">左</lay-button>
|
||||
<lay-button @click="openRightDrawer" type="primary">右</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { layer } from "@layui/layer-vue"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const openTopDrawer = function() {
|
||||
layer.drawer({
|
||||
title: "标题",
|
||||
content: "内容",
|
||||
offset: "t"
|
||||
})
|
||||
}
|
||||
const openBottomDrawer = function() {
|
||||
layer.drawer({
|
||||
title: "标题",
|
||||
content: "内容",
|
||||
offset: "b"
|
||||
})
|
||||
}
|
||||
const openLeftDrawer = function() {
|
||||
layer.drawer({
|
||||
title: "标题",
|
||||
content: "内容",
|
||||
offset: "l"
|
||||
})
|
||||
}
|
||||
const openRightDrawer = function() {
|
||||
layer.drawer({
|
||||
title: "标题",
|
||||
content: "内容",
|
||||
offset: "r"
|
||||
})
|
||||
}
|
||||
return {
|
||||
openTopDrawer,
|
||||
openBottomDrawer,
|
||||
openLeftDrawer,
|
||||
openRightDrawer,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
187
package/document/src/document/zh-CN/components/dropdown.md
Normal file
187
package/document/src/document/zh-CN/components/dropdown.md
Normal file
@@ -0,0 +1,187 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 当页面上的操作命令过多时，用此组件可以收纳操作元素。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-dropdown>
|
||||
<lay-button type="primary">下拉菜单</lay-button>
|
||||
<template #content>
|
||||
<lay-dropdown-menu>
|
||||
<lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
|
||||
</lay-dropdown-menu>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 触发方式
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-dropdown trigger="hover">
|
||||
<lay-button>Hover 触发</lay-button>
|
||||
<template #content>
|
||||
<lay-dropdown-menu>
|
||||
<lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
|
||||
</lay-dropdown-menu>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
|
||||
<lay-dropdown>
|
||||
<lay-button>Click 触发</lay-button>
|
||||
<template #content>
|
||||
<lay-dropdown-menu>
|
||||
<lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
|
||||
</lay-dropdown-menu>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
:::
|
||||
::: title 禁用弹出
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-dropdown disabled>
|
||||
<lay-button type="primary" >禁用弹出</lay-button>
|
||||
<template #content>
|
||||
<lay-dropdown-menu>
|
||||
<lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
|
||||
</lay-dropdown-menu>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
:::
|
||||
::: title 事件处理
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-dropdown @open="stat='开启'" @hide="stat='关闭'">
|
||||
<lay-button type="primary" >当前状态:{{stat}}</lay-button>
|
||||
<template #content>
|
||||
<lay-dropdown-menu>
|
||||
<lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
|
||||
</lay-dropdown-menu>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const stat=ref("关闭")
|
||||
return {
|
||||
stat
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Dropdown 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ------- | -------- | --------------- |
|
||||
| trigger | 触发方式 | `click` `hover` |
|
||||
| disabled | 是否禁用触发 | `true` `false` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Dropdown 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 可选值 |
|
||||
| ------- | -------- | ------ |
|
||||
| content | 下拉内容 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title Dropdown 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 参数 |
|
||||
| ------- | -------- | ------ |
|
||||
| hide | 隐藏下拉内容后触发 | -- |
|
||||
| open | 显示下拉内容后触发 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: previousNext dropdown
|
||||
:::
|
||||
106
package/document/src/document/zh-CN/components/empty.md
Normal file
106
package/document/src/document/zh-CN/components/empty.md
Normal file
@@ -0,0 +1,106 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 当目前没有数据时，用于显式的用户提示。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-empty></lay-empty>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 指定描述
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-empty description="刷新试试"></lay-empty>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 扩展插槽
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-empty description="刷新试试">
|
||||
<template #extra>
|
||||
<lay-button>刷新页面</lay-button>
|
||||
</template>
|
||||
</lay-empty>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Empty 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----------- | -------- | ------ |
|
||||
| description | 描述信息 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Empty 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----------- | -------- | ------ |
|
||||
| extra | 扩展插槽 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: previousNext empty
|
||||
:::
|
||||
150
package/document/src/document/zh-CN/components/exception.md
Normal file
150
package/document/src/document/zh-CN/components/exception.md
Normal file
@@ -0,0 +1,150 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 通用的异常页面。
|
||||
:::
|
||||
|
||||
::: title 401
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-exception` 标签, 创建一个异常页面
|
||||
|
||||
<template>
|
||||
<lay-exception status="401" title="401" describe="暂无相关权限">
|
||||
<template #extra>
|
||||
<lay-button>刷新</lay-button>
|
||||
<lay-button type="primary">返回</lay-button>
|
||||
</template>
|
||||
</lay-exception>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 403
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-exception` 标签, 创建一个异常页面
|
||||
|
||||
<template>
|
||||
<lay-exception status="403" title="403" describe="暂无相关权限">
|
||||
<template #extra>
|
||||
<lay-button>刷新</lay-button>
|
||||
<lay-button type="primary">返回</lay-button>
|
||||
</template>
|
||||
</lay-exception>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 404
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-exception` 标签, 创建一个异常页面
|
||||
|
||||
<template>
|
||||
<lay-exception status="404" title="404" describe="跳转页面失败">
|
||||
<template #extra>
|
||||
<lay-button>刷新</lay-button>
|
||||
<lay-button type="primary">返回</lay-button>
|
||||
</template>
|
||||
</lay-exception>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title 500
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-exception` 标签, 创建一个异常页面
|
||||
|
||||
<template>
|
||||
<lay-exception status="500" title="500" describe="服务发生错误">
|
||||
<template #extra>
|
||||
<lay-button>刷新</lay-button>
|
||||
<lay-button type="primary">返回</lay-button>
|
||||
</template>
|
||||
</lay-exception>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Exception 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----------- | -------- | ------ |
|
||||
| title | 标题 | -- |
|
||||
| status | 状态 | `403` `404` `500` |
|
||||
| describe | 描述信息 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Exception 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----------- | -------- | ------ |
|
||||
| extra | 操作 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext field
|
||||
:::
|
||||
81
package/document/src/document/zh-CN/components/field.md
Normal file
81
package/document/src/document/zh-CN/components/field.md
Normal file
@@ -0,0 +1,81 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-field title="标题">内容</lay-field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-field title="标题">内容</lay-field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-field title="标题"></lay-field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Field 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| Name | Description | Accepted Values |
|
||||
| ----- | ----------- | --------------- |
|
||||
| title | 标题 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext field
|
||||
:::
|
||||
586
package/document/src/document/zh-CN/components/form.md
Normal file
586
package/document/src/document/zh-CN/components/form.md
Normal file
@@ -0,0 +1,586 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form :model="model">
|
||||
<lay-form-item label="账户" prop="username">
|
||||
<lay-input v-model="model.username"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="密码" prop="password">
|
||||
<lay-input v-model="model.password" type="password"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="爱好" prop="hobby">
|
||||
<lay-select v-model="model.hobby">
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="2" label="编码"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="特长" prop="specialty">
|
||||
<lay-radio v-model="model.specialty" name="specialty" label="1">写作</lay-radio>
|
||||
<lay-radio v-model="model.specialty" name="specialty" label="2">画画</lay-radio>
|
||||
<lay-radio v-model="model.specialty" name="specialty" label="3">编码</lay-radio>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="描述" prop="desc">
|
||||
<lay-textarea placeholder="请输入描述" v-model="model.desc"></lay-textarea>
|
||||
</lay-form-item>
|
||||
<lay-form-item>
|
||||
<lay-button @click="submitClick">提交</lay-button>
|
||||
</lay-form-item>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive } from 'vue'
|
||||
import {layer} from '@layui/layer-vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const model = reactive({
|
||||
username: "admin",
|
||||
password: "123456",
|
||||
specialty: "1"
|
||||
})
|
||||
|
||||
const submitClick = function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
title:"表单结果",
|
||||
content: `<div style="padding: 10px">${JSON.stringify(model)}</div>`,
|
||||
shade: false,
|
||||
isHtmlFragment: true,
|
||||
btn : [{ text: '确认', callback(index) { layer.close(index) }}],
|
||||
area : '500px'
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
model,
|
||||
submitClick
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 表单基本校验功能
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form :model="validateModel" ref="layFormRef" required>
|
||||
<lay-form-item label="账户" prop="username">
|
||||
<lay-input v-model="validateModel.username"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="密码" prop="password">
|
||||
<lay-input v-model="validateModel.password" type="password">></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="爱好" prop="hobby">
|
||||
<lay-select v-model="validateModel.hobby" multiple>
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="2" label="编码"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="特长" prop="specialty">
|
||||
<lay-radio v-model="validateModel.specialty" name="specialty" label="1">写作</lay-radio>
|
||||
<lay-radio v-model="validateModel.specialty" name="specialty" label="2">画画</lay-radio>
|
||||
<lay-radio v-model="validateModel.specialty" name="specialty" label="3">编码</lay-radio>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="描述" prop="desc">
|
||||
<lay-textarea placeholder="请输入描述" v-model="validateModel.desc"></lay-textarea>
|
||||
</lay-form-item>
|
||||
<lay-form-item>
|
||||
<lay-button @click="validate">提交</lay-button>
|
||||
<lay-button @click="clearValidate">清除校验</lay-button>
|
||||
<lay-button @click="reset">重置表单</lay-button>
|
||||
</lay-form-item>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive } from 'vue'
|
||||
import {layer} from '@layui/layer-vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const validateModel = reactive({
|
||||
username: "",
|
||||
password: "",
|
||||
specialty: "1"
|
||||
})
|
||||
|
||||
const layFormRef = ref(null);
|
||||
// 校验
|
||||
const validate = function() {
|
||||
layFormRef.value.validate((isValidate, model, errors) => {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title:"表单提交结果",
|
||||
content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(model)} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
|
||||
shade: false,
|
||||
isHtmlFragment: true,
|
||||
btn : [{ text: '确认', callback(index) { layer.close(index) }}],
|
||||
area : '500px'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 清除校验
|
||||
const clearValidate = function() {
|
||||
layFormRef.value.clearValidate();
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const reset = function() {
|
||||
layFormRef.value.reset();
|
||||
validateModel.specialty = "1"
|
||||
}
|
||||
|
||||
return {
|
||||
validateModel,
|
||||
layFormRef,
|
||||
validate,
|
||||
clearValidate,
|
||||
reset
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 校验规则 - 通过表单配置
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form :model="ruleDemo1" ref="layFormRef1" :rules="rules" required initValidate>
|
||||
<lay-form-item label="邮箱" prop="email">
|
||||
<lay-input v-model="ruleDemo1.email"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="url路径" prop="url">
|
||||
<lay-input v-model="ruleDemo1.url"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="日期" prop="date">
|
||||
<lay-input v-model="ruleDemo1.date"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="用户名" prop="username">
|
||||
<lay-input v-model="ruleDemo1.username"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="年龄" prop="age">
|
||||
<lay-input v-model="ruleDemo1.age"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item>
|
||||
<lay-button @click="validate1">提交</lay-button>
|
||||
</lay-form-item>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive } from 'vue'
|
||||
import {layer} from '@layui/layer-vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const ruleDemo1 = reactive({
|
||||
email: "",
|
||||
url: "",
|
||||
date: "",
|
||||
username: "",
|
||||
age: null,
|
||||
})
|
||||
|
||||
const rules = ref({
|
||||
email : {
|
||||
type : 'email'
|
||||
},
|
||||
url : {
|
||||
type : 'url'
|
||||
},
|
||||
date : {
|
||||
type : 'date'
|
||||
},
|
||||
username : {
|
||||
type : 'string',
|
||||
min : 8,
|
||||
max : 16
|
||||
},
|
||||
age : {
|
||||
validator(rule, value, callback, source, options){
|
||||
if (value < 18) {
|
||||
callback(new Error(`${rule.field}太过于年轻`));
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const layFormRef1 = ref(null);
|
||||
// 校验
|
||||
const validate1 = function() {
|
||||
layFormRef1.value.validate((isValidate, model, errors) => {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title:"表单提交结果",
|
||||
content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(model)} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
|
||||
shade: false,
|
||||
isHtmlFragment: true,
|
||||
btn : [{ text: '确认', callback(index) { layer.close(index) }}],
|
||||
area : '500px'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
ruleDemo1,
|
||||
layFormRef1,
|
||||
validate1,
|
||||
rules
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 校验规则 - 通过表单子项配置
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form :model="ruleDemo2" ref="layFormRef2" required initValidate>
|
||||
<lay-form-item label="邮箱" prop="email" :rules="{type : 'email'}">
|
||||
<lay-input v-model="ruleDemo2.email"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="url路径" prop="url" :rules="{type : 'url'}">
|
||||
<lay-input v-model="ruleDemo2.url"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="日期" prop="date" :rules="{type : 'date'}">
|
||||
<lay-input v-model="ruleDemo2.date"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="用户名" prop="username"
|
||||
:rules="{
|
||||
type : 'string',
|
||||
min : 8,
|
||||
max : 16
|
||||
}">
|
||||
<lay-input v-model="ruleDemo2.username"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="年龄" prop="age" :rules="ageRules">
|
||||
<lay-input v-model="ruleDemo2.age"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="自定义提示" prop="myEmail"
|
||||
:rules="{
|
||||
type : 'email',
|
||||
message : '必须为邮箱'
|
||||
}">
|
||||
<lay-input v-model="ruleDemo2.myEmail"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item>
|
||||
<lay-button @click="validate2">提交</lay-button>
|
||||
</lay-form-item>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive } from 'vue'
|
||||
import {layer} from '@layui/layer-vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const ruleDemo2 = reactive({
|
||||
email: "",
|
||||
url: "",
|
||||
date: "",
|
||||
username: "",
|
||||
age: null,
|
||||
myEmail: "",
|
||||
});
|
||||
|
||||
const ageRules = {
|
||||
validator(rule, value, callback, source, options){
|
||||
if (value < 18) {
|
||||
callback(new Error(`${rule.field}太过于年轻`));
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
const layFormRef2 = ref(null);
|
||||
// 校验
|
||||
const validate2 = function() {
|
||||
layFormRef2.value.validate((isValidate, model, errors) => {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title:"表单提交结果",
|
||||
content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(model)} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
|
||||
shade: false,
|
||||
isHtmlFragment: true,
|
||||
btn : [{ text: '确认', callback(index) { layer.close(index) }}],
|
||||
area : '500px'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
ruleDemo2,
|
||||
layFormRef2,
|
||||
validate2,
|
||||
ageRules
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 原生submit方式校验 -- 校验通过将提交表单 -- 不推荐使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form @submit="submit" :model="submitModel" requiredIcons="layui-icon-heart-fill" :use-CN="false" required>
|
||||
<lay-form-item label="账户" prop="username">
|
||||
<template #label>
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
账户
|
||||
</template>
|
||||
<lay-input v-model="submitModel.username"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="密码" prop="password">
|
||||
<lay-input v-model="submitModel.password"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item>
|
||||
<lay-button native-type="submit">提交</lay-button>
|
||||
</lay-form-item>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive } from 'vue'
|
||||
import {layer} from '@layui/layer-vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const submitModel = reactive({
|
||||
username: "",
|
||||
password: ""
|
||||
})
|
||||
|
||||
const submit = function(isValidate, model, errors) {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title:"表单提交结果",
|
||||
content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(model)} </p> <p>错误信息 : </br>${JSON.stringify(errors)}</p></div>`,
|
||||
shade: false,
|
||||
isHtmlFragment: true,
|
||||
btn : [{ text: '确认', callback(index) { layer.close(index) }}],
|
||||
area : '500px'
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
submitModel
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 表单(form)属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|
||||
| ------------- | -------------------------------------------------------------- | --------- | -------------- | ------- |
|
||||
| v-model | 表单绑定值 | `object` | - | {} |
|
||||
| required | 是否必填 | `boolean` | `true` `false` | `false` |
|
||||
| rules | 表单校验规则; <br>可查看[async-validator](https://github.com/yiminghe/async-validator) | `object` | - | - |
|
||||
| initValidate | 是否一开始就校验表单 | `boolean` | `true` `false` | `false` |
|
||||
| useCN | 是否使用中文错误提示 | `boolean` | `true` `false` | `false` |
|
||||
| requiredIcons | 必填前缀图标`class` | `string` | - | `*` |
|
||||
| required-erroer-message | 必填错误提示信息 | `string` | - | `%s不能为空`|
|
||||
| validate-message | 自定义校验错误提示信息; <br>由于内置了中文错误提示，可按需求增量增加<br>可查看 [async-validator 内置错误提示](https://github.com/yiminghe/async-validator/blob/master/src/messages.ts)<br>也可参考 [layui-vue 内置中文错误提示](https://gitee.com/layui-vue/layui-vue/tree/develop/src/module/formItem/cnValidateMessage.ts) | `string` | - | `%s不能为空`|
|
||||
|
||||
:::
|
||||
|
||||
::: title 表单(form)事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 回调参数 |
|
||||
| ------------- | ------------------------------- | -------------- |
|
||||
| submit | 提交事件`(不推荐使用)` | (`isValidate`, `model`, `errors`)<br><br> `isValidate`: (`boolean`)是否校验通过<br><br> `model`: (`object`)表单绑定的值<br><br> `errors`: (`Array`)校验结果的错误信息 |
|
||||
|
||||
|
||||
:::
|
||||
|
||||
::: title 表单(form)方法
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 入参 |
|
||||
| ------------- | -------------- | -------------- |
|
||||
| validate | 表单校验; <br>如果没有`callback`回调，会返回`Promise`, <br> `Promise`参数为{`isValidate`, `model`, `errors`}<br> 参数具体描述请看上面表单`submit`提交事件 | (`fields` `[可选]`, `callback` `[可选]`)<br><br> `fields`: (`string` / `string[]` / `function`)<br>单独校验的字段，<br>该字段如果为`function`, <br>则认为`callback`入参，校验全部字段;<br><br> `callback`: (`function`)校验之后的回调，<br>回调参数为(`isValidate`, `model`, `errors`)；<br>参数具体描述请看上面表单`submit`提交事件|
|
||||
| clearValidate | 清除表单校验 | (`fields`[可选])<br><br> `fields`: (`string` / `string[]`)<br>需要进行清除校验的表单字段, 如果该字段为空则清除全部校验|
|
||||
| reset | 重置表单所有值 | - |
|
||||
|
||||
|
||||
:::
|
||||
|
||||
::: title 表单项(form-item)属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|
||||
| ------------- | -------------------------------------------------------------- | --------- | -------------- | ------- |
|
||||
| prop | 在表单绑定值(`model`)中字段`key` | `string` | - | - |
|
||||
| label | 子项前边描述值，**尽量填写**，中文校验错误需要用到 | `string` | - | - |
|
||||
| required | 是否必填 | `boolean` | `true` `false` | `false` |
|
||||
| rules | 表单校验规则; <br>可查看[async-validator](https://github.com/yiminghe/async-validator) | `object` | - | - |
|
||||
| error-message | 表单校验失败固定提示语 | `string` |`block` `inline`| `block` |
|
||||
| mode | 表单项显示的模式，`块元素` / `行元素` | `string` |`block` `inline`| `block` |
|
||||
|
||||
:::
|
||||
|
||||
::: title 表单项(form-item)方法
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 入参 |
|
||||
| ------------- | -------------- | -------------- |
|
||||
| validate | 表单校验; | (`callback` `[可选]`)<br><br> `callback`: (`function`)校验之后的回调，<br>回调参数为(`errors`, `fields`)；<br><br> `errors`: (`Array`)校验结果的错误信息；<br><br> `fields`: (`Array`)当前校验的字段信息|
|
||||
| clearValidate | 清除表单校验 | - |
|
||||
|
||||
|
||||
:::
|
||||
|
||||
::: title 表单项(form-item)插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可使用参数 |
|
||||
| ------------- | ---------------------------------------------------------------- | --------------------------------------- |
|
||||
| - | 默认插槽 | 传递进来的`props`和表单绑定的值(`model`) |
|
||||
| label | 子项前边描述插槽<br>如果使用此插槽，`props`**尽量**也传递`label`参数 | 传递进来的`props`和表单绑定的值(`model`) |
|
||||
| required | 必填前缀插槽 | `*` / `表单props` 中的 `requiredIcons` |
|
||||
|
||||
:::
|
||||
|
||||
::: title 关于 async-validator 的使用
|
||||
:::
|
||||
|
||||
查看： https://github.com/yiminghe/async-validator
|
||||
中文翻译： https://www.cnblogs.com/wozho/p/10955525.html
|
||||
|
||||
::: title async-validator 基本校验类型
|
||||
:::
|
||||
|
||||
::: table
|
||||
| 属性 | 描述 | 使用方式 |
|
||||
| -------------| ----------------- | ------------------- |
|
||||
| number | 数字 | `{type : 'number'}` |
|
||||
| boolean | 布尔类型 | `{type : 'boolean'}` |
|
||||
| method | 方法 | `{type : 'method'}` |
|
||||
| regexp | 正则表达式 | `{type : 'regexp'}` |
|
||||
| integer | 整型数字 | `{type : 'integer'}` |
|
||||
| float | 浮点小数 | `{type : 'float'}` |
|
||||
| array | 数组 | `{type : 'array'}` |
|
||||
| object | 对象 | `{type : 'object'}` |
|
||||
| enum | 枚举 | `{type : 'enum'}` |
|
||||
| date | 日期 | `{type : 'date'}` |
|
||||
| url | url | `{type : 'url'}` |
|
||||
| hex | 十六进制 | `{type : 'hex'}` |
|
||||
| email | 邮箱 | `{type : 'email'}` |
|
||||
:::
|
||||
|
||||
::: title async-validator 中 validator参数使用
|
||||
:::
|
||||
|
||||
```javascript
|
||||
{
|
||||
validator: (rule, value) => value === 'root'
|
||||
}
|
||||
```
|
||||
|
||||
::: title async-validator 中 asyncValidator参数使用
|
||||
:::
|
||||
|
||||
```javascript
|
||||
{
|
||||
asyncValidator: (rule, value) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (value < 18) {
|
||||
reject('too young'); // reject with error message
|
||||
} else {
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
::: title form 配置 async-validator 的使用
|
||||
:::
|
||||
|
||||
```javascript
|
||||
{
|
||||
key : rule // key为表单子项需要校验的对应key名称， rule为校验规则，格式为{}
|
||||
}
|
||||
// 例如 表单绑定值为 {email : 'xxx', username: 'xxxxx'}
|
||||
// 需要校验邮箱,而邮箱输入框在表单绑定的值中key为email，
|
||||
// 需要校验用户名长度为8到16之间,而用户名输入框在表单绑定的值中key为username，
|
||||
{
|
||||
email : {
|
||||
type : 'email'
|
||||
},
|
||||
username : {
|
||||
type : 'string',
|
||||
min : 8,
|
||||
max : 16
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
::: title form-item 配置 async-validator 的使用
|
||||
:::
|
||||
|
||||
```javascript
|
||||
// 例如 表单绑定值为 {email : 'xxx', phone: 'xxxxx'}
|
||||
// 需要校验邮箱,而邮箱输入框在表单绑定的值中key为email
|
||||
{
|
||||
type : 'email'
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
::: previousNext form
|
||||
:::
|
||||
228
package/document/src/document/zh-CN/components/fullscreen.md
Normal file
228
package/document/src/document/zh-CN/components/fullscreen.md
Normal file
@@ -0,0 +1,228 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 将某一区域的内容全屏展示。
|
||||
:::
|
||||
|
||||
::: title 浏览器全屏
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-fullscreen` 标签包裹触发全屏事件的按钮
|
||||
|
||||
<template>
|
||||
<lay-fullscreen v-slot="{ enter, exit, toggle, isFullscreen }" @fullscreenchange=fullscreen>
|
||||
<lay-button type="normal" @click="enter()">进入全屏</lay-button>
|
||||
<lay-button type="normal" @click="exit()">退出</lay-button>
|
||||
<lay-button type="warm" @click="toggle()">切换: {{isFullscreen ? "退出" : "进入全屏"}}</lay-button>
|
||||
</lay-fullscreen>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const fullscreen = function(isFullscreen){
|
||||
console.log(isFullscreen)
|
||||
}
|
||||
return {
|
||||
fullscreen
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 局部区域全屏
|
||||
:::
|
||||
|
||||
::: demo 使用 `target` 属性指定需要局部全屏的元素, 组件必须用 `div` 包裹, 因为不是所有元素都能向浏览器请求全屏
|
||||
|
||||
<template>
|
||||
<lay-fullscreen :target="elRef" v-slot="{ enter, exit, toggle, isFullscreen }" @fullscreenchange=fullscreen2>
|
||||
<div ref="elRef" class="wrapper-fullscreen">
|
||||
<lay-button type="normal" @click="enter()">进入全屏</lay-button>
|
||||
<lay-button type="normal" @click="exit()">退出</lay-button>
|
||||
<lay-button type="warm" @click="toggle()"> 切换: {{isFullscreen ? "退出" : "进入全屏"}} </lay-button>
|
||||
</div>
|
||||
</lay-fullscreen>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const elRef = ref(null);
|
||||
const fullscreen2 = function(isFullscreen){
|
||||
console.log(isFullscreen)
|
||||
}
|
||||
return {
|
||||
elRef,
|
||||
fullscreen2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.wrapper-fullscreen{
|
||||
padding:10px;
|
||||
border:1px solid #dddddd;
|
||||
background-color:#F6F6F6;
|
||||
display:inline-block
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 浏览器窗口内全屏
|
||||
:::
|
||||
|
||||
::: demo 使用 `target` 属性指定需要局部全屏的元素, 并设置`immersive`属性为 `false`,可使 `target` 在浏览器窗口内全屏
|
||||
|
||||
<template>
|
||||
<lay-fullscreen
|
||||
:target="fullscreenTargetRef"
|
||||
:immersive="false"
|
||||
zIndex="10000"
|
||||
v-slot="{ enter, exit, toggle, isFullscreen }"
|
||||
@fullscreenchange=fullscreen3>
|
||||
<div ref="fullscreenTargetRef" class="wrapper-fullscreen">
|
||||
<lay-button type="normal" @click="enter()">进入全屏</lay-button>
|
||||
<lay-button type="normal" @click="exit()">退出</lay-button>
|
||||
<lay-button type="warm" @click="toggle()"> 切换: {{isFullscreen ? "退出" : "进入全屏"}} </lay-button>
|
||||
</div>
|
||||
</lay-fullscreen>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
|
||||
setup() {
|
||||
const fullscreenTargetRef = ref(null)
|
||||
const fullscreen3 = function(isFullscreen){
|
||||
console.log(isFullscreen)
|
||||
}
|
||||
return {
|
||||
fullscreenTargetRef,
|
||||
fullscreen3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.wrapper-fullscreen{
|
||||
padding:10px;
|
||||
border:1px solid #dddddd;
|
||||
background-color:#F6F6F6;
|
||||
display:inline-block
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 铺满特定容器
|
||||
:::
|
||||
|
||||
::: demo 使用 `target` 属性指定需要局部全屏的元素, 并设置`immersive = false`, `position="absolute"`,可使 `target` 在特定容器内全屏
|
||||
|
||||
<template>
|
||||
<div class="container" style="position:relative;height:300px;width:500px;background-color: #cccccc;">
|
||||
<lay-fullscreen
|
||||
:target="fullscreenTargetRef2"
|
||||
:immersive="false"
|
||||
zIndex="12000"
|
||||
position="absolute"
|
||||
v-slot="{ enter, exit, toggle, isFullscreen }"
|
||||
@fullscreenchange=fullscreen4>
|
||||
<div ref="fullscreenTargetRef2" class="wrapper-fullscreen">
|
||||
<lay-button type="normal" @click="enter()">进入全屏</lay-button>
|
||||
<lay-button type="normal" @click="exit()">退出</lay-button>
|
||||
<lay-button type="warm" @click="toggle()"> 切换: {{isFullscreen ? "退出" : "进入全屏"}} </lay-button>
|
||||
</div>
|
||||
</lay-fullscreen>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
|
||||
setup() {
|
||||
const fullscreenTargetRef2 = ref(null);
|
||||
const fullscreen4 = function(isFullscreen){
|
||||
console.log(isFullscreen)
|
||||
}
|
||||
return {
|
||||
fullscreenTargetRef2,
|
||||
fullscreen4
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.container{
|
||||
position:relative;
|
||||
height:300px;
|
||||
width:500px;
|
||||
background-color: red;
|
||||
border:1px solid #dddddd;
|
||||
};
|
||||
.wrapper-fullscreen{
|
||||
padding:10px;
|
||||
border:1px solid #dddddd;
|
||||
background-color:#F6F6F6;
|
||||
display:inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
:::title fullscreen 属性
|
||||
:::
|
||||
|
||||
:::table
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| --------- | ----------------------------------------- | ------------- | ------ | ------------------- |
|
||||
| target | 可选，要全屏显示的元素 | `HTMLElement` | `html` | - |
|
||||
| immersive | 可选，全屏模式，`false`时浏览器窗口内全屏 | `boolean` | true | `true` `false` |
|
||||
| position | 可选，浏览器窗口内全屏定位模式 | `string` | - | `absolute` `fixed` |
|
||||
| zIndex | 可选，全屏层级 | `string` | - | - |
|
||||
:::
|
||||
|
||||
:::title fullscreen 事件
|
||||
:::
|
||||
|
||||
:::table
|
||||
| 事件 | 描述 | 参数 |
|
||||
|------ |----------|-----------|
|
||||
| fullscreenchange | 全屏更改事件回调 | isFullscreen 是否全屏 |
|
||||
:::
|
||||
|
||||
:::title fullscreen 插槽
|
||||
:::
|
||||
|
||||
:::table
|
||||
| 插槽 | 描述 | 参数 |
|
||||
|------ |----------|-----------|
|
||||
| default | 默认插槽 | - |
|
||||
:::
|
||||
|
||||
:::title fullscreen 插槽属性
|
||||
:::
|
||||
|
||||
:::table
|
||||
| 属性 | 描述 | 类型 | 参数 |
|
||||
| --------- | --------------| ------------- | ------ |
|
||||
| enter | 进入全屏 | Function | 可选,HTMLElement |
|
||||
| exit | 退出全屏 | Function | 可选,HTMLElement /| Document |
|
||||
| toggle | 进入/退出全屏 | Function | - |
|
||||
| isFullscreen | 是否全屏 | boolean | - |
|
||||
:::
|
||||
194
package/document/src/document/zh-CN/components/grid.md
Normal file
194
package/document/src/document/zh-CN/components/grid.md
Normal file
@@ -0,0 +1,194 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 栅格化系统，是基于行（row）和列（col）来定义区块的外部框架，以保证页面的元素能够稳健地排布起来。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-row space="10">
|
||||
<lay-col md="12"><div class="grid-demo">1</div></lay-col>
|
||||
<lay-col md="12"><div class="grid-demo">2</div></lay-col>
|
||||
<lay-col md="6"><div class="grid-demo">3</div></lay-col>
|
||||
<lay-col md="6"><div class="grid-demo">4</div></lay-col>
|
||||
<lay-col md="6"><div class="grid-demo">5</div></lay-col>
|
||||
<lay-col md="6"><div class="grid-demo">6</div></lay-col>
|
||||
</lay-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-demo {
|
||||
padding: 10px;
|
||||
line-height: 50px;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
background-color: var(--global-checked-color);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 栅格偏移
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-row space="10">
|
||||
<lay-col md="12"><div class="grid-demo">1</div></lay-col>
|
||||
<lay-col md="6" mdOffset="6"><div class="grid-demo">2</div></lay-col>
|
||||
</lay-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-demo {
|
||||
padding: 10px;
|
||||
line-height: 50px;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
background-color: var(--global-checked-color);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 栅格适应
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-row space="10">
|
||||
<lay-col md="12" sm="12" xs="24"><div class="grid-demo">1</div></lay-col>
|
||||
<lay-col md="12" sm="12" xs="24"><div class="grid-demo">2</div></lay-col>
|
||||
</lay-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.grid-demo {
|
||||
padding: 10px;
|
||||
line-height: 50px;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
background-color: var(--global-checked-color);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 流式布局
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-container fluid>
|
||||
<lay-row space="10">
|
||||
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">1</div></lay-col>
|
||||
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">2</div></lay-col>
|
||||
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">3</div></lay-col>
|
||||
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">4</div></lay-col>
|
||||
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">5</div></lay-col>
|
||||
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">6</div></lay-col>
|
||||
</lay-row>
|
||||
</lay-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.grid-demo {
|
||||
padding: 10px;
|
||||
line-height: 50px;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
background-color: var(--global-checked-color);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title Row 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----- | ---- | ------ |
|
||||
| space | 间隔 | 0 - 30 |
|
||||
|
||||
:::
|
||||
|
||||
::: title Col 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| --------- | ------------------------------ | ------ |
|
||||
| xs | 尺寸 - 超小屏幕 (手机<768px) | 0 - 24 |
|
||||
| sm | 尺寸 - 小屏幕 (平板 ≥768px) | 0 - 24 |
|
||||
| md | 尺寸 - 中等屏幕 (桌面 ≥992px) | 0 - 24 |
|
||||
| lg | 尺寸 - 大型屏幕 (桌面 ≥1200px) | 0 - 24 |
|
||||
| xs-offset | 偏移 - 超小屏幕 (手机<768px) | 0 - 24 |
|
||||
| sm-offset | 偏移 - 小屏幕 (平板 ≥768px) | 0 - 24 |
|
||||
| md-offset | 偏移 - 中等屏幕 (桌面 ≥992px) | 0 - 24 |
|
||||
| lg-offset | 偏移 - 大型屏幕 (桌面 ≥1200px) | 0 - 24 |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext grid
|
||||
:::
|
||||
276
package/document/src/document/zh-CN/components/icon.md
Normal file
276
package/document/src/document/zh-CN/components/icon.md
Normal file
@@ -0,0 +1,276 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 语义化的矢量图形。使用图标组件，你需要安装 `@layui/icons-vue` 图标组件包
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-icon` 标签, 创建图标组件
|
||||
|
||||
<template>
|
||||
<lay-icon type="layui-icon-face-smile"></lay-icon>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 图标颜色
|
||||
:::
|
||||
|
||||
::: demo 使用 `color` 属性设置颜色
|
||||
|
||||
<template>
|
||||
<lay-icon type="layui-icon-face-smile" color="red"></lay-icon>
|
||||
<lay-icon type="layui-icon-face-smile" color="orange"></lay-icon>
|
||||
<lay-icon type="layui-icon-face-smile" color="green"></lay-icon>
|
||||
<lay-icon type="layui-icon-face-smile" color="cyan"></lay-icon>
|
||||
<lay-icon type="layui-icon-face-smile" color="blue"></lay-icon>
|
||||
<lay-icon type="layui-icon-face-smile" color="black"></lay-icon>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 图标尺寸
|
||||
:::
|
||||
|
||||
::: demo 使用 `size` 属性设置尺寸
|
||||
|
||||
<template>
|
||||
<lay-icon type="layui-icon-star" size="26px" color="red"></lay-icon>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title 图标组件
|
||||
:::
|
||||
|
||||
<br>
|
||||
|
||||
::: describe 在 0.2.4 版本后, 图标支持组件化的调用方式, 首先你需要安装 `@layui/icons-vue` 依赖。
|
||||
:::
|
||||
|
||||
```
|
||||
npm install @layui/icons-vue
|
||||
```
|
||||
|
||||
::: describe 接下来, 你可以像之前使用组件一样去创建图标。
|
||||
:::
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<!-- 组件图标 -->
|
||||
<AlignCenterIcon></AlignCenterIcon>
|
||||
<DiamondIcon></DiamondIcon>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { AlignCenterIcon, DiamondIcon } from '@layui/icons-vue';
|
||||
</script>
|
||||
```
|
||||
|
||||
::: title 图标列表
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<ul class="site-doc-icon">
|
||||
<li v-for="(layIcon, index) of LayIconList" @click="copy(layIcon.class)">
|
||||
<i :class="[`layui-icon ${layIcon.class}`]"></i>
|
||||
<div class="doc-icon-name">{{ layIcon.name }}</div>
|
||||
<div class="doc-icon-code">&#x{{ iconsUnicode[index] }};</div>
|
||||
<div class="doc-icon-fontclass">{{ layIcon.class }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, nextTick, reactive } from 'vue'
|
||||
import { useClipboard, usePermission } from "@vueuse/core";
|
||||
import { layer } from '@layui/layer-vue';
|
||||
import { LayIconList } from '@layui/icons-vue';
|
||||
|
||||
const iconsUnicode = reactive([]);
|
||||
|
||||
function copy(iconClass) {
|
||||
const { isSupported, copy, copied } = useClipboard()
|
||||
const permissionWrite = usePermission('clipboard-write')
|
||||
if (isSupported && permissionWrite.value === 'granted') {
|
||||
copy(iconClass)
|
||||
copied.value = true
|
||||
} else {
|
||||
let inputEl = document.createElement('input')
|
||||
inputEl.value = iconClass
|
||||
document.body.appendChild(inputEl)
|
||||
inputEl.select()
|
||||
document.execCommand('Copy')
|
||||
inputEl.remove()
|
||||
copied.value = true
|
||||
}
|
||||
if (copied.value) {
|
||||
layer.msg(`复制成功  <span style="color:#5FB878;" >${ iconClass }</span>`,
|
||||
{
|
||||
icon: 1,
|
||||
time: 1500,
|
||||
offset:['15%','50%'],
|
||||
isHtmlFragment: true
|
||||
},
|
||||
() => { }
|
||||
)
|
||||
} else {
|
||||
layer.msg('复制失败', { icon: 2, time: 1500, }, () => { })
|
||||
}
|
||||
}
|
||||
|
||||
function getIconUnicode(iconClass){
|
||||
const iconEl = document.querySelector(`.site-doc-icon > li > .${iconClass}`);
|
||||
const iconBeforeContent = getComputedStyle(iconEl,":before").content;
|
||||
return iconBeforeContent;
|
||||
}
|
||||
onMounted(() => {
|
||||
LayIconList.forEach((icon) => {
|
||||
const unicode = getIconUnicode(icon.class).charCodeAt(1).toString(16); // unicode 10进制转16进制
|
||||
iconsUnicode.push(unicode)
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.site-doc-icon {
|
||||
margin-bottom: 50px;
|
||||
font-size: 0;
|
||||
}
|
||||
.site-doc-icon li .doc-icon-name,
|
||||
.site-doc-icon li .doc-icon-code {
|
||||
color: #c2c2c2;
|
||||
}
|
||||
.site-doc-icon li .doc-icon-fontclass {
|
||||
height: 40px;
|
||||
line-height: 20px;
|
||||
padding: 0 5px;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
}
|
||||
.site-doc-icon li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 16.5%;
|
||||
height: 105px;
|
||||
line-height: 25px;
|
||||
padding: 20px 0;
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
border: 1px solid #e2e2e2;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
transition: all 0.3s;
|
||||
-webkit-transition: all 0.3s;
|
||||
}
|
||||
.site-doc-icon li:hover{
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
.site-doc-icon li:hover{
|
||||
background-color:red;
|
||||
}
|
||||
.site-doc-icon li .layui-icon {
|
||||
display: inline-block;
|
||||
font-size: 32px;
|
||||
}
|
||||
.anim .site-doc-icon {
|
||||
margin-bottom: 50px;
|
||||
font-size: 0;
|
||||
}
|
||||
.anim .site-doc-icon li {
|
||||
width: 50%;
|
||||
}
|
||||
.anim .site-doc-icon li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 16.5%;
|
||||
height: 105px;
|
||||
line-height: 25px;
|
||||
padding: 20px 0;
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
border: 1px solid #e2e2e2;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
transition: all 0.3s;
|
||||
-webkit-transition: all 0.3s;
|
||||
}
|
||||
.anim .site-doc-icon li .layui-anim {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
line-height: 125px;
|
||||
margin: 0 auto 10px;
|
||||
text-align: center;
|
||||
background-color: var(--global-primary-color);
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.anim .site-doc-icon li .code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
:::
|
||||
|
||||
::: title 图标属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 默认值 |
|
||||
| ------ | ---- | ----------------- |
|
||||
| type | 图标 | `layui-icon-home` |
|
||||
| prefix | 前缀 | `layui-icon` |
|
||||
| color | 颜色 | -- |
|
||||
| size | 尺寸 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: previousNext iconfont
|
||||
:::
|
||||
151
package/document/src/document/zh-CN/components/iconPicker.md
Normal file
151
package/document/src/document/zh-CN/components/iconPicker.md
Normal file
@@ -0,0 +1,151 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 内置 icon 图标选择组件, 常用于权限管理, 菜单定制。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-icon-picker type="layui-icon-face-smile"></lay-icon-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const icon = ref("layui-icon-home")
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 默认选择
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-icon-picker v-model="icon" type="layui-icon-face-smile"></lay-icon-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const icon = ref("layui-icon-home")
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 开启分页
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-icon-picker v-model="icon" type="layui-icon-face-smile" page></lay-icon-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const icon = ref("layui-icon-home")
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 开启搜索
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-icon-picker v-model="icon" type="layui-icon-face-smile" page showSearch></lay-icon-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const icon = ref("layui-icon-home")
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 静态面板
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-icon-picker v-model="icon" type="layui-icon-face-smile" page showSearch position="static"></lay-icon-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const icon = ref("layui-icon-home")
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title icon-picker 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| | | |
|
||||
| ---------- | -------- | --- |
|
||||
| v-model | 默认值 | -- |
|
||||
| page | 开启分页 | -- |
|
||||
| showSearch | 启用搜索 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext iconPicker
|
||||
:::
|
||||
198
package/document/src/document/zh-CN/components/input.md
Normal file
198
package/document/src/document/zh-CN/components/input.md
Normal file
@@ -0,0 +1,198 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 通过鼠标或键盘输入内容，是最基础的表单域的包装。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-input` 标签, 创建输入框
|
||||
|
||||
<template>
|
||||
<lay-input v-model="data1"></lay-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const data1 = ref("内容");
|
||||
|
||||
return {
|
||||
data1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 提示信息
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-input placeholder="提示信息"></lay-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title 前缀后缀
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-input>
|
||||
<template #prefix>0</template>
|
||||
<template #suffix>0</template>
|
||||
</lay-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 允许清空
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-input allow-clear="true" v-model="value1"></lay-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const value1 = ref("内容")
|
||||
|
||||
return {
|
||||
value1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 事件回调
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-input v-model="data2" @input="input"></lay-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const data2 = ref("Input 事件");
|
||||
const input = function( val ) {
|
||||
console.log("当前值:" + val)
|
||||
}
|
||||
|
||||
return {
|
||||
data2,
|
||||
input
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 禁止输入
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-input placeholder="禁止输入" :disabled="disabled"></lay-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const disabled = ref(true)
|
||||
|
||||
return {
|
||||
disabled
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Input 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----------- | ------------- | -------------- |
|
||||
| name | 原始属性 name | -- |
|
||||
| placeholder | 提示信息 | -- |
|
||||
| disabled | 禁用 | `true` `false` |
|
||||
| v-model | 值 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Input 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ----- | --------------- | ---------------- |
|
||||
| input | 原生 input 事件 | event : 事件对象 |
|
||||
| foucs | 原生 foucs 事件 | event : 事件对象 |
|
||||
| blur | 原生 blur 事件 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext input
|
||||
:::
|
||||
153
package/document/src/document/zh-CN/components/inputNumber.md
Normal file
153
package/document/src/document/zh-CN/components/inputNumber.md
Normal file
@@ -0,0 +1,153 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 通过鼠标或键盘，输入范围内的数值。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-input-number` 标签, 创建数字输入框
|
||||
|
||||
<template>
|
||||
<lay-input-number v-model="data"></lay-input-number>
|
||||
<lay-input-number v-model="data2" position="right"></lay-input-number>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
const data = ref(0);
|
||||
const data2 = ref(0);
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
data,
|
||||
data2,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 尺寸
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<lay-input-number></lay-input-number>
|
||||
<lay-input-number size="md"></lay-input-number>
|
||||
<lay-input-number size="sm"></lay-input-number>
|
||||
<lay-input-number size="xs"></lay-input-number>
|
||||
</div>
|
||||
<div>
|
||||
<lay-input-number position="right"></lay-input-number>
|
||||
<lay-input-number position="right" size="md"></lay-input-number>
|
||||
<lay-input-number position="right" size="sm"></lay-input-number>
|
||||
<lay-input-number position="right" size="xs"></lay-input-number>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 限制数字大小
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-input-number :min="0" :max="10"></lay-input-number>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 数字步数
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-input-number :step="10"></lay-input-number>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 禁用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<p>禁用输入</p>
|
||||
<lay-input-number v-model="data" disabled-input></lay-input-number>
|
||||
<p>全部禁用</p>
|
||||
<lay-input-number v-model="data2" disabled></lay-input-number>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
const data = ref(10);
|
||||
const data2 = ref(25);
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
data,
|
||||
data2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title Input Number 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 |
|
||||
| -------- | ------------- | ------ | ------ |
|
||||
| v-model | 值 | `number` | 0 |
|
||||
| name | 原生属性`name` | `number` | 5 |
|
||||
| disabledInput | 禁用输入框输入 | `boolean` | false |
|
||||
| disabled | 禁用操作 | `boolean` | false |
|
||||
| step | 数字增减的步数 | `number` | 1 |
|
||||
| position | 控制按钮显示位置, 目前除了默认值，只有`right`可填 | `string` | -- |
|
||||
| min | 最小可输入的数 | `number` | -- |
|
||||
| max | 最大可输入的数 | `number` | -- |
|
||||
| size | 尺寸, 可选值`md` / `sm` / `xs`| `string` | 默认为最大尺寸 |
|
||||
|
||||
:::
|
||||
|
||||
::: title Input Number 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 回调参数 |
|
||||
| -------- | -------- | ------ |
|
||||
| change | 值更改触发事件 | (value: number) |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext inputNumber
|
||||
:::
|
||||
269
package/document/src/document/zh-CN/components/layout.md
Normal file
269
package/document/src/document/zh-CN/components/layout.md
Normal file
@@ -0,0 +1,269 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 既可编织出绚丽的前台页面，又可满足繁杂的管理系统界面需求。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-layout class="example">
|
||||
<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>
|
||||
.example .layui-footer,
|
||||
.example .layui-header {
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
background: #87ca9a;
|
||||
color: white;
|
||||
}
|
||||
.example .layui-side {
|
||||
display: flex;
|
||||
background: #77c38c;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
.example .layui-body {
|
||||
display: flex;
|
||||
background: #5FB878;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 左右布局
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-layout class="example">
|
||||
<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>
|
||||
<style>
|
||||
.example .layui-footer,
|
||||
.example .layui-header {
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
background: #87ca9a;
|
||||
color: white;
|
||||
}
|
||||
.example .layui-side {
|
||||
display: flex;
|
||||
background: #77c38c;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
.example .layui-body {
|
||||
display: flex;
|
||||
background: #5FB878;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 后台布局
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-layout class="example">
|
||||
<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>
|
||||
<style>
|
||||
.example .layui-footer,
|
||||
.example .layui-header {
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
background: #87ca9a;
|
||||
color: white;
|
||||
}
|
||||
.example .layui-side {
|
||||
display: flex;
|
||||
background: #77c38c;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
.example .layui-body {
|
||||
display: flex;
|
||||
background: #5FB878;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 复杂布局
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-layout class="example">
|
||||
<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 class="example">
|
||||
<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 class="example">
|
||||
<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 class="example">
|
||||
<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>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.example .layui-footer,
|
||||
.example .layui-header {
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
background: #87ca9a;
|
||||
color: white;
|
||||
}
|
||||
.example .layui-side {
|
||||
display: flex;
|
||||
background: #77c38c;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
.example .layui-body {
|
||||
display: flex;
|
||||
background: #5FB878;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
::: title 布局组件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 组件 | 描述 | |
|
||||
| ---------- | ---- | --- |
|
||||
| lay-layout | 容器 | -- |
|
||||
| lay-header | 顶部 | -- |
|
||||
| lay-logo | 图标 | -- |
|
||||
| lay-side | 侧边 | -- |
|
||||
| lay-body | 内容 | -- |
|
||||
| lay-footer | 底部 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext layout
|
||||
:::
|
||||
54
package/document/src/document/zh-CN/components/line.md
Normal file
54
package/document/src/document/zh-CN/components/line.md
Normal file
@@ -0,0 +1,54 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
默认分割线
|
||||
<lay-line></lay-line><br/>
|
||||
赤色分割线
|
||||
<lay-line theme="red"></lay-line><br/>
|
||||
橙色分割线
|
||||
<lay-line theme="orange"></lay-line><br/>
|
||||
墨绿分割线
|
||||
<lay-line theme="green"></lay-line><br/>
|
||||
青色分割线
|
||||
<lay-line theme="cyan"></lay-line><br/>
|
||||
蓝色分割线
|
||||
<lay-line theme="blue"></lay-line><br/>
|
||||
黑色分割线
|
||||
<lay-line theme="black"></lay-line><br/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Line 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| Name | Description | Accepted Values |
|
||||
| ----- | ----------- | --------------------------------------------- |
|
||||
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext line
|
||||
:::
|
||||
139
package/document/src/document/zh-CN/components/load.md
Normal file
139
package/document/src/document/zh-CN/components/load.md
Normal file
@@ -0,0 +1,139 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 页面正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button-container>
|
||||
<lay-button @click="loading0" type="primary">加载一</lay-button>
|
||||
<lay-button @click="loading1" type="primary">加载二</lay-button>
|
||||
<lay-button @click="loading2" type="primary">加载三</lay-button>
|
||||
</lay-button-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { layer } from "@layui/layer-vue"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const loading0 = function() {
|
||||
layer.load(0, {time: 3000})
|
||||
}
|
||||
|
||||
const loading1 = function() {
|
||||
layer.load(1, {time: 3000})
|
||||
}
|
||||
|
||||
const loading2 = function() {
|
||||
layer.load(2, {time: 3000})
|
||||
}
|
||||
|
||||
return {
|
||||
loading0,
|
||||
loading1,
|
||||
loading2,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 其他方式
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button type="primary" @click="openLoading">加载消息</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { layer } from "@layui/layer-vue"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const openLoading = function() {
|
||||
layer.msg("加载中...", { icon : 16, time: 1000})
|
||||
}
|
||||
|
||||
return {
|
||||
openLoading
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 手动关闭
|
||||
:::
|
||||
|
||||
::: demo 使用 layer.msg 创建弹出层, time 属性用于配置显示时长
|
||||
|
||||
<template>
|
||||
<lay-button-container>
|
||||
<lay-button @click="loading" type="primary">关闭消息</lay-button>
|
||||
</lay-button-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { layer } from "@layui/layer-vue"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const loading = function() {
|
||||
let id = layer.load(0)
|
||||
|
||||
setTimeout(() => {
|
||||
layer.close(id)
|
||||
},3000)
|
||||
}
|
||||
|
||||
return {
|
||||
loading
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title 组件方法
|
||||
:::
|
||||
|
||||
```
|
||||
layer.load(load, options)
|
||||
```
|
||||
|
||||
::: title 组件属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 备注 |
|
||||
| ------------------- | ------ | ---- |
|
||||
| load | 组件类型 | `1` `2` `3` |
|
||||
| options | 选配属性 | { time: 加载时长 } |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext load
|
||||
:::
|
||||
540
package/document/src/document/zh-CN/components/menu.md
Normal file
540
package/document/src/document/zh-CN/components/menu.md
Normal file
@@ -0,0 +1,540 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys1">
|
||||
<lay-menu-item id="1">首页</lay-menu-item>
|
||||
<lay-menu-item id="2">首页</lay-menu-item>
|
||||
<lay-menu-item id="3">首页</lay-menu-item>
|
||||
<lay-sub-menu id="7">
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="8">首页</lay-menu-item>
|
||||
<lay-menu-item id="9">首页</lay-menu-item>
|
||||
<lay-sub-menu title="菜单" id="10">
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="11">首页</lay-menu-item>
|
||||
<lay-menu-item id="12">首页</lay-menu-item>
|
||||
<lay-menu-item id="13">首页</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const selectedKey = ref("5")
|
||||
const openKeys1 = ref(["7"])
|
||||
return {
|
||||
selectedKey,
|
||||
openKeys1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 垂直导航
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys2" :tree="true">
|
||||
<lay-menu-item id="1">首页</lay-menu-item>
|
||||
<lay-menu-item id="2">首页</lay-menu-item>
|
||||
<lay-menu-item id="3">首页</lay-menu-item>
|
||||
<lay-sub-menu id="7">
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="8">首页</lay-menu-item>
|
||||
<lay-menu-item id="9">首页</lay-menu-item>
|
||||
<lay-sub-menu title="菜单" id="10">
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="11">首页</lay-menu-item>
|
||||
<lay-menu-item id="12">首页</lay-menu-item>
|
||||
<lay-menu-item id="13">首页</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const openKeys2 = ref(["7"])
|
||||
const selectedKey = ref("5")
|
||||
|
||||
return {
|
||||
openKeys2,
|
||||
selectedKey
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 反转样式
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu :level="isLevel" v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys3" :tree="true">
|
||||
<lay-menu-item id="1">首页</lay-menu-item>
|
||||
<lay-menu-item id="2">首页</lay-menu-item>
|
||||
<lay-menu-item id="3">首页</lay-menu-item>
|
||||
<lay-sub-menu id="7">
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="8">首页</lay-menu-item>
|
||||
<lay-menu-item id="9">首页</lay-menu-item>
|
||||
<lay-sub-menu id="10">
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="11">首页</lay-menu-item>
|
||||
<lay-menu-item id="12">首页</lay-menu-item>
|
||||
<lay-menu-item id="13">首页</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const isLevel = ref(false);
|
||||
const openKeys3 = ref(["7"]);
|
||||
const selectedKey = ref("5");
|
||||
|
||||
return {
|
||||
isLevel,
|
||||
openKeys3,
|
||||
selectedKey
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 切换主题
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" theme="light" v-model:openKeys="openKeys4" :tree="true">
|
||||
<lay-menu-item id="1">
|
||||
<template #title>
|
||||
菜单
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="2">
|
||||
<template #title>
|
||||
菜单
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="3">
|
||||
<template #title>
|
||||
菜单
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-sub-menu id="7">
|
||||
<template #title>
|
||||
目录
|
||||
</template>
|
||||
<lay-menu-item id="8">
|
||||
菜单
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="9">
|
||||
菜单
|
||||
</lay-menu-item>
|
||||
<lay-sub-menu title="菜单" id="10">
|
||||
<template #title>
|
||||
目录
|
||||
</template>
|
||||
<lay-menu-item id="11">
|
||||
菜单
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="12">
|
||||
菜单
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="13">
|
||||
菜单
|
||||
</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const openKeys4 = ref(["7"])
|
||||
const selectedKey = ref("5")
|
||||
|
||||
return {
|
||||
openKeys4,
|
||||
selectedKey
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 菜单插槽
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys5" v-model:tree="isTree">
|
||||
<lay-menu-item id="1">
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
首页
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
<lay-sub-menu id="7">
|
||||
<template v-slot:title>
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
目录
|
||||
</router-link>
|
||||
</template>
|
||||
<lay-menu-item id="8">
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
菜单
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="9">
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
菜单
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const isTree = ref(true)
|
||||
const selectedKey = ref("5")
|
||||
const openKeys5 = ref(["7"])
|
||||
|
||||
return {
|
||||
isTree,
|
||||
openKeys5,
|
||||
selectedKey
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 菜单折叠
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-switch v-model="collapse"></lay-switch>
|
||||
<br/>
|
||||
<br/>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:tree="isTree" v-model:openKeys="openKeys6" :collapse="collapse">
|
||||
<lay-menu-item id="1">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="2">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="3">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-sub-menu title="目录" id="7">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="8">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="9">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-sub-menu id="10">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="11">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="12">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-sub-menu id="13">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="14">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="15">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="16">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-sub-menu>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const selectedKey = ref("5")
|
||||
const openKeys6 = ref(["7"])
|
||||
const collapse = ref(true)
|
||||
const isTree = ref(true)
|
||||
return {
|
||||
selectedKey,
|
||||
openKeys6,
|
||||
colapse,
|
||||
isTree
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 过渡动画
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" :collapse-transition="collapseTransition" v-model:openKeys="openKeys7" v-model:tree="isTree">
|
||||
<lay-menu-item id="1">
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
首页
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
<lay-sub-menu id="7">
|
||||
<template v-slot:title>
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
目录
|
||||
</router-link>
|
||||
</template>
|
||||
<lay-menu-item id="8">
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
菜单
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="9">
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
菜单
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const isTree = ref(true)
|
||||
const collapseTransition = ref(false);
|
||||
const selectedKey = ref("5")
|
||||
const openKeys7 = ref(["7"])
|
||||
|
||||
return {
|
||||
isTree,
|
||||
openKeys7,
|
||||
selectedKey,
|
||||
collapseTransition
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Menu 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 备注 |
|
||||
| ------------------- | -------------- | -------------- |
|
||||
| v-model:selectedKey | 选中项 | -- |
|
||||
| v-model:openKeys | 打开项 | -- |
|
||||
| theme | 菜单主题 | `dark` `light` |
|
||||
| inverted | 特殊的激活样式 | `true` `false` |
|
||||
| level | 菜单层级 | `true` `false` |
|
||||
| collapse | 折叠状态 | `true` `false` |
|
||||
| collapse-transition | 折叠动画 | `true` `false` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Menu Item 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 备注 |
|
||||
| ----- | -------- | ---- |
|
||||
| title | 菜单标题 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Menu Item 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 备注 |
|
||||
| ----- | -------- | ---- |
|
||||
| title | 菜单标题 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Sub Menu 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 备注 |
|
||||
| ----- | -------- | ---- |
|
||||
| title | 菜单标题 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Sub Menu 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 备注 |
|
||||
| ----- | -------- | ---- |
|
||||
| title | 菜单标题 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext nav
|
||||
:::
|
||||
326
package/document/src/document/zh-CN/components/modal.md
Normal file
326
package/document/src/document/zh-CN/components/modal.md
Normal file
@@ -0,0 +1,326 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。
|
||||
:::
|
||||
|
||||
::: title 基本使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible1" type="primary">基础使用</lay-button>
|
||||
<lay-layer title="基础使用" v-model="visible1">
|
||||
内容
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const visible1 = ref(false)
|
||||
const changeVisible1 = function() {
|
||||
visible1.value = !visible1.value
|
||||
}
|
||||
return {
|
||||
visible1
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 允许拖动
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible2" type="primary">允许拖动</lay-button>
|
||||
<lay-layer title="允许拖动" v-model="visible2">
|
||||
内容
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const visible2 = ref(false)
|
||||
const changeVisible2 = function() {
|
||||
visible2.value = !visible2.value
|
||||
}
|
||||
return {
|
||||
visible2
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 放大缩小
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible3" type="primary">放大缩小</lay-button>
|
||||
<lay-layer title="放大缩小" v-model="visible3" move="true" maxmin="true">
|
||||
内容
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const visible3 = ref(false)
|
||||
const changeVisible3 = function() {
|
||||
visible3.value = !visible3.value
|
||||
}
|
||||
return {
|
||||
visible3
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 指定位置
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible4" type="primary">指定位置</lay-button>
|
||||
<lay-layer title="指定位置" v-model="visible4" move="true" :offset="['100px','100px']">
|
||||
内容
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const visible4 = ref(false)
|
||||
const changeVisible4 = function() {
|
||||
visible4.value = !visible4.value
|
||||
}
|
||||
return {
|
||||
visible4
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 尺寸拉伸
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible8" type="primary">尺寸拉伸</lay-button>
|
||||
<lay-layer title="拉伸尺寸" resize="true" v-model="visible8" move="true">
|
||||
内容
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const visible8 = ref(false)
|
||||
const changeVisible8 = function() {
|
||||
visible8.value = !visible8.value
|
||||
}
|
||||
return {
|
||||
visible8
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 远程窗体
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible5" type="primary">远程窗体</lay-button>
|
||||
<lay-layer title="加载 Iframe 内容" :area="['500px','400px']" maxmin="true" v-model="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const type5 = ref(2)
|
||||
const visible5 = ref(false)
|
||||
const changeVisible5 = function() {
|
||||
visible5.value = !visible5.value
|
||||
}
|
||||
return {
|
||||
type5,
|
||||
visible5
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 定义操作
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible6" type="primary">定义操作</lay-button>
|
||||
<lay-layer title="定义操作" v-model="visible6" move="true" :btn="btn6">
|
||||
内容
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const visible6 = ref(false)
|
||||
const btn6 = [
|
||||
{text:'确认', callback: ()=>{ alert("确认事件") }},
|
||||
{text:'取消', callback: ()=>{ alert("取消事件") }}
|
||||
]
|
||||
const changeVisible6 = function() {
|
||||
visible6.value = !visible6.value
|
||||
}
|
||||
return {
|
||||
btn6,
|
||||
visible6
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 关闭遮盖
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible7" type="primary">开启遮盖</lay-button>
|
||||
<lay-layer title="开启遮盖" move="true" shade="false" v-model="visible7">
|
||||
内容
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const visible7 = ref(false)
|
||||
const changeVisible7 = function() {
|
||||
visible7.value = !visible7.value
|
||||
}
|
||||
return {
|
||||
visible7
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 函数调用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="open" type="primary">打开</lay-button>
|
||||
<lay-button @click="close" type="primary">关闭</lay-button>
|
||||
<lay-button @click="closeAll" type="primary">关闭所有</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { layer } from "@layui/layer-vue"
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
let id = null;
|
||||
const open = function() {
|
||||
id = layer.open({title:"标题",content:"内容", shade: false})
|
||||
}
|
||||
const close = function() {
|
||||
layer.close(id)
|
||||
}
|
||||
const closeAll = function() {
|
||||
layer.closeAll()
|
||||
}
|
||||
return {
|
||||
open,
|
||||
close,
|
||||
closeAll
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 弹层属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 备注 | 描述 | 默认值 |
|
||||
| --------------- | ------------- | --------------------------|
|
||||
| title | 标题 | -- |
|
||||
| move | 允许拖拽 | `false` |
|
||||
| maxmin | 最小化 最大化 | `false` |
|
||||
| offset | 位置 | -- |
|
||||
| area | 尺寸 | -- |
|
||||
| v-model | 展示 隐藏 | false |
|
||||
| content | 内容 | -- |
|
||||
| shade | 开启遮盖 | -- |
|
||||
| shadeClose | 遮盖点击关闭 | -- |
|
||||
| shadeOpacity | 遮盖层透明度 | `0.1` |
|
||||
| zIndex | 自定义层级 | -- |
|
||||
| type | 类型 | `1: component` `2: iframe` |
|
||||
| closeBtn | 显示关闭 | true |
|
||||
| btn | 按钮 格式:{text:"",callback:function(){}} | -- |
|
||||
| btnAlign | 按钮布局 | `l` `r` `c` |
|
||||
| anim | 入场动画 | `0` `-` `6` |
|
||||
| isOutAnim | 关闭动画 | `true` `false` |
|
||||
| success | 显示回调 | -- |
|
||||
| close | 关闭回调 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext modal
|
||||
:::
|
||||
100
package/document/src/document/zh-CN/components/msg.md
Normal file
100
package/document/src/document/zh-CN/components/msg.md
Normal file
@@ -0,0 +1,100 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 全局展示操作反馈信息。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button type="primary" @click="openMsg">普通消息</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { layer } from "@layui/layer-vue"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const openMsg = function() {
|
||||
layer.msg("普通消息", { time: 1000 })
|
||||
}
|
||||
return {
|
||||
openMsg
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 指定图标
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button type="primary" @click="openSuccess">成功消息</lay-button>
|
||||
<lay-button type="primary" @click="openFailure">失败消息</lay-button>
|
||||
<lay-button type="primary" @click="openWarning">警告消息</lay-button>
|
||||
<lay-button type="primary" @click="openPrimary">详情消息</lay-button>
|
||||
<lay-button type="primary" @click="openLoading">加载消息</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { layer } from "@layui/layer-vue"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const openSuccess = function() {
|
||||
layer.msg("成功消息", { icon : 1, time: 100000})
|
||||
}
|
||||
const openFailure = function() {
|
||||
layer.msg("失败消息", { icon : 2, time: 1000})
|
||||
}
|
||||
const openWarning = function() {
|
||||
layer.msg("警告消息", { icon : 3, time: 1000})
|
||||
}
|
||||
const openPrimary = function() {
|
||||
layer.msg("详情消息", { icon : 4, time: 1000})
|
||||
}
|
||||
const openLoading = function() {
|
||||
layer.msg("加载消息", { icon : 16, time: 1000})
|
||||
}
|
||||
return {
|
||||
openSuccess, openFailure, openWarning, openPrimary, openLoading
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 组件方法
|
||||
:::
|
||||
|
||||
```
|
||||
layer.msg(content, options)
|
||||
```
|
||||
|
||||
::: title 组件属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 备注 |
|
||||
| ------------------- | ------ | ----|
|
||||
| content | 消息内容 | -- |
|
||||
| options | 选配属性 | { time: 加载时长, icon: 图标 } |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext msg
|
||||
:::
|
||||
100
package/document/src/document/zh-CN/components/noticeBar.md
Normal file
100
package/document/src/document/zh-CN/components/noticeBar.md
Normal file
@@ -0,0 +1,100 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 全局展示操作反馈信息。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-notice-bar text="以写作为工具，为道途，先帮助自己一程，再以自己的领悟帮助他人一程, 这是一种服务 。" mode="link"></lay-notice-bar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { layer } from "@layui/layer-vue"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 使用图标
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-notice-bar leftIcon="layui-icon-mute" text="最好的爱是两个人彼此做个伴，不要束缚，不要缠绕，不要占有，不渴望从对方那里得到，只是并肩站在一起，看看这个世界。"></lay-notice-bar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "vue"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 允许关闭
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-notice-bar leftIcon="layui-icon-mute" rightIcon="layui-icon-close" text="所有发生过的都是既定的。是应该发生。只能发生。" mode="closeable"></lay-notice-bar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "vue"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const visible = ref(true);
|
||||
|
||||
return {
|
||||
visible
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title Notice Bar 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ---- | -------- | --------------------- |
|
||||
| mode | 模式 | 'link' 'closeable' |
|
||||
| text | 内容 | 滚动内容 |
|
||||
| leftIcon | 左侧图标 | -- |
|
||||
| rightIcon | 右侧图标 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext transfer
|
||||
:::
|
||||
314
package/document/src/document/zh-CN/components/page.md
Normal file
314
package/document/src/document/zh-CN/components/page.md
Normal file
@@ -0,0 +1,314 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-page` 标签, 创建分页
|
||||
|
||||
<template>
|
||||
<lay-page v-model="currentPage" :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage"></lay-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const limit = ref(20)
|
||||
const total = ref(100)
|
||||
const showPage = ref(true)
|
||||
const currentPage = ref(2);
|
||||
|
||||
return {
|
||||
limit,
|
||||
total,
|
||||
showPage,
|
||||
currentPage
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 简单模式
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" @limit="limit = $event" :total="total"></lay-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const limit = ref(20)
|
||||
const total = ref(100)
|
||||
|
||||
return {
|
||||
limit,
|
||||
total
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 插槽使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" @limit="limit = $event" :total="total">
|
||||
<template v-slot:prev>上</template>
|
||||
<template v-slot:next>下</template>
|
||||
</lay-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const limit = ref(20)
|
||||
const total = ref(100)
|
||||
|
||||
return {
|
||||
limit,
|
||||
total
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 不同主题
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage" theme="red"></lay-page>
|
||||
<br>
|
||||
<lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage" theme="blue"></lay-page>
|
||||
<br>
|
||||
<lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage" theme="orange"></lay-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const limit = ref(20)
|
||||
const total = ref(100)
|
||||
const showPage = ref(true)
|
||||
|
||||
return {
|
||||
limit,
|
||||
total,
|
||||
showPage
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 指定分页容量
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" :total="total" showCount showPage :limits="[10,50,100,200]" @limit="limit=$event"></lay-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const limit = ref(20)
|
||||
const total = ref(100)
|
||||
|
||||
return {
|
||||
limit,
|
||||
total
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 每页数量切换事件(limit)
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" showPage showCount :total="total" @limit="limit=$event" :show-limit="showLimit" ></lay-page>
|
||||
<div>每页数量:{{limit}}</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const limit = ref(5)
|
||||
const total = ref(9999)
|
||||
const showLimit = ref(true)
|
||||
|
||||
return {
|
||||
limit,
|
||||
total,
|
||||
showLimit,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 完整分页
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" :total="9999" :show-count="showCount" @limit="limit=$event" :show-page="showPage" :show-limit="showLimit" :show-refresh="showRefresh" showSkip="showSkip"></lay-page>
|
||||
每页数量:{{limit}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const limit = ref(5)
|
||||
const total = ref(9999)
|
||||
const showCount = ref(true)
|
||||
const showPage = ref(true)
|
||||
const showLimit = ref(true)
|
||||
const showRefresh = ref(true)
|
||||
const showSkip = ref(true)
|
||||
|
||||
return {
|
||||
limit,
|
||||
total,
|
||||
showCount,
|
||||
showPage,
|
||||
showLimit,
|
||||
showRefresh,
|
||||
showSkip
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 页码切换事件(jump)
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" :total="total" @jump="jump" @limit="limit = $event" :show-page="showSkip"></lay-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const limit = ref(20)
|
||||
const total = ref(100)
|
||||
const showPage = ref(true)
|
||||
const jump = function({ current }) {
|
||||
console.log("当前页:" + current)
|
||||
}
|
||||
|
||||
return {
|
||||
limit,
|
||||
total,
|
||||
jump,
|
||||
showPage
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Page 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 默认值 |
|
||||
| ----------- | ------------ | ------- |
|
||||
| v-model | 当前页 | -- |
|
||||
| limit | 每页数量 | -- |
|
||||
| total | 总条数 | -- |
|
||||
| showCount | 显示总数 | `false` |
|
||||
| showPage | 显示每页 | `false` |
|
||||
| showLimit | 显示每页数量 | `false` |
|
||||
| showRefresh | 显示刷新按钮 | `false` |
|
||||
| showSkip | 显示跳转 | `false` |
|
||||
| pages | 显示切页按钮数量 | `10` |
|
||||
| limits | 切换每页数量的选择项 | `[10,20,30,40,50]` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Page 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ---- | -------- | --------------------- |
|
||||
| jump | 切换回调 | { current: 当前页面 } |
|
||||
| limit | 每页数量变化 | 变化后的值 |
|
||||
|
||||
:::
|
||||
|
||||
::: title Page 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 默认值 |
|
||||
| ---- | ------ | ------ |
|
||||
| prev | 上一页 | 上一页 |
|
||||
| next | 下一页 | 下一页 |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext page
|
||||
:::
|
||||
47
package/document/src/document/zh-CN/components/panel.md
Normal file
47
package/document/src/document/zh-CN/components/panel.md
Normal file
@@ -0,0 +1,47 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 面板通常是指一个独立的容器
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-panel` 标签, 创建面板组件
|
||||
|
||||
<template>
|
||||
<lay-panel><div style="padding: 30px;">面板</div></lay-panel>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Panel 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 可选值 |
|
||||
| ------- | -------- | ------ |
|
||||
| default | 默认插槽 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext panel
|
||||
:::
|
||||
141
package/document/src/document/zh-CN/components/progress.md
Normal file
141
package/document/src/document/zh-CN/components/progress.md
Normal file
@@ -0,0 +1,141 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 可应用于许多业务场景，如完成进度、页面加载，是一种较为直观的表达元素。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-progress percent="70"></lay-progress>
|
||||
<br>
|
||||
<lay-progress percent="60"></lay-progress>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 尺寸大小
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-progress percent="40" size="big"></lay-progress>
|
||||
<br>
|
||||
<lay-progress percent="60" size="big" theme="green"></lay-progress>
|
||||
<br>
|
||||
<lay-progress percent="80" size="big" theme="cyan"></lay-progress>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 指定主题
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-progress percent="60" theme="red"></lay-progress>
|
||||
<br>
|
||||
<lay-progress percent="60" theme="orange"></lay-progress>
|
||||
<br>
|
||||
<lay-progress percent="60" theme="green"></lay-progress>
|
||||
<br>
|
||||
<lay-progress percent="60" theme="blue"></lay-progress>
|
||||
<br>
|
||||
<lay-progress percent="60" theme="cyan"></lay-progress>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 显示文字
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-progress percent="80" :show-text="showText"></lay-progress>
|
||||
<br/>
|
||||
<br/>
|
||||
<lay-progress percent="80" :show-text="showText" text="销售量"></lay-progress>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const showText = ref(true)
|
||||
|
||||
return {
|
||||
showText
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Progress 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| -------- | -------- | --------------------------------------------- |
|
||||
| percent | 进度 | -- |
|
||||
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
|
||||
| size | 尺寸 | `big` |
|
||||
| text | 提示 | -- |
|
||||
| color | 颜色 | -- |
|
||||
| showText | 展示描述 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext progress
|
||||
:::
|
||||
67
package/document/src/document/zh-CN/components/quote.md
Normal file
67
package/document/src/document/zh-CN/components/quote.md
Normal file
@@ -0,0 +1,67 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-quote>引用区域的文字</lay-quote>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 灰色主题
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-quote type="nm">引用区域的文字</lay-quote>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const nm = ref(true)
|
||||
|
||||
return {
|
||||
nm
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Quote 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| Name | Description | Accepted Values |
|
||||
| ---- | ----------- | --------------- |
|
||||
| nm | 灰色样式 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext block
|
||||
:::
|
||||
133
package/document/src/document/zh-CN/components/radio.md
Normal file
133
package/document/src/document/zh-CN/components/radio.md
Normal file
@@ -0,0 +1,133 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 用于在多个备选项中选中单个状态。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-radio` 标签, 创建一个单选框
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-radio v-model="selected1" name="action" label="1">写作</lay-radio>
|
||||
<lay-radio v-model="selected1" name="action" label="2">画画</lay-radio>
|
||||
<lay-radio v-model="selected1" name="action" label="3">运动</lay-radio>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const selected1 = ref("1");
|
||||
|
||||
return {
|
||||
selected1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 禁用状态
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-radio v-model="selected2" name="action" label="1">写作</lay-radio>
|
||||
<lay-radio v-model="selected2" name="action" label="2">画画</lay-radio>
|
||||
<lay-radio v-model="selected2" name="action" label="3">运动</lay-radio>
|
||||
<lay-radio v-model="selected2" name="action" label="4" :disabled="disabled">禁用</lay-radio>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const disabled = ref(true);
|
||||
const selected2 = ref("1");
|
||||
|
||||
return {
|
||||
disabled,
|
||||
selected2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 事件回调
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-radio v-model="selected3" name="action" label="1" @change="change">写作</lay-radio>
|
||||
<lay-radio v-model="selected3" name="action" label="2" @change="change">画画</lay-radio>
|
||||
<lay-radio v-model="selected3" name="action" label="3" @change="change">运动</lay-radio>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const selected3 = ref("1");
|
||||
const change = function( current ) {
|
||||
console.log("当前值:" + current)
|
||||
}
|
||||
return {
|
||||
selected3,
|
||||
change
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Radio 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 默认值 |
|
||||
| ------- | ------------- | ------ |
|
||||
| name | 原始属性 name | -- |
|
||||
| label | 当前值 | -- |
|
||||
| v-model | 选中值 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Radio 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ------ | -------- | ---------------- |
|
||||
| change | 切换事件 | current : 当前值 |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext radio
|
||||
:::
|
||||
321
package/document/src/document/zh-CN/components/rate.md
Normal file
321
package/document/src/document/zh-CN/components/rate.md
Normal file
@@ -0,0 +1,321 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 在电商和 O2O 平台尤为常见，常用于对商家进行服务满意度评价。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-rate` 标签, 创建评分组件
|
||||
|
||||
<template>
|
||||
<lay-rate v-model="all1"></lay-rate>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const all1 = ref(0)
|
||||
|
||||
return {
|
||||
all1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 显示文字
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-rate v-model="all" :text="true"></lay-rate>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const all = ref(4)
|
||||
|
||||
return {
|
||||
all
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 半星效果
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-rate v-model="half1" :half="true" :is-block="true"></lay-rate>
|
||||
<lay-rate v-model="half2" :half="true" :text="true" :is-block="true"></lay-rate>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const half1 = ref(0.5)
|
||||
const half2 = ref(0)
|
||||
|
||||
|
||||
return {
|
||||
half1,
|
||||
half2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 自定义内容
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-rate v-model="val" :text="true" :is-block="true">
|
||||
<template v-slot:default="{value}">{{customText(value)}}</template>
|
||||
</lay-rate>
|
||||
<lay-rate v-model="val2" :text="true" :is-block="true">
|
||||
<template v-slot:default="{value}">{{value}}</template>
|
||||
</lay-rate>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const val = ref(1)
|
||||
const val2 = ref(1)
|
||||
const arrs = {
|
||||
'1': '极差',
|
||||
'2': '差',
|
||||
'3': '中等',
|
||||
'4': '好',
|
||||
'5': '极好'
|
||||
};
|
||||
const customText = function(val){
|
||||
return arrs[val];
|
||||
}
|
||||
return {
|
||||
val,
|
||||
val2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 指定长度
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-rate v-model="all2" :length="length"></lay-rate>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const all2 = ref(4);
|
||||
const length = ref(10)
|
||||
|
||||
return {
|
||||
all2,
|
||||
length
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 触发事件
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-rate v-model="val" @select="selectRate"></lay-rate>
|
||||
<div>F12 打开调试工具 -> console 控制面板进行查看</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const val = ref(0);
|
||||
const selectRate = function(value){
|
||||
console.log('selectRate - value:', value)
|
||||
}
|
||||
|
||||
return {
|
||||
val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 只读模式
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-rate v-model="all3" readonly="true"></lay-rate>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const all3 = ref(4)
|
||||
|
||||
return {
|
||||
all3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 定义主题
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-rate v-model="all4" theme="#FF8000"></lay-rate><br>
|
||||
<lay-rate v-model="all4" theme="#009688"></lay-rate><br>
|
||||
<lay-rate v-model="all4" theme="#1E9FFF"></lay-rate><br>
|
||||
<lay-rate v-model="all4" theme="#2F4056"></lay-rate><br>
|
||||
<lay-rate v-model="all4" theme="#FE0000"></lay-rate><br>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const all4 = ref(4)
|
||||
|
||||
return {
|
||||
all4
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 自定义图标
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-rate v-model="icons" :icons="['layui-icon-heart', 'layui-icon-heart-fill']" theme="#FE0000"></lay-rate><br>
|
||||
<lay-rate v-model="halfIcons" :icons="['layui-icon-circle', 'layui-icon-radio', 'layui-icon-circle-dot']" half text></lay-rate><br>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const icons = ref(4)
|
||||
const halfIcons = ref(0.5)
|
||||
|
||||
|
||||
return {
|
||||
icons,
|
||||
halfIcons
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Rate 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 |
|
||||
| -------- | -------- | ------ | ------ |
|
||||
| v-model | 评分值 | `number` | 0 |
|
||||
| length | 评分长度 | `number` | 5 |
|
||||
| readonly | 只读模式 | `boolean` | false |
|
||||
| theme | 主题颜色 | `string` | #ffb800 |
|
||||
| half | 设定组件是否可以选择半星 | `boolean` | false |
|
||||
| text | 是否显示评分对应的内容 | `boolean` | false |
|
||||
| is-block | 评分是否显示为快元素 | `boolean` | false |
|
||||
| icons | 评分使用图标`class`；`["空心", "实心"]`/`["空心", "半心", "实心"]` | `string[]` | 星型 |
|
||||
|
||||
:::
|
||||
|
||||
::: title Rate 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 参数 |
|
||||
| -------- | -------- | ------ |
|
||||
| -- | 默认插槽，自定义内容时可以使用为 | { value } |
|
||||
|
||||
:::
|
||||
|
||||
::: title Rate 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 回调参数 |
|
||||
| -------- | -------- | ------ |
|
||||
| select | 选中之后触发事件 | (value: number) |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext rate
|
||||
:::
|
||||
112
package/document/src/document/zh-CN/components/result.md
Normal file
112
package/document/src/document/zh-CN/components/result.md
Normal file
@@ -0,0 +1,112 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。
|
||||
:::
|
||||
|
||||
::: title 成功
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-result` 标签, 创建一个结果页面
|
||||
|
||||
<template>
|
||||
<lay-result></lay-result>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 失败
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-result` 标签, 创建一个结果页面
|
||||
|
||||
<template>
|
||||
<lay-result status="failure"></lay-result>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 完整
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-result` 标签, 创建一个结果页面
|
||||
|
||||
<template>
|
||||
<lay-result status="failure">
|
||||
<template #extra>
|
||||
<lay-button type="primary">再来一次</lay-button>
|
||||
<lay-button >返回首页</lay-button>
|
||||
</template>
|
||||
</lay-result>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Result 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----------- | -------- | ------ |
|
||||
| title | 标题 | -- |
|
||||
| status | 状态 | `success` `failure` |
|
||||
| describe | 描述信息 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Result 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----------- | -------- | ------ |
|
||||
| content | 内容 | -- |
|
||||
| extra | 扩展 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext field
|
||||
:::
|
||||
52
package/document/src/document/zh-CN/components/scroll.md
Normal file
52
package/document/src/document/zh-CN/components/scroll.md
Normal file
@@ -0,0 +1,52 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 虚拟滚动, 常用于美化浏览器原生滚动条。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-scroll` 标签, 创建一个虚拟滚动容器
|
||||
|
||||
<template>
|
||||
<lay-scroll height="200px" style="background-color:whitesmoke;">
|
||||
<lay-panel v-for="(n,index) in 50" :key="n" style="margin:10px;padding:10px;">内容</lay-panel>
|
||||
</lay-scroll>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Scroll 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----------- | -------- | ------ |
|
||||
| height | 高度 | -- |
|
||||
| scrollWidth | 滑块宽度 | -- |
|
||||
| scrollColor | 滑块颜色 | -- |
|
||||
| slotColor | 滑槽颜色 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext field
|
||||
:::
|
||||
373
package/document/src/document/zh-CN/components/select.md
Normal file
373
package/document/src/document/zh-CN/components/select.md
Normal file
@@ -0,0 +1,373 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 用于代替原生的选择器，或者需要一个更优雅的多选器时。支持关键词查询
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-select v-model="value">
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="2" label="编码"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
</lay-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const value = ref(null);
|
||||
return {
|
||||
value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
::: title 数据联动
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="change1">切换-当前值 : {{value2}}</lay-button>
|
||||
<br/>
|
||||
<br/>
|
||||
<lay-select v-model="value2">
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="2" label="编码"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
</lay-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const value2 = ref(null);
|
||||
var i = 1;
|
||||
function change1(){
|
||||
value2.value=i++%3+1
|
||||
}
|
||||
return {
|
||||
value2,
|
||||
change1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 选择禁用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-select v-model="selected">
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="2" label="编码" disabled></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
</lay-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const selected = ref('1')
|
||||
|
||||
return {
|
||||
selected
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 关键词变化事件，可作为远程搜索处理算法
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-select @search="search" v-model="selected">
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="2" label="编码" disabled></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
</lay-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const selected = ref('1');
|
||||
function search(txt){
|
||||
console.log('关键词:',txt)
|
||||
}
|
||||
return {
|
||||
selected,search
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 选择项自定义搜索内容，可以在keyword属性中传入拼音用于支持拼音搜索
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-select v-model="selected">
|
||||
<lay-select-option value="1" label="学习" keyword="学习xuexi"></lay-select-option>
|
||||
<lay-select-option value="2" label="编码" disabled></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
</lay-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const selected = ref('1');
|
||||
return {
|
||||
selected
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 传入items属性进行选项渲染
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-select v-model="selected" :items="items">
|
||||
</lay-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const selected = ref('1');
|
||||
const items=ref([
|
||||
{label:'选项1',value:1,keyword:'选项xuanxiang1'},
|
||||
{label:'选项2',value:2,keyword:'选项xuanxiang2'},
|
||||
{label:'选项3',value:3,keyword:'选项xuanxiang3',disabled:true},
|
||||
])
|
||||
return {
|
||||
selected,items
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
:::
|
||||
|
||||
::: title 传入create属性和接收create事件用于开启创建子项功能
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-select v-model="selected" :items="items" :create="true" @create="createEvent">
|
||||
</lay-select>
|
||||
当前元素: {{items.map(o=>o.label).join()}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const selected = ref('1');
|
||||
const items=ref([
|
||||
{label:'选项1',value:'1',keyword:'选项xuanxiang1'},
|
||||
{label:'选项2',value:2,keyword:'选项xuanxiang2'},
|
||||
{label:'选项3',value:3,keyword:'选项xuanxiang3',disabled:true},
|
||||
]);
|
||||
function createEvent(v){
|
||||
items.value.push({
|
||||
label:v,
|
||||
value:items.value.length
|
||||
})
|
||||
}
|
||||
return {
|
||||
selected,items,createEvent
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
:::
|
||||
|
||||
::: title 海量数据
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-select v-model="selected2">
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
</lay-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const selected2 = ref('1')
|
||||
|
||||
return {
|
||||
selected2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 多选使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-select v-model="mvalue" @change="change" multiple>
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="2" label="编码" disabled></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
<lay-select-option value="4" label="唱歌"></lay-select-option>
|
||||
<lay-select-option value="5" label="跳舞"></lay-select-option>
|
||||
<lay-select-option value="6" label="打篮球"></lay-select-option>
|
||||
<lay-select-option value="7" label="rap"></lay-select-option>
|
||||
</lay-select>
|
||||
<lay-button @click="mvalue=[1,5,7]">点击切换(当前值:{{mvalue.join()}})</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref,watch } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const mvalue = ref(['1','2']);
|
||||
const change = function(val){
|
||||
console.log(val, mvalue.value)
|
||||
}
|
||||
return {
|
||||
mvalue,
|
||||
change
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Select 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|
||||
| ------------ | --------------------- | ------------------------- | -------------- | -------- |
|
||||
| v-model | 选中值 | `string`/`number`/`Array` | - | - |
|
||||
| name | 原生 name 属性 | `string` | - | - |
|
||||
| placeholder | 默认空提示语 | `string` | - | `请选择` |
|
||||
| disabled | 是否禁用 | `boolean` | `true` `false` | `false` |
|
||||
| showEmpty | 是否增加空提示选项 | `boolean` | `true` `false` | `true` |
|
||||
| multiple | 是否为多选 | `boolean` | `true` `false` | `false` |
|
||||
| create | 是否允许创建 | `boolean` | `true` `false` | `false` |
|
||||
|
||||
|
||||
:::
|
||||
|
||||
::: title Select 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 接收值 |
|
||||
| ------ | ---------- | --------------- |
|
||||
| change | 切换事件 | value |
|
||||
| search | 关键词变化事件 | 用户输入的关键词 string |
|
||||
| create | 允许创建情况下的创建回调事件 | 用户输入的关键词 string |
|
||||
|
||||
:::
|
||||
|
||||
::: title Select Option 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|
||||
| ------------ | --------------------- | ------------------------- | -------------- | -------- |
|
||||
| label | 标签值(`必填`) | `string` | - | - |
|
||||
| value | 值 | `string` / `number` | - | - |
|
||||
| keyword | 用于匹配关键词的数据，传入文本+拼音可以支持拼音搜索 | `string` | - | - |
|
||||
| disabled | 是否禁用 | `boolean` | `true` `false` | `false` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Select Option 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 接收值 |
|
||||
| ------- | ----------------- | --------------- |
|
||||
| default | 默认(`label`) | - |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext select
|
||||
:::
|
||||
119
package/document/src/document/zh-CN/components/skeleton.md
Normal file
119
package/document/src/document/zh-CN/components/skeleton.md
Normal file
@@ -0,0 +1,119 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 在需要等待加载内容的位置提供一个占位图形组合。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-skeleton` 标签, 创建骨架屏
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin-bottom: 10px">
|
||||
<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
|
||||
</div>
|
||||
<lay-skeleton :rows="4" :loading="loading" animated>
|
||||
<p style="margin-bottom: 18px">1 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
|
||||
<p style="margin-bottom: 18px">2 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
|
||||
<p style="margin-bottom: 18px">3 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
|
||||
<p style="margin-bottom: 18px">4 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
|
||||
</lay-skeleton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
return {
|
||||
loading,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 图片
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin-bottom: 10px">
|
||||
<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
|
||||
</div>
|
||||
<lay-skeleton :loading="loading" animated>
|
||||
<template #skeleton>
|
||||
<lay-skeleton-item type="image"/>
|
||||
<lay-skeleton-item type="p" style="width: 240px"/>
|
||||
</template>
|
||||
<div class="img-content">
|
||||
<img src="https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png" />
|
||||
<p style="margin-top: 18px">layui-vue 发展史....</p>
|
||||
</div>
|
||||
</lay-skeleton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
return {
|
||||
loading,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.img-content {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title Skeleton 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----- | ---- | ------ |
|
||||
| loading | 是否显示 | `true` `false` |
|
||||
| rows | 显示行数 | -- |
|
||||
| animated | 是否动画 | `true` `false` |
|
||||
| type | 展示类型 | `p` `image` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Skeleton 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 可选值 |
|
||||
| ------ | -------- | ------ |
|
||||
| default| 默认插槽 | -- |
|
||||
| skeleton | 自定义插槽 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext skeleton
|
||||
:::
|
||||
123
package/document/src/document/zh-CN/components/slider.md
Normal file
123
package/document/src/document/zh-CN/components/slider.md
Normal file
@@ -0,0 +1,123 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 作为一个拖拽式的交互性组件，滑块往往能给产品带来更好的操作体验。
|
||||
:::
|
||||
|
||||
::: title 横向
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-slider` 标签, 创建滑块
|
||||
|
||||
<template>
|
||||
<lay-slider :max="88" v-model="value1" :disabled="false"></lay-slider>
|
||||
<lay-input-number v-model="value1"></lay-input-number>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const value1 = ref(50)
|
||||
return {
|
||||
value1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 纵向
|
||||
:::
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-slider v-model="value2" :vertical="true" :disabled="false"></lay-slider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const value2 = ref(10)
|
||||
|
||||
return {
|
||||
value2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 区间
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-slider :disabled="false" :min="10" :max="80" v-model:rangeValue="value3" :range="true"></lay-slider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
const value3 = ref([20,50])
|
||||
return {
|
||||
value3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: title 纵向区间
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-slider v-model:rangeValue="value4" :range="true" :vertical="true" :disabled="false"></lay-slider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
const value4 = ref([23,56])
|
||||
return {
|
||||
value4
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: title Slider 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|
||||
| ------------ | --------------------- | ------------------------- | -------------- | -------- |
|
||||
| v-model | 选中值 | `Number` | - | - |
|
||||
| vertical | 是否垂直 | `Boolean` | - | - |
|
||||
| range | 是否区间 | `Boolean` | - | - |
|
||||
| rangeValue | 区间值 | `Array` | - | - |
|
||||
| step | 步长 | `Number` | - | - |
|
||||
| min | 最小值 | `Number` | - | - |
|
||||
| max | 最大值 | `Number` | - | - |
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext slider
|
||||
:::
|
||||
122
package/document/src/document/zh-CN/components/splitPanel.md
Normal file
122
package/document/src/document/zh-CN/components/splitPanel.md
Normal file
@@ -0,0 +1,122 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 更灵活的布局方案。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-split-panel style="height: 300px">
|
||||
<lay-split-panel-item>A</lay-split-panel-item>
|
||||
<lay-split-panel-item>B</lay-split-panel-item>
|
||||
<lay-split-panel-item>C</lay-split-panel-item>
|
||||
</lay-split-panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 自定义比例
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-split-panel style="height: 300px">
|
||||
<lay-split-panel-item :space="30">1</lay-split-panel-item>
|
||||
<lay-split-panel-item :space="20">2</lay-split-panel-item>
|
||||
<lay-split-panel-item :space="50">3</lay-split-panel-item>
|
||||
</lay-split-panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 垂直布局
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-split-panel :vertical="true" style="height: 600px; width: 100%">
|
||||
<lay-split-panel-item>1</lay-split-panel-item>
|
||||
<lay-split-panel-item>2</lay-split-panel-item>
|
||||
<lay-split-panel-item>3</lay-split-panel-item>
|
||||
</lay-split-panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 组合用法
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-split-panel style="height: 600px;">
|
||||
<lay-split-panel-item :space="60">
|
||||
<lay-split-panel :vertical="true" style="height: 600px; width: 100%">
|
||||
<lay-split-panel-item :space="40">1</lay-split-panel-item>
|
||||
<lay-split-panel-item :space="40">2</lay-split-panel-item>
|
||||
</lay-split-panel>
|
||||
</lay-split-panel-item>
|
||||
<lay-split-panel-item :space="40">2</lay-split-panel-item>
|
||||
</lay-split-panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title splitPanel属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 |可选值 | 默认值|
|
||||
| ----- | ---- | ------ | ---| ---|
|
||||
| vertical | 是否垂直布局 | Boolean |`true` `false`| false |
|
||||
| minSize | 块拉动最小范围(按像素 `px`) | number | - | 50 |
|
||||
:::
|
||||
|
||||
::: title splitPanelItem属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 |可选值 | 默认值|
|
||||
| ----- | ---- | ------ | ---| ---|
|
||||
| space | 默认每个站多大比例（`%`）, 设置一个，<br/> 其他的都需要设置，合计为（`100` ） | number | - | 按照个数平分 |
|
||||
:::
|
||||
|
||||
|
||||
|
||||
|
||||
::: previousNext splitPanel
|
||||
:::
|
||||
474
package/document/src/document/zh-CN/components/step.md
Normal file
474
package/document/src/document/zh-CN/components/step.md
Normal file
@@ -0,0 +1,474 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-step :active="active">
|
||||
<lay-step-item></lay-step-item>
|
||||
<lay-step-item></lay-step-item>
|
||||
<lay-step-item></lay-step-item>
|
||||
<lay-step-item></lay-step-item>
|
||||
</lay-step>
|
||||
<div style="margin-top: 10px">
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
<lay-button size="xs" @click="nexts">下一步</lay-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(-1);
|
||||
const nexts = () => {
|
||||
if (active.value++ >=3) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title composition 为row 的排版
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-step :active="active" composition="row">
|
||||
<lay-step-item title="First" content="First step"></lay-step-item>
|
||||
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||
<lay-step-item title="Fourth" content="Fourth step"></lay-step-item>
|
||||
</lay-step>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(-1);
|
||||
const nexts = () => {
|
||||
if (active.value++ >=3) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 带标题带描述
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-step :active="active">
|
||||
<lay-step-item title="First" content="First step"></lay-step-item>
|
||||
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||
<lay-step-item title="Fourth" content="Fourth step"></lay-step-item>
|
||||
</lay-step>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(-1);
|
||||
const nexts = () => {
|
||||
if (active.value++ >=3) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 设置当前选中状态
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-step :active="active" current-status="primary">
|
||||
<lay-step-item title="First" content="First step"></lay-step-item>
|
||||
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||
</lay-step>
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(-1);
|
||||
const next = () => {
|
||||
if (active.value++ >=2) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 设置第几步状态
|
||||
:::
|
||||
|
||||
这里设置`status` 会覆盖掉`current-status`
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-step :active="active" current-status="warning">
|
||||
<lay-step-item title="First" content="First step"></lay-step-item>
|
||||
<lay-step-item status="fail" title="Second" content="Second step"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||
<lay-step-item title="Fourth" content="Fourth step"></lay-step-item>
|
||||
</lay-step>
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
<lay-button size="xs" @click="nexts">下一步</lay-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(-1);
|
||||
const nexts = () => {
|
||||
if (active.value++ >=3) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 自定义宽度
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-step :active="active" space="200px">
|
||||
<lay-step-item title="First" content="First step"></lay-step-item>
|
||||
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||
</lay-step>
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(-1);
|
||||
const next = () => {
|
||||
if (active.value++ >=2) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 自定义图标
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-step :active="active">
|
||||
<lay-step-item title="First" content="First step" icon="layui-icon-release"></lay-step-item>
|
||||
<lay-step-item title="Second" content="Second step" icon="layui-icon-tree"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step" icon="layui-icon-share"></lay-step-item>
|
||||
</lay-step>
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(-1);
|
||||
const next = () => {
|
||||
if (active.value++ >=2) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 居中
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-step :active="active" center>
|
||||
<lay-step-item title="First" content="First step">
|
||||
<template #pace>
|
||||
<lay-icon type="layui-icon-ok"></lay-icon>
|
||||
</template>
|
||||
</lay-step-item>
|
||||
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||
</lay-step>
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(-1);
|
||||
const next = () => {
|
||||
if (active.value++ >=2) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 垂直
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div style="height: 300px">
|
||||
<lay-step :active="active" direction="vertical">
|
||||
<lay-step-item title="First" content="First step">
|
||||
<template #pace>
|
||||
<lay-icon type="layui-icon-ok"></lay-icon>
|
||||
</template>
|
||||
</lay-step-item>
|
||||
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||
</lay-step>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(-1);
|
||||
const next = () => {
|
||||
if (active.value++ >=2) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 简洁版
|
||||
:::
|
||||
|
||||
简洁版不支持`垂直``横向``描述``排版`
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-step :active="active" simple @onChange="onChange">
|
||||
<lay-step-item title="First"></lay-step-item>
|
||||
<lay-step-item title="Second"></lay-step-item>
|
||||
<lay-step-item title="Third"></lay-step-item>
|
||||
</lay-step>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(0);
|
||||
const next = () => {
|
||||
if (active.value++ >=2) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
|
||||
const onChange = (index) => {
|
||||
active.value = index
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Step 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 |可选值 | 默认值|
|
||||
| ----- | ---- | ------ | ---| ---|
|
||||
| active | 第几步 | number |-| 0 |
|
||||
| center | 居中布局 | boolean | `true` `false` | `false` |
|
||||
| direction | 垂直/平行布局 | string |`horizontal` `vertical` | `horizontal` |
|
||||
| space | 宽度 | string | - | `auto` |
|
||||
| currentStatus | 当前状态显示 | string | `primary` `success` `fail` `warning` | `success` |
|
||||
| composition | 排版 | string | `default` `row` | `default` |
|
||||
| simple | 简洁版 | boolean | `true` `false` |`false`|
|
||||
| onChange | 点击切换时监听 | function | - |function(index){}|
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title Step Item 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 |可选值 | 默认值|
|
||||
| ----- | ---- | ------ | ---| ---|
|
||||
| title| 标题 | string | - | - |
|
||||
| content | 内容描述 | string | - | -|
|
||||
| icon | 图标 | string | - | -|
|
||||
| status | 状态 | string | `primary` `success` `fail` `warning` | `primary`|
|
||||
|
||||
|
||||
:::
|
||||
|
||||
::: title Step Item 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 |
|
||||
| ----- | ---- |
|
||||
| pace | 圆圈内容自定义 |
|
||||
| default | 内容区域自定义 |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext step
|
||||
:::
|
||||
216
package/document/src/document/zh-CN/components/switch.md
Normal file
216
package/document/src/document/zh-CN/components/switch.md
Normal file
@@ -0,0 +1,216 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 开关选择器, 需要表示开关状态/两种状态之间的切换时。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-switch` 标签, 创建开关
|
||||
|
||||
<template>
|
||||
<lay-switch v-model="active1"></lay-switch>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const active1 = ref(false);
|
||||
|
||||
return {
|
||||
active1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 事件回调
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-switch v-model="active2" @change="change"></lay-switch>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const active2 = ref(true);
|
||||
|
||||
const change = function( val ) {
|
||||
console.log("当前值:" + val)
|
||||
}
|
||||
|
||||
return {
|
||||
active2,
|
||||
change
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 禁用状态
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-switch v-model="active3" :disabled="disabled"></lay-switch>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const active3 = ref(true);
|
||||
const disabled = ref(true)
|
||||
|
||||
return {
|
||||
active3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 修改描述
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-switch v-model="active4" active-text="白天" inactive-text="夜间"></lay-switch>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const active4 = ref(true)
|
||||
|
||||
return {
|
||||
active4
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 图标插槽
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-switch v-model="active5">
|
||||
<template #onswitch-icon>😄</template>
|
||||
<template #unswitch-icon>🤔</template>
|
||||
</lay-switch>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const active5 = ref(true)
|
||||
|
||||
return {
|
||||
active5
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 自定义值
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-switch v-model="active6" onswitch-value="dark" unswitch-value="light"></lay-switch>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const active6 = ref('dark')
|
||||
|
||||
return {
|
||||
active6
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Switch 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ------------- | -------------- | -------------- |
|
||||
| name | 原生 name 属性 | -- |
|
||||
| v-model | 是否启用 | `true` `false` |
|
||||
| disabled | 禁用 | `true` `false` |
|
||||
| onswitch-text | 启用描述 | `启动` |
|
||||
| unswitch-text | 禁用描述 | `禁用` |
|
||||
| onswitch-value | 启用值 | `true` |
|
||||
| unswitch-value | 禁用值 | `false` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Switch 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ------ | -------- | ---------------- |
|
||||
| change | 切换事件 | current : 当前值 |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title Switch 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 参数 |
|
||||
| ------ | -------- | ---------------- |
|
||||
| onswitch-icon | 启用图标 | -- |
|
||||
| unswitch-icon | 禁用图标 | -- |
|
||||
:::
|
||||
|
||||
::: previousNext switch
|
||||
:::
|
||||
317
package/document/src/document/zh-CN/components/tab.md
Normal file
317
package/document/src/document/zh-CN/components/tab.md
Normal file
@@ -0,0 +1,317 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-tab v-model="current1">
|
||||
<lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
|
||||
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
|
||||
</lay-tab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const current1 = ref("1")
|
||||
|
||||
return {
|
||||
current1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 简约模式
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-tab type="brief" v-model="current2">
|
||||
<lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
|
||||
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
|
||||
</lay-tab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const current2 = ref("1")
|
||||
|
||||
return {
|
||||
current2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 卡片模式
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-tab type="card" v-model="current3">
|
||||
<lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
|
||||
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
|
||||
</lay-tab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const current3 = ref("1")
|
||||
|
||||
return {
|
||||
current3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 允许关闭
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-tab type="card" v-model="current4" :allow-close="allowClose" @change="change" @close="close">
|
||||
<lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
|
||||
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
|
||||
<lay-tab-item title="选项三" id="3"><div style="padding:20px">选项三</div></lay-tab-item>
|
||||
</lay-tab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const current4 = ref("1")
|
||||
const allowClose = ref(true)
|
||||
|
||||
const change = function(id){
|
||||
console.log("当前值:" +id)
|
||||
}
|
||||
|
||||
const close = function(id){
|
||||
console.log("当前关闭:" + id)
|
||||
}
|
||||
|
||||
return {
|
||||
current4,
|
||||
allowClose,
|
||||
change,
|
||||
close
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 关闭前置
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-tab type="card" v-model="current5" allow-close @change="change5" @close="close5" :beforeClose="beforeClose">
|
||||
<lay-tab-item title="选项一" id="1" closable="true"><div style="padding:20px">选项一</div></lay-tab-item>
|
||||
<lay-tab-item title="选项二" id="2" closable="false"><div style="padding:20px">选项二</div></lay-tab-item>
|
||||
<lay-tab-item title="选项三" id="3"><div style="padding:20px">选项三</div></lay-tab-item>
|
||||
<lay-tab-item title="选项四" id="4"><div style="padding:20px">选项四</div></lay-tab-item>
|
||||
<lay-tab-item title="选项五" id="5"><div style="padding:20px">选项五</div></lay-tab-item>
|
||||
</lay-tab>
|
||||
<div style="color:#ff5722;">id为单数的可以关闭</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const current5 = ref("1")
|
||||
|
||||
const change5 = function(id){
|
||||
console.log("当前值:" +id)
|
||||
}
|
||||
|
||||
const beforeClose = function(id){
|
||||
return parseInt(id) % 2 === 1;
|
||||
}
|
||||
|
||||
const close5 = function(id){
|
||||
console.log("当前关闭:" + id)
|
||||
}
|
||||
|
||||
return {
|
||||
current5,
|
||||
change5,
|
||||
beforeClose,
|
||||
close5
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 嵌套循环
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-tab type="card" allow-close v-model="current6" @change="change6">
|
||||
<lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id" :closable="a.closable">
|
||||
内容{{a.id}}
|
||||
</lay-tab-item>
|
||||
</lay-tab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const current6 = ref('1')
|
||||
const change6 = function(id){
|
||||
alert(id)
|
||||
}
|
||||
|
||||
const arr = ref([
|
||||
{id:'1', title:'选项一', closable: false},
|
||||
{id:'2', title:'选项二'},
|
||||
{id:'3', title:'选项三'}
|
||||
])
|
||||
|
||||
return {
|
||||
current6,
|
||||
arr
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 位置设置
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button-group>
|
||||
<lay-button type="default" size="sm" @click = "tabPosition = 'left'">left</lay-button>
|
||||
<lay-button type="default" size="sm" @click = "tabPosition = 'right'">right</lay-button>
|
||||
<lay-button type="default" size="sm" @click = "tabPosition = 'top'">top</lay-button>
|
||||
<lay-button type="default" size="sm" @click = "tabPosition = 'bottom'">bottom</lay-button>
|
||||
</lay-button-group>
|
||||
<lay-button-group>
|
||||
<lay-button type="default" size="sm" @click = "tabType = ''">默认</lay-button>
|
||||
<lay-button type="default" size="sm" @click = "tabType = 'brief'">简约</lay-button>
|
||||
<lay-button type="default" size="sm" @click = "tabType = 'card'">卡片</lay-button>
|
||||
</lay-button-group>
|
||||
<lay-tab :type="tabType" v-model="current7" :tabPosition = "tabPosition">
|
||||
<lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
|
||||
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
|
||||
<lay-tab-item title="选项三" id="3"><div style="padding:20px">选项三</div></lay-tab-item>
|
||||
<lay-tab-item title="选项四" id="4"><div style="padding:20px">选项四</div></lay-tab-item>
|
||||
</lay-tab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const current7 = ref("1");
|
||||
const tabPosition = ref("left");
|
||||
const tabType = ref("brief");
|
||||
|
||||
return {
|
||||
current2,
|
||||
tabPosition,
|
||||
tabType
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Tab 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ------------ | ------------------------------------ | ----------------------------------------- |
|
||||
| v-model | 当前激活 | -- |
|
||||
| type | 主题样式 | -- |
|
||||
| tabPosition | 位置 | `top` `bottom` `left` `right` |
|
||||
| allow-close | 允许关闭 | `true` `false` |
|
||||
| before-close | `Function`关闭之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行关闭 |
|
||||
| before-leave | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换 |
|
||||
|
||||
:::
|
||||
|
||||
::: title Tab 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ------ | -------- | ---- |
|
||||
| change | 选中切换 | id |
|
||||
| close | 关闭事件 | id |
|
||||
|
||||
:::
|
||||
|
||||
::: title Tab Item 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| -------- | -------- | ------ |
|
||||
| id | 唯一标识 | -- |
|
||||
| title | 头部标题 | -- |
|
||||
| closable | 允许关闭 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext tab
|
||||
:::
|
||||
396
package/document/src/document/zh-CN/components/table.md
Normal file
396
package/document/src/document/zh-CN/components/table.md
Normal file
@@ -0,0 +1,396 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 展示行列数据。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-table` 标签, 创建表格
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns" :dataSource="dataSource">
|
||||
<template v-slot:username="{ data }"> {{data.username}} </template>
|
||||
<template v-slot:password="{ data }"> {{data.password}} </template>
|
||||
<template v-slot:operator="{ data }">
|
||||
<lay-button >修改</lay-button>
|
||||
<lay-button type="primary">删除</lay-button>
|
||||
</template>
|
||||
</lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title:"账户",
|
||||
width:"200px",
|
||||
slot:"username",
|
||||
key:"username"
|
||||
},{
|
||||
title:"密码",
|
||||
width: "180px",
|
||||
slot:"password",
|
||||
key:"password"
|
||||
},{
|
||||
title:"年龄",
|
||||
width: "180px",
|
||||
key:"age"
|
||||
},{
|
||||
title:"操作",
|
||||
width: "180px",
|
||||
customSlot:"operator",
|
||||
key:"operator"
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource = [
|
||||
{username:"root", password:"root", age:"18"},
|
||||
{username:"woow", password:"woow", age:"20"}
|
||||
]
|
||||
|
||||
return {
|
||||
columns,
|
||||
dataSource
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 不同尺寸
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns" :dataSource="dataSource" size="lg">
|
||||
<template v-slot:username="{ data }"> {{data.username}} </template>
|
||||
<template v-slot:password="{ data }"> {{data.password}} </template>
|
||||
<template v-slot:operator="{ data }">
|
||||
<lay-button >修改</lay-button>
|
||||
<lay-button type="primary">删除</lay-button>
|
||||
</template>
|
||||
</lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title:"账户",
|
||||
width:"200px",
|
||||
slot:"username",
|
||||
key:"username"
|
||||
},{
|
||||
title:"密码",
|
||||
width: "180px",
|
||||
slot:"password",
|
||||
key:"password"
|
||||
},{
|
||||
title:"年龄",
|
||||
width: "180px",
|
||||
key:"age"
|
||||
},{
|
||||
title:"操作",
|
||||
width: "180px",
|
||||
customSlot:"operator",
|
||||
key:"operator"
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource = [
|
||||
{username:"root", password:"root", age:"18"},
|
||||
{username:"woow", password:"woow", age:"20"}
|
||||
]
|
||||
|
||||
return {
|
||||
columns,
|
||||
dataSource
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 开启分页
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns" :dataSource="dataSource" :page="page" @change="change">
|
||||
<template v-slot:username="{ data }"> {{data.username}} </template>
|
||||
<template v-slot:password="{ data }"> {{data.password}} </template>
|
||||
<template v-slot:operator="{ data }">
|
||||
<lay-button >修改</lay-button>
|
||||
<lay-button type="primary">删除</lay-button>
|
||||
</template>
|
||||
</lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const page = {
|
||||
total: 100,
|
||||
limit: 10,
|
||||
current: 2
|
||||
}
|
||||
|
||||
const change = function({ current }){
|
||||
console.log("当前页:" + JSON.stringify(current))
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title:"账户",
|
||||
width:"200px",
|
||||
slot:"username",
|
||||
key:"username"
|
||||
},{
|
||||
title:"密码",
|
||||
width: "180px",
|
||||
slot:"password",
|
||||
key:"password"
|
||||
},{
|
||||
title:"年龄",
|
||||
width: "180px",
|
||||
key:"age"
|
||||
},{
|
||||
title:"操作",
|
||||
width: "180px",
|
||||
customSlot:"operator",
|
||||
key:"operator"
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource = [
|
||||
{username:"root", password:"root", age:"18"},
|
||||
{username:"woow", password:"woow", age:"20"}
|
||||
]
|
||||
|
||||
return {
|
||||
page,
|
||||
change,
|
||||
columns,
|
||||
dataSource
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title 开启排序
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns1" :dataSource="dataSource1"></lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const columns1 = [
|
||||
{
|
||||
title:"姓名",
|
||||
width:"200px",
|
||||
key:"name"
|
||||
},{
|
||||
title:"成绩",
|
||||
width: "180px",
|
||||
key:"score",
|
||||
sort: true
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource1 = [
|
||||
{name:"张三", score:100},
|
||||
{name:"李四", score:80},
|
||||
{name:"王二", score:99},
|
||||
{name:"麻子", score:92},
|
||||
{name:"无名", score:60},
|
||||
{name:"有名", score:70},
|
||||
]
|
||||
|
||||
return {
|
||||
page,
|
||||
change,
|
||||
columns,
|
||||
dataSource
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 完整表格
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns" id="id" :dataSource="dataSource" v-model:selectedKeys="selectedKeys" :checkbox="checkbox" :default-toolbar="defaultToolbar" @row="rowClick">
|
||||
<template v-slot:toolbar>
|
||||
<lay-button size="sm">新增</lay-button>
|
||||
<lay-button size="sm">删除</lay-button>
|
||||
</template>
|
||||
<template v-slot:username="{ data }"> {{data.username}} </template>
|
||||
<template v-slot:username-title>😊</template>
|
||||
<template v-slot:password="{ data }"> {{data.password}} </template>
|
||||
<template v-slot:operator="{ data }">
|
||||
<lay-button >修改</lay-button>
|
||||
<lay-button type="primary">删除</lay-button>
|
||||
</template>
|
||||
</lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const selectedKeys = ref(['1'])
|
||||
const checkbox = ref(true)
|
||||
const defaultToolbar = ref(true)
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title:"账户",
|
||||
width:"200px",
|
||||
titleSlot: "username-title",
|
||||
customSlot:"username",
|
||||
key:"username"
|
||||
},{
|
||||
title:"密码",
|
||||
width: "180px",
|
||||
customSlot:"password",
|
||||
key:"password"
|
||||
},{
|
||||
title:"年龄",
|
||||
width: "180px",
|
||||
key:"age",
|
||||
sort: true
|
||||
},{
|
||||
title:"操作",
|
||||
width: "180px",
|
||||
customSlot:"operator",
|
||||
key:"operator"
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource = [
|
||||
{id:"1", username:"root", password:"root", age:"18"},
|
||||
{id:"2", username:"woow", password:"woow", age:"20"}
|
||||
]
|
||||
|
||||
const rowClick = function(data) {
|
||||
console.log(JSON.stringify(data))
|
||||
}
|
||||
|
||||
const rowDoubleClick = function(data) {
|
||||
console.log(JSON.stringify(data))
|
||||
}
|
||||
|
||||
return {
|
||||
columns,
|
||||
dataSource,
|
||||
selectedKeys,
|
||||
checkbox,
|
||||
defaultToolbar,
|
||||
rowClick,
|
||||
rowDoubleClick
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Table 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| -------------------- | ----------------------------- | ---- | ------ | -------------- |
|
||||
| columns | 列配置 - [更多](#tableColumn) | -- | -- | -- |
|
||||
| dataSource | 数据源 | -- | -- | -- |
|
||||
| checkbox | 开启复选框 | -- | -- | -- |
|
||||
| id | 主键 | -- | -- | -- |
|
||||
| v-model:selectedKeys | 选中项 | -- | -- | -- |
|
||||
| default-toolbar | 工具栏 | -- | -- | -- |
|
||||
| size | 尺寸 | -- | -- | `lg` `md` `sm` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Table 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 参数 |
|
||||
| ---------- | ------ | ------------- |
|
||||
| row | 行单击 | data : 当前行 |
|
||||
| row-double | 行双击 | data : 当前行 |
|
||||
|
||||
:::
|
||||
|
||||
::: title Table 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 参数 |
|
||||
| ------- | ------------ | ---- |
|
||||
| toolbar | 自定义工具栏 | -- |
|
||||
|
||||
:::
|
||||
|
||||
### <div id="tableColumn"></div>
|
||||
|
||||
::: title Table 数据
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 默认 |
|
||||
| ---------- | ---------- | ---- |
|
||||
| title | 列标题 | -- |
|
||||
| key | 数据字段 | -- |
|
||||
| customSlot | 自定义插槽 | -- |
|
||||
| width | 宽度 | -- |
|
||||
| sort | 排序 | -- |
|
||||
| titleSlot | 标题插槽 | -- |
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext table
|
||||
:::
|
||||
124
package/document/src/document/zh-CN/components/textarea.md
Normal file
124
package/document/src/document/zh-CN/components/textarea.md
Normal file
@@ -0,0 +1,124 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 当需要录入大量的文本文字。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-textarea` 标签, 创建文本域
|
||||
|
||||
<template>
|
||||
<lay-textarea placeholder="请输入描述" v-model="data1"></lay-textarea>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const data1 = ref("");
|
||||
|
||||
return {
|
||||
data1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 事件回调
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-textarea placeholder="Input 事件" v-model="data2" @input="input"></lay-textarea>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const data2 = ref("");
|
||||
|
||||
const input = function( val ) {
|
||||
console.log(val)
|
||||
}
|
||||
|
||||
return {
|
||||
data2,
|
||||
input
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 禁止输入
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-textarea placeholder="禁止输入" v-model="data3" :disabled="disabled"></lay-textarea>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const data3 = ref("");
|
||||
const disabled = ref(true)
|
||||
return {
|
||||
data3,
|
||||
disabled
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Textarea 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----------- | ------------- | -------------- |
|
||||
| name | 原始属性 name | -- |
|
||||
| placeholder | 提示信息 | -- |
|
||||
| disabled | 禁用 | `true` `false` |
|
||||
| v-model | 值 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Textarea 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 可选值 |
|
||||
| ----- | --------------- | ---------------- |
|
||||
| input | 原生 input 事件 | event : 事件对象 |
|
||||
| foucs | 原生 foucs 事件 | event : 事件对象 |
|
||||
| blur | 原生 blur 事件 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext textarea
|
||||
:::
|
||||
181
package/document/src/document/zh-CN/components/timeline.md
Normal file
181
package/document/src/document/zh-CN/components/timeline.md
Normal file
@@ -0,0 +1,181 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 将时间抽象到二维平面，垂直呈现一段从过去到现在的故事。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="8月18日">
|
||||
<p>
|
||||
layui vue 的一切准备工作似乎都已到位。发布之弦，一触即发。
|
||||
<br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
|
||||
<br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
|
||||
</p>
|
||||
</lay-timeline-item>
|
||||
<lay-timeline-item title="8月16日">
|
||||
<p>杜甫的思想核心是儒家的仁政思想，他有<em>“致君尧舜上，再使风俗淳”</em>的宏伟抱负。</p>
|
||||
<ul>
|
||||
<li>《登高》</li>
|
||||
<li>《茅屋为秋风所破歌》</li>
|
||||
</ul>
|
||||
</lay-timeline-item>
|
||||
<lay-timeline-item title="8月15日">
|
||||
<p>
|
||||
中国人民抗日战争胜利日
|
||||
<br>铭记、感恩
|
||||
<br>所有为中华民族浴血奋战的英雄将士
|
||||
<br>永垂不朽
|
||||
</p>
|
||||
</lay-timeline-item>
|
||||
</lay-timeline>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 简单模式
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="2021年，layui vue 里程碑版本 1.0 发布" simple></lay-timeline-item>
|
||||
<lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
|
||||
<lay-timeline-item title="2016年，layui 首个版本发布" simple></lay-timeline-item>
|
||||
<lay-timeline-item title="2015年，layui 孵化" simple></lay-timeline-item>
|
||||
</lay-timeline>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title 节点插槽
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="2021年，layui vue 里程碑版本 1.0 发布" simple></lay-timeline-item>
|
||||
<lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
|
||||
<lay-timeline-item title="2016年，layui 首个版本发布" simple></lay-timeline-item>
|
||||
<lay-timeline-item title="2015年，layui 孵化" simple>
|
||||
<template #dot>
|
||||
<lay-icon type="layui-icon-face-smile" color="red"></lay-icon>
|
||||
</template>
|
||||
</lay-timeline-item>
|
||||
</lay-timeline>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: title 水平方向
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-timeline direction="horizontal">
|
||||
<lay-timeline-item title="2015年" >2015年，layui 孵化</lay-timeline-item>
|
||||
<lay-timeline-item title="2016年" >2016年，layui 首个版本发布</lay-timeline-item>
|
||||
<lay-timeline-item title="2017年" >layui里程碑版本1.0发布</lay-timeline-item>
|
||||
<lay-timeline-item title="2021年" >layui里程碑版本2.0发布</lay-timeline-item>
|
||||
</lay-timeline>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Timeline 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
|-----------|------|-----|
|
||||
| direction | 排列方向 | `horizontal` `vertical` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Timeline Item 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
|--------|------|-----|
|
||||
| simple | 简单模式 | -- |
|
||||
| title | 标题 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Timeline Item 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽名 | 描述 | |
|
||||
|-----|-----| --- |
|
||||
| dot | 节点 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext timeline
|
||||
:::
|
||||
134
package/document/src/document/zh-CN/components/tooltip.md
Normal file
134
package/document/src/document/zh-CN/components/tooltip.md
Normal file
@@ -0,0 +1,134 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-tooltip content="假装这里有文字提示">
|
||||
<lay-button>tooltip</lay-button>
|
||||
</lay-tooltip>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
:::
|
||||
|
||||
::: title 显示位置
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div style="padding: 100px;max-width:400px;">
|
||||
<div style="text-align: center;">
|
||||
<lay-tooltip content="假装这里有文字提示">
|
||||
<lay-button>上边</lay-button>
|
||||
</lay-tooltip>
|
||||
</div>
|
||||
<div>
|
||||
<lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="left">
|
||||
<lay-button style="float:left;">左边</lay-button>
|
||||
</lay-tooltip>
|
||||
<lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="right">
|
||||
<lay-button style="float:right;">右边</lay-button>
|
||||
</lay-tooltip>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="bottom">
|
||||
<lay-button>下边</lay-button>
|
||||
</lay-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
:::
|
||||
|
||||
::: title 浅色主题
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-tooltip content="不明白是是非非，只知我不会不在。" :is-dark="false">
|
||||
<lay-button >tooltip</lay-button>
|
||||
</lay-tooltip>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: title 是否禁用/动态属性
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-tooltip :content="content" :is-dark="isDark" :disabled="!disabled">
|
||||
<lay-button>tooltip</lay-button>
|
||||
</lay-tooltip>
|
||||
<lay-switch v-model="disabled" active-text="启用tooltip" inactive-text="禁用tooltip" style="margin-left: 5px;"></lay-switch>
|
||||
<lay-switch v-model="isDark" active-text="深色" inactive-text="浅色" style="margin-left: 5px;"></lay-switch>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const contentArr = [
|
||||
"不明白是是非非，只知我不会不在。",
|
||||
"千山万水，去程是你，归程也是你。",
|
||||
"一约既定，万山无阻。",
|
||||
"时光都淡了，我还伴着你。",
|
||||
"只问深情，不问西东。",
|
||||
"感谢曾经在我身边的，一直在我身边。",
|
||||
"经年再相逢，魂梦与子同。"
|
||||
];
|
||||
const rendonCotent = function(){
|
||||
return contentArr[Math.floor(Math.random() * contentArr.length)];
|
||||
};
|
||||
|
||||
const content = ref(rendonCotent())
|
||||
const isDark = ref(false)
|
||||
const disabled = ref(true)
|
||||
|
||||
setInterval(()=> content.value = rendonCotent(), 1000)
|
||||
return {
|
||||
content,
|
||||
isDark,
|
||||
disabled
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
:::
|
||||
|
||||
::: title Tooltip 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----------- | -------- | -------------- |
|
||||
| content | 显示内容 | -- |
|
||||
| position | 显示位置 | `top`(默认值)、`bottom`、`left`、`right` |
|
||||
| isDark | 是否为黑色主题 | `true`(默认值)、`false`(浅色) |
|
||||
| disabled | 是否禁用 | `false`(默认值)、`true`(禁用) ||
|
||||
| isCanHide | 控制是否可以隐藏,可参考`lay-slider`组件 | `true`(默认值)、`false` ||
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext tooltip
|
||||
:::
|
||||
191
package/document/src/document/zh-CN/components/transfer.md
Normal file
191
package/document/src/document/zh-CN/components/transfer.md
Normal file
@@ -0,0 +1,191 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: describe 常用于行数据的交互筛选，在浩瀚的业务需求中，值得一用。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-transfer` 标签, 创建穿梭框
|
||||
|
||||
<template>
|
||||
<lay-transfer :dataSource="dataSource1"></lay-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const dataSource1 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
|
||||
|
||||
return {
|
||||
dataSource1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 指定标题
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-transfer :dataSource="dataSource2" :title="title"></lay-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const dataSource2 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
|
||||
const title = ['我喜欢的','我不喜欢的']
|
||||
|
||||
return {
|
||||
dataSource2,
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 使用插槽
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-transfer :dataSource="dataSource3">
|
||||
<template v-slot:item="{ data }">
|
||||
{{data.id}}
|
||||
</template>
|
||||
</lay-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const dataSource3 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
|
||||
|
||||
return {
|
||||
dataSource3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title 开启搜索
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-transfer :dataSource="dataSource5" showSearch="true"></lay-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const dataSource5 = [
|
||||
{id:'1', title:'无影剑'},
|
||||
{id:'2', title:'逸龙剑'},
|
||||
{id:'3', title:'精灵之语'},
|
||||
{id:'4', title:'十字斩刀-斗'},
|
||||
{id:'5', title:'落炎魔杖'},
|
||||
{id:'6', title:'石中剑'},
|
||||
{id:'7', title:'屠戮之刃'}
|
||||
]
|
||||
|
||||
return {
|
||||
dataSource5
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 海量数据
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-transfer :dataSource="dataSource4"></lay-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const dataSource4 = [
|
||||
{id:'1', title:'无影剑'},
|
||||
{id:'2', title:'逸龙剑'},
|
||||
{id:'3', title:'精灵之语'},
|
||||
{id:'4', title:'十字斩刀-斗'},
|
||||
{id:'5', title:'落炎魔杖'},
|
||||
{id:'6', title:'石中剑'},
|
||||
{id:'7', title:'屠戮之刃'}
|
||||
]
|
||||
|
||||
return {
|
||||
dataSource4
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Transfer 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| Name | Description | Accepted Values |
|
||||
| ---------- | ----------- | --------------- |
|
||||
| dataSource | 数据来源 | -- |
|
||||
| title | 标题 | -- |
|
||||
| id | 主键 | -- |
|
||||
| showSearch | 开启搜索 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Transfer 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| Name | Description | Accepted Values |
|
||||
| ---- | ----------- | --------------- |
|
||||
| item | 列表项 | { data } |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext transfer
|
||||
:::
|
||||
101
package/document/src/document/zh-CN/components/transition.md
Normal file
101
package/document/src/document/zh-CN/components/transition.md
Normal file
@@ -0,0 +1,101 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 过渡效果的使用将大幅提升用户的使用体验。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-transition` 标签, 为元素提供过渡动画
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible">开始</lay-button>
|
||||
<br/>
|
||||
<br/>
|
||||
<lay-transition>
|
||||
<lay-card title="标题" v-if="visible">内容</lay-card>
|
||||
</lay-transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const visible = ref(true);
|
||||
|
||||
const changeVisible = () => {
|
||||
visible.value = !visible.value;
|
||||
}
|
||||
|
||||
return {
|
||||
changeVisible
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 淡入淡出
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-transition` 标签, 为元素提供过渡动画
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible1">开始</lay-button>
|
||||
<br/>
|
||||
<br/>
|
||||
<lay-transition type="fade">
|
||||
<lay-card title="标题" v-if="visible1">内容</lay-card>
|
||||
</lay-transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const visible1 = ref(true);
|
||||
|
||||
const changeVisible1 = () => {
|
||||
visible1.value = !visible1.value;
|
||||
}
|
||||
|
||||
return {
|
||||
changeVisible1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Transition 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 |默认值 | 可选值 |
|
||||
| ------------ | ---------------- | ------------- | ---- | ---- |
|
||||
| enable | 启用 | `boolean` | `true` | `true` `false` |
|
||||
| type | 类型 | `string` | `collapse` | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Transition 属性值
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性值 | 描述 |
|
||||
| ------------ | ---------------- |
|
||||
| collapse | 折叠动画 |
|
||||
| fade | 淡入淡出 |
|
||||
:::
|
||||
274
package/document/src/document/zh-CN/components/tree.md
Normal file
274
package/document/src/document/zh-CN/components/tree.md
Normal file
@@ -0,0 +1,274 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 树形组件一般用于展示具有层级关系的数据
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-tree` 标签, 创建树形组件
|
||||
|
||||
<template>
|
||||
<lay-tree
|
||||
:data="data"
|
||||
:onlyIconControl="iconCtrl"
|
||||
:showLine="showLine"
|
||||
:showCheckbox="showCheckbox"
|
||||
collapseTransition
|
||||
v-model:checkedKeys="checkedKeys"
|
||||
@node-click="handleClick"
|
||||
:disabled="disabled"
|
||||
>
|
||||
</lay-tree>
|
||||
<br/>
|
||||
是否可开启选择框：
|
||||
<br/>
|
||||
<lay-switch v-model="showCheckbox"></lay-switch>
|
||||
<br/>
|
||||
checkedKeys：
|
||||
<pre>
|
||||
{{ checkedKeys }}
|
||||
</pre>
|
||||
只能通过节点左侧图标来展开收缩：
|
||||
<br/>
|
||||
<lay-switch v-model="iconCtrl"></lay-switch>
|
||||
<br/>
|
||||
是否开启连接线：
|
||||
<br/>
|
||||
<lay-switch v-model="showLine"></lay-switch>
|
||||
<br/>
|
||||
当前点击的节点：
|
||||
<br/>
|
||||
<pre>
|
||||
{{ clickNode }}
|
||||
</pre>
|
||||
<br/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const data = ref([{
|
||||
title: '一级1',
|
||||
id: 1,
|
||||
field: 'name1',
|
||||
checked: true,
|
||||
spread: true,
|
||||
children: [{
|
||||
title: '二级1-1 可允许跳转',
|
||||
id: 3,
|
||||
field: 'name11',
|
||||
href: 'https://www.layui.com/',
|
||||
children: [{
|
||||
title: '三级1-1-3',
|
||||
id: 23,
|
||||
field: '',
|
||||
children: [{
|
||||
title: '四级1-1-3-1',
|
||||
id: 24,
|
||||
field: '',
|
||||
children: [{
|
||||
title: '五级1-1-3-1-1',
|
||||
id: 30,
|
||||
field: ''
|
||||
},
|
||||
{
|
||||
title: '五级1-1-3-1-2',
|
||||
id: 31,
|
||||
field: ''
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '三级1-1-1',
|
||||
id: 7,
|
||||
field: '',
|
||||
children: [{
|
||||
title: '四级1-1-1-1 可允许跳转',
|
||||
id: 15,
|
||||
field: '',
|
||||
href: 'https://www.layui.com/doc/'
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '三级1-1-2',
|
||||
id: 8,
|
||||
field: '',
|
||||
children: [{
|
||||
title: '四级1-1-2-1',
|
||||
id: 32,
|
||||
field: ''
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '二级1-2',
|
||||
id: 4,
|
||||
spread: true,
|
||||
children: [{
|
||||
title: '三级1-2-1',
|
||||
id: 9,
|
||||
field: '',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: '三级1-2-2',
|
||||
id: 10,
|
||||
field: ''
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '二级1-3',
|
||||
id: 20,
|
||||
field: '',
|
||||
children: [{
|
||||
title: '三级1-3-1',
|
||||
id: 21,
|
||||
field: ''
|
||||
},
|
||||
{
|
||||
title: '三级1-3-2',
|
||||
id: 22,
|
||||
field: ''
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '一级2',
|
||||
id: 2,
|
||||
field: '',
|
||||
spread: true,
|
||||
children: [{
|
||||
title: '二级2-1',
|
||||
id: 5,
|
||||
field: '',
|
||||
spread: true,
|
||||
children: [{
|
||||
title: '三级2-1-1',
|
||||
id: 11,
|
||||
field: ''
|
||||
},
|
||||
{
|
||||
title: '三级2-1-2',
|
||||
id: 12,
|
||||
field: ''
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '二级2-2',
|
||||
id: 6,
|
||||
field: '',
|
||||
children: [{
|
||||
title: '三级2-2-1',
|
||||
id: 13,
|
||||
field: ''
|
||||
},
|
||||
{
|
||||
title: '三级2-2-2',
|
||||
id: 14,
|
||||
field: '',
|
||||
disabled: true
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '一级3',
|
||||
id: 16,
|
||||
field: '',
|
||||
children: [{
|
||||
title: '二级3-1',
|
||||
id: 17,
|
||||
field: '',
|
||||
fixed: true,
|
||||
children: [{
|
||||
title: '三级3-1-1',
|
||||
id: 18,
|
||||
field: ''
|
||||
},
|
||||
{
|
||||
title: '三级3-1-2',
|
||||
id: 19,
|
||||
field: ''
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '二级3-2',
|
||||
id: 27,
|
||||
field: '',
|
||||
children: [{
|
||||
title: '三级3-2-1',
|
||||
id: 28,
|
||||
field: ''
|
||||
},
|
||||
{
|
||||
title: '三级3-2-2',
|
||||
id: 29,
|
||||
field: ''
|
||||
}]
|
||||
}]
|
||||
}]);
|
||||
|
||||
const iconCtrl = ref(false);
|
||||
const showLine = ref(true);
|
||||
const clickNode = ref(null);
|
||||
const showCheckbox = ref(true);
|
||||
const checkedKeys = ref([1]);
|
||||
const disabled = ref(false);
|
||||
|
||||
function handleClick(node) {
|
||||
clickNode.value = node
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Tree 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| Name | Description | Accepted Values |
|
||||
| -------------------------------- | ---------------------------------------- | --------------- |
|
||||
| data | 树型组件数据,类型 TreeData \| TreeData[] | null |
|
||||
| showCheckbox | 是否显示复选框 | false |
|
||||
| onlyIconControl | 是否仅允许节点左侧图标控制展开收缩 | false |
|
||||
| showLine | 是否开启连接线 | true |
|
||||
| checkedKeys(v-model:checkedKeys) | 开启 showCheckbox 后, 选中的节点 | [] |
|
||||
| collapse-transition | 是否开启展示收起动画 | false |
|
||||
|
||||
:::
|
||||
|
||||
::: title Tree 数据
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| Name | Description | Accepted Values |
|
||||
|---------------------|-------------| --------------- |
|
||||
| id | 唯一值 | - |
|
||||
| title | 节点名称 | - |
|
||||
| children | 子节点 | [] |
|
||||
| disabled | 该节点是否禁用 | false |
|
||||
| spread | 该节点是否展开 | false |
|
||||
|
||||
:::
|
||||
|
||||
::: title Tree 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| Name | Description | Accepted Params |
|
||||
| ---------- | --------------- | --------------- |
|
||||
| node-click | 节点 click 事件 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext tree
|
||||
:::
|
||||
236
package/document/src/document/zh-CN/components/upload.md
Normal file
236
package/document/src/document/zh-CN/components/upload.md
Normal file
@@ -0,0 +1,236 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 按钮用于开始一个即时操作。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-upload` 标签, 创建一个按钮上传单文件
|
||||
|
||||
<template>
|
||||
<lay-upload @done="getUploadFile" @choose="beginChoose">
|
||||
<template #preview>
|
||||
<div v-for="(item,index) in picList" :key="`demo1-pic-'${index}`">
|
||||
<img :src="item"/>
|
||||
</div>
|
||||
</template>
|
||||
</lay-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref,reactive } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const picList = ref([]);
|
||||
const filetoDataURL=(file,fn)=>{
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = function(e){
|
||||
fn(e.target.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
const getUploadFile=(files)=>{
|
||||
if(Array.isArray(files)&&files.length>0){
|
||||
files.forEach((file,index,array)=>{
|
||||
filetoDataURL(file,(res)=>{
|
||||
console.log(res);
|
||||
picList.value.push(res);
|
||||
console.log(picList.value);
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
const beginChoose =(e)=>{
|
||||
console.log("beginChoose",e);
|
||||
};
|
||||
return {
|
||||
getUploadFile,
|
||||
filetoDataURL,
|
||||
beginChoose,
|
||||
picList
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 多文件上传
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-upload` 标签, 并使用 `multiple` 创建一个可上传多个文件的上传组件
|
||||
|
||||
<template>
|
||||
<lay-upload :multiple="true"></lay-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 拖拽上传
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-upload` 标签, 使用 `drag属性` 创建一个可拖拽的上传文件域
|
||||
|
||||
<template>
|
||||
<lay-upload :drag="true"></lay-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 自定义预览/上传禁用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-upload` 标签, 使用 `#preview` 自定义预览的UI交互,使用 `disabled` 添加上传禁用
|
||||
|
||||
<template>
|
||||
<lay-upload @done="getUploadFile2" :disabled="true">
|
||||
<template #preview>
|
||||
<div class="easy-wrap">
|
||||
<img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
|
||||
<img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
|
||||
<img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
|
||||
<img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
|
||||
<img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
|
||||
</div>
|
||||
</template>
|
||||
</lay-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
const getUploadFile2 = (file)=>{
|
||||
console.log(file);
|
||||
};
|
||||
return {
|
||||
getUploadFile2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 提供默认剪裁功能
|
||||
|
||||
::: demo 使用 `lay-upload` 标签, 添加 `cut` 开启 选择文件后剪裁功能
|
||||
|
||||
<template>
|
||||
<lay-upload @cutdone="getCutDone" @cutcancel="getCutCancel" :cut="true" :multiple="false" @done="getFileDone">
|
||||
<template #preview>
|
||||
<div class="easy-wrap" v-if="cutUrl">
|
||||
<img :src="cutUrl"/>
|
||||
</div>
|
||||
</template>
|
||||
</lay-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
const cutUrl = ref("");
|
||||
const getCutDone=(res)=>{
|
||||
console.log("getCutDone",res);
|
||||
cutUrl.value = res.msg;
|
||||
};
|
||||
const getCutCancel=(res)=>{
|
||||
console.log("getCutCancel",res);
|
||||
};
|
||||
const getFileDone=(res)=>{
|
||||
console.log("getFileDone",res);
|
||||
};
|
||||
return {
|
||||
getCutDone,
|
||||
getCutCancel,
|
||||
getFileDone,
|
||||
cutUrl
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Upload 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ----------- | -------- | ------- | --------- | ---------------------------------- |
|
||||
| url | 服务端上传接口，返回的数据规范请详见下文 | string | -- | -- |
|
||||
| data | 请求上传接口的额外参数 | object | -- | -- |
|
||||
| headers | 接口的请求头 | object | -- | -- |
|
||||
| acceptMime | 文件选择框时的可选文件类型 | string | `images` | `images` |
|
||||
| field | 设定文件域的字段名 | string | `file` | -- |
|
||||
| size | 设置文件最大可允许上传的大小，单位 KB。不支持ie8/9 | number | `0(不限制)` | -- |
|
||||
| multiple | 是否允许多文件上传。设置 true即可开启。不支持ie8/9 | boolean | false | -- |
|
||||
| number | 设置同时可上传的文件数量，一般配合 multiple 参数出现。 | number | `0(不限制)` | -- |
|
||||
| drag | 是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9 | boolean | true | -- |
|
||||
| disabled | 设置文件禁用 | boolean | false | -- |
|
||||
| cut | 是否开启选择图片后检测,设置true可开启 | boolean | false | -- |
|
||||
| cutOptions | 开启剪裁的模态弹窗与剪裁框的配置 | object | { layerOption,copperOption } | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Upload 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 名称 | 描述 | 参数 |
|
||||
| ------- | -------- | ---- |
|
||||
| preview | 自定义预览效果 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Upload 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 名称 | 描述 | 参数 |
|
||||
| ------- | -------- | ---- |
|
||||
| choose | 打开系统选择文件窗体的回调 | -- |
|
||||
| before | 上传事务开启前的回调 | -- |
|
||||
| done | 上传事务结束的回调 | -- |
|
||||
| error | 上传事务中出现错误的回调 | -- |
|
||||
| cutdown | 剪裁完成 | -- |
|
||||
| cutclose | 剪裁取消 | -- |
|
||||
:::
|
||||
|
||||
|
||||
|
||||
|
||||
::: previousNext button
|
||||
360
package/document/src/document/zh-CN/guide/changelog.md
Normal file
360
package/document/src/document/zh-CN/guide/changelog.md
Normal file
@@ -0,0 +1,360 @@
|
||||
::: title 更新记录
|
||||
:::
|
||||
|
||||
<lay-timeline style="padding-left:30px;padding-top:30px;">
|
||||
<lay-timeline-item title="尾版本号：日常问题更新。" simple></lay-timeline-item>
|
||||
<lay-timeline-item title="次版本号：带有新特性的向下兼容的版本。" simple></lay-timeline-item>
|
||||
<lay-timeline-item title="主版本号：含有破坏性更新和新特性，不在发布周期内。" simple></lay-timeline-item>
|
||||
</lay-timeline>
|
||||
|
||||
::: demo
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="1.0.x">
|
||||
<ul>
|
||||
<a name="1-0-1"> </a>
|
||||
<li>
|
||||
<h3>1.0.1 <span class="layui-badge-rim">2022-04-03</span></h3>
|
||||
<ul>
|
||||
<li>[新增] upload 组件 cut cutOptions 属性, 支持上传裁剪。</li>
|
||||
<li>[新增] timeline 组件 direction 属性, 支持垂直与水平布局。</li>
|
||||
<li>[新增] config-proivder 组件 global-dark-background-color 夜间模式背景颜色变量。</li>
|
||||
<li>[新增] config-proivder 组件 global-dark-text-color 夜间模式文字颜色变量。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-0-0"> </a>
|
||||
<li>
|
||||
<h3>1.0.0 <span class="layui-badge-rim">2022-04-02</span></h3>
|
||||
<ul>
|
||||
<li>[重要] 修订 version 为 1.0.0。</li>
|
||||
<li>[新增] empty 组件 extra 插槽, 支持扩展内容。</li>
|
||||
<li>[新增] result 组件 extra 插槽, 支持扩展内容。</li>
|
||||
<li>[新增] exception 组件 extra 插槽, 支持扩展内容。</li>
|
||||
<li>[新增] switch 组件 onswitch-value 属性, 默认为 true。</li>
|
||||
<li>[新增] switch 组件 unswitch-value 属性, 默认为 false。</li>
|
||||
<li>[新增] date-picker 组件 time 属性, 支持 时 分 秒 选择。</li>
|
||||
<li>[新增] date-picker 组件 yearmonth 属性, 支持 年 月 选择。</li>
|
||||
<li>[新增] tab 组件 position 属性, 用于支持不同方向的选项卡标题。</li>
|
||||
<li>[修复] date-picker 组件 type 属性为 time 时, v-model 默认不生效。</li>
|
||||
<li>[修复] date-picker 组件 12 小时制为 24 小时制。</li>
|
||||
<li>[修复] transfer 组件 showSearch 属性类型警告。</li>
|
||||
<li>[修复] upload 组件 number 属性必填警告。</li>
|
||||
<li>[修复] variable 全局变量重复导入的问题。</li>
|
||||
<li>[修复] menu 组件 openKeys 属性失效。</li>
|
||||
<li>[支持] animation 点击演示。</li>
|
||||
<li>[支持] icon 列表复制。</li>
|
||||
<li>[支持] 夜间模式。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-timeline-item>
|
||||
<lay-timeline-item title="0.4.x">
|
||||
<ul>
|
||||
<a name="0-4-4"> </a>
|
||||
<li>
|
||||
<h3>0.4.4 <span class="layui-badge-rim">2022-03-29</span></h3>
|
||||
<ul>
|
||||
<li>[新增] button 组件 prefix-icon 属性。</li>
|
||||
<li>[新增] button 组件 suffix-icon 属性。</li>
|
||||
<li>[新增] date-picker 组件 清空 操作, 清空选择日期。</li>
|
||||
<li>[新增] date-picker 组件 确认 操作, 关闭选择面板。</li>
|
||||
<li>[新增] date-picker 组件 type 属性 year 值, 支持 年份 选择。</li>
|
||||
<li>[新增] date-picker 组件 type 属性 month 值, 支持 月份 选择。</li>
|
||||
<li>[修复] date-picker 组件 type 属性为 datetime 时候面板不显示。</li>
|
||||
<li>[新增] card 组件 shadow 属性, 可选值 hover, always, never。</li>
|
||||
<li>[新增] table 组件 row 和 row-double 时间的 event 参数。</li>
|
||||
<li>[新增] table 组件 contextmenu 行右键事件。</li>
|
||||
<li>[支持] cdn 直接导入使用。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="0-4-3"> </a>
|
||||
<li>
|
||||
<h3>0.4.3 <span class="layui-badge-rim">2022-03-27</span></h3>
|
||||
<ul>
|
||||
<li>[新增] upload 文件上传组件。</li>
|
||||
<li>[新增] date-picker 组件 name 属性, 等同原生 name 属性。</li>
|
||||
<li>[新增] date-picker 组件 type 属性 date 值, 支持日期选择。 </li>
|
||||
<li>[新增] date-picker 组件 type 属性 datetime 值, 支持日期时间选择。</li>
|
||||
<li>[新增] date-picker 组件 now 操作, 将 年 月 日 重置为当前日期。</li>
|
||||
<li>[新增] table 组件 data 属性 titleSlot 选项, 自定义标题插槽。</li>
|
||||
<li>[修复] menu 组件 level 属性的语义与实际功能相悖。</li>
|
||||
<li>[修复] input 组件 height 高度固定 38 px。</li>
|
||||
<li>[修复] step 组件 line 样式。</li>
|
||||
<li>[依赖] monent 日期 js 框架。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="0-4-2"> </a>
|
||||
<li>
|
||||
<h3>0.4.2 <span class="layui-badge-rim">2022-03-26</span></h3>
|
||||
<ul>
|
||||
<li>[新增] card 组件 extra 插槽。</li>
|
||||
<li>[新增] switch 组件 onswitch-color 属性。</li>
|
||||
<li>[新增] switch 组件 unswitch-color 属性。</li>
|
||||
<li>[修复] docsearch peer dependencies 警告。</li>
|
||||
<li>[修复] select 组件 input border 显示问题。</li>
|
||||
<li>[优化] card 组件 header 插槽为 title 插槽。</li>
|
||||
<li>[优化] switch 组件 in-active-text 为 unswitch-text 属性, 默认不显示。</li>
|
||||
<li>[优化] switch 组件 active-text 为 onswitch-text 属性, 默认不显示。</li>
|
||||
<li>[优化] switch 组件样式。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="0-4-1"> </a>
|
||||
<li>
|
||||
<h3>0.4.1 <span class="layui-badge-rim">2022-03-25</span></h3>
|
||||
<ul>
|
||||
<li>[新增] switch 组件 onswitch-icon 插槽。</li>
|
||||
<li>[新增] switch 组件 unswitch-icon 插槽。</li>
|
||||
<li>[新增] transition 组件 type 属性, 默认为 collapse 过渡。</li>
|
||||
<li>[新增] transition 组件 enable 属性, 默认为 true 启用动画。</li>
|
||||
<li>[新增] transition 组件 type 属性 fade 值, 提供淡出淡入效果。</li>
|
||||
<li>[新增] menu 组件 collapseTransition 属性, 是否启用折叠动画, 默认为 true。</li>
|
||||
<li>[新增] collapse 组件 collapseTransition 属性, 是否启用折叠动画, 默认为 true。</li>
|
||||
<li>[新增] tree 组件 collapseTransition 属性, 是否启用折叠动画, 默认为 true。</li>
|
||||
<li>[新增] input 组件 allow-clear 属性, 提供输入清空。</li>
|
||||
<li>[新增] input 组件 prefix 插槽, 提供前缀设置。</li>
|
||||
<li>[新增] input 组件 suffix 插槽, 提供后缀设置。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="0-4-0"> </a>
|
||||
<li>
|
||||
<h3>0.4.0 <span class="layui-badge-rim">2022-03-17</span></h3>
|
||||
<ul>
|
||||
<li>[新增] notice-bar 通告栏。</li>
|
||||
<li>[新增] scroll 虚拟滚动组件。</li>
|
||||
<li>[新增] transition 过渡动画组件。</li>
|
||||
<li>[新增] collapse 折叠面板过渡动画。</li>
|
||||
<li>[新增] table 表格组件 excel 导出工具栏。</li>
|
||||
<li>[新增] table column 选项 sort 属性, 开启字段排序。</li>
|
||||
<li>[新增] page 分页组件 v-model 属性, 支持默认页设置。</li>
|
||||
<li>[新增] dropdown-menu 与 dropdown-menu-item 下拉菜单组件。</li>
|
||||
<li>[新增] date-picker 日期选择组件, 支持年月, 日期, 时间。</li>
|
||||
<li>[新增] transfer 穿梭框组件 showSearch 开启搜索属性。</li>
|
||||
<li>[修复] carousel-item 轮播项使用 v-for 无法渲染。</li>
|
||||
<li>[修复] checkbox 复选框组件, 选中颜色丢失。</li>
|
||||
<li>[修复] slider 滑块组件, 默认 step 值异常。</li>
|
||||
<li>[修复] form 表单错误提示没有间距的问题。</li>
|
||||
<li>[升级] layer-vue 1.3.10 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-timeline-item>
|
||||
<lay-timeline-item title="0.3.x">
|
||||
<ul>
|
||||
<a name="0-3-9"></a>
|
||||
<li>
|
||||
<h3>0.3.9 <span class="layui-badge-rim">2022-03-08</span></h3>
|
||||
<ul>
|
||||
<li>[重构] count-up 组件。</li>
|
||||
<li>[新增] algolia 文档搜索引擎。</li>
|
||||
<li>[新增] theme 主题 neutral 辅色配置。</li>
|
||||
<li>[新增] menuItem 与 subMenu 组件 title 与 icon 插槽。</li>
|
||||
<li>[新增] menu 菜单 collapse 属性, 支持折叠。</li>
|
||||
<li>[修复] menu 菜单 inverted 跟随主题配置。</li>
|
||||
<li>[删除] menuItem 菜单项 title 属性。</li>
|
||||
<li>[删除] subMenu 菜单集 title 属性。</li>
|
||||
<li>[升级] layer-vue 1.3.8 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="0-3-8"> </a>
|
||||
<li>
|
||||
<h3>0.3.8 <span class="layui-badge-rim">2022-02-21</span></h3>
|
||||
<ul>
|
||||
<li>[新增] fullscreen 全屏组件。</li>
|
||||
<li>[新增] icon-picker 颜色选择器。</li>
|
||||
<li>[新增] config-provider 全局配置, 用于主题与国际化切换。</li>
|
||||
<li>[修复] container 容器在不同的分辨率无法自适应的问题</li>
|
||||
<li>[修复] dropdown 组件无法嵌套使用的问题。</li>
|
||||
<li>[修复] menu 组件导航模式菜单错位问题。 </li>
|
||||
<li>[修复] quote 引用的 nm 灰色主题失效。</li>
|
||||
<li>[升级] icons-vue 1.0.7 版本。</li>
|
||||
<li>[升级] layer-vue 1.3.5 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="0-3-7"> </a>
|
||||
<li>
|
||||
<h3>0.3.7 <span class="layui-badge-rim">2022-02-07</span></h3>
|
||||
<ul>
|
||||
<li>[新增] slider 滑块组件 setp 属性, 支持设置步长。</li>
|
||||
<li>[新增] index.less 样式文件, 支持一定程度的主题定制。</li>
|
||||
<li>[移除] `defineProps`,`defineEmits` 两个全局宏命令引入，消除控制台警告。</li>
|
||||
<li>[修复] menu 组件 inverted 属性不兼容 string 类型。</li>
|
||||
<li>[修复] menu 组件 level 属性不兼容 string 类型。</li>
|
||||
<li>[升级] icons-vue 1.0.4 版本。</li>
|
||||
<li>[升级] layer-vue 1.3.3 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="0-3-6"> </a>
|
||||
<li>
|
||||
<h3>0.3.6 <span class="layui-badge-rim">2022-02-02</span></h3>
|
||||
<ul>
|
||||
<li>[新增] result 结果组件, 提供 success error 通用状态页。</li>
|
||||
<li>[新增] exception 异常组件, 提供 403, 404, 500 通用异常页。</li>
|
||||
<li>[新增] menu 组件 level 属性, 控制菜单层级之间的背景色差异。</li>
|
||||
<li>[新增] menu 组件 inverted 属性, 提供另一种树形菜单选中效果。</li>
|
||||
<li>[新增] menu 组件 theme 属性, 可选值 light 和 dark。</li>
|
||||
<li>[修复] table 组件 header 不随 body 滚动。</li>
|
||||
<li>[升级] vue 3.2.29 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="0-3-5"> </a>
|
||||
<li>
|
||||
<h3>0.3.5 <span class="layui-badge-rim">2022-01-24</span></h3>
|
||||
<ul>
|
||||
<li>[新增] split-panel 分割面板, 高度灵活的布局组件。</li>
|
||||
<li>[新增] layer 弹层 type 属性 drawer 可选值, 提供抽屉模式。</li>
|
||||
<li>[修复] tab-item 组件 closable 属性警告, 兼容 string 类型。</li>
|
||||
<li>[修复] dropdown 下拉菜单 content 显示位置问题。</li>
|
||||
<li>[升级] icons-vue 1.0.3 版本。</li>
|
||||
<li>[升级] layer-vue 1.3.1 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="0-3-4"> </a>
|
||||
<li>
|
||||
<h3>0.3.4 <span class="layui-badge-rim">2022-01-19</span></h3>
|
||||
<ul>
|
||||
<li>[新增] avatar-list 头像列表组件。</li>
|
||||
<li>[新增] tab-item 选项卡组件 closable 属性, 控制当前选项卡 close 支持。</li>
|
||||
<li>[修复] button 按钮 disabled 为 true 时, 触发 click 事件。</li>
|
||||
<li>[修复] menu-item 与 sub-menu 组件的 title 属性必填警告。</li>
|
||||
<li>[修复] layout 组件 side 因 flex 布局宽度不固定。</li>
|
||||
<li>[优化] layer 的 children slot 渲染机制。</li>
|
||||
<li>[升级] layer-vue 1.2.5 版本。</li>
|
||||
<li>[升级] vue 3.2.27 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="0-3-3"> </a>
|
||||
<li>
|
||||
<h3>0.3.3 <span class="layui-badge-rim">2022-01-09</span></h3>
|
||||
<ul>
|
||||
<li>[新增] setup 步骤条组件。</li>
|
||||
<li>[新增] slider 滑块组件 vertical 属性, 支持垂直布局。</li>
|
||||
<li>[新增] timeline-item 时间线组件 dot 插槽, 支持自定义节点内容。</li>
|
||||
<li>[新增] sub-menu 目录组件, 与 menu-item 组合使用。</li>
|
||||
<li>[修复] menu 菜单组件 layui-nav-more 切换动画。</li>
|
||||
<li>[修复] select 下拉选择组件外部参数变更组件内的数值不生效的问题</li>
|
||||
<li>[修复] page 分页组件 limit 数量过多时, 展示部分页数。</li>
|
||||
<li>[推出] layui-vue-admin 后台模板 </li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="0-3-2"> </a>
|
||||
<li>
|
||||
<h3>0.3.2 <span class="layui-badge-rim">2022-01-03</span></h3>
|
||||
<ul>
|
||||
<li>[新增] skeleton 骨架屏组件。</li>
|
||||
<li>[重构] tooltip 内部 popper 组件，支持移动到 tooltip 内部。</li>
|
||||
<li>[增强] layer 部分函数 msg open confirm 等, content 支持 VNode 类型。</li>
|
||||
<li>[增强] menu 菜单组件, 初步支持无限级嵌套。</li>
|
||||
<li>[修复] layer.close layer.closeAll 函数无法触发 OutAnim 过度动画问题。</li>
|
||||
<li>[废弃] menu-child-item 组件, 使用 menu-item 替代。</li>
|
||||
<li>[升级] layer-vue 1.2.4 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="0-3-1"> </a>
|
||||
<li>
|
||||
<h3>0.3.1 <span class="layui-badge-rim">2021-12-28</span></h3>
|
||||
<ul>
|
||||
<li>[新增] count-up 数字滚动组件。</li>
|
||||
<li>[新增] slider 滑块 range 属性, 支持区间取值。</li>
|
||||
<li>[新增] button 按钮 disabled 属性, 删除 type 属性 disabled 值。</li>
|
||||
<li>[修复] 演示站点剪贴板功能，http下不能使用的问题。</li>
|
||||
<li>[修复] checkbox 复选框 modelValue 属性必填警告。</li>
|
||||
<li>[修复] formItem 内下拉框组件校验不通过边框未标红问题。</li>
|
||||
<li>[修复] rate 评分 mouseleave 事件绑定警告。</li>
|
||||
<li>[修复] npm 安装 layui-vue 不必要的依赖警告。</li>
|
||||
<li>[集成] eslint, prettier 规范插件 。</li>
|
||||
<li>[升级] icons-vue 1.0.2 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-timeline-item>
|
||||
<lay-timeline-item title="0.2.x">
|
||||
<ul>
|
||||
<a name="0-2-9"> </a>
|
||||
<li>
|
||||
<h3>0.2.9 <span class="layui-badge-rim">2021-12-21</span></h3>
|
||||
<ul>
|
||||
<li>[新增] backtop 返回顶部组件, 支持自定义功能。</li>
|
||||
<li>[新增] slider 滑动型输入器，展示当前值和可选范围。</li>
|
||||
<li>[新增] select 下拉选择组件 multiple 属性, 支持多选策略。</li>
|
||||
<li>[新增] form 表单组件内置验证, 提供 rules 配置自定义验证规则。</li>
|
||||
<li>[新增] layer 组件 resize 方法, 重置 area 与 offset 状态。</li>
|
||||
<li>[修复] layer 弹层 v-model 切换状态后, 让其保持 area 与 offset 状态。</li>
|
||||
<li>[修复] transfer 穿梭框组件按钮样式, 使其增加减少操作按钮对齐。</li>
|
||||
<li>[修复] tree 树开启 checkbox 时, 无法选中的问题。</li>
|
||||
<li>[升级] layer-vue 1.2.2 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="0-2-8"> </a>
|
||||
<li>
|
||||
<h3>0.2.8 <span class="layui-badge-rim">2021-12-15</span></h3>
|
||||
<ul>
|
||||
<li>[新增] tooltip 警告提示，展现需要关注的信息。</li>
|
||||
<li>[新增] input-number 数字输入框, 通过鼠标或键盘，输入范围内的数值。</li>
|
||||
<li>[新增] layer 组件 isHtmlFangement 属性，函数调用时，用于解析 html 片段。</li>
|
||||
<li>[新增] layer 组件 resize 属性, 开启弹层尺寸拉伸, 常用于 页面层 与 Iframe 层。</li>
|
||||
<li>[加强] layer 组件 area 属性, 支持 字符串 与 数组 类型, 默认 auto 宽高根据内容自适应。</li>
|
||||
<li>[修复] layer 组件 body 禁用拖动, 仅支持标题拖动窗体。</li>
|
||||
<li>[修复] icon-picker 组件 select 图标时, 自动隐藏选择内容。</li>
|
||||
<li>[修复] dropdown 组件触发方式为 hover 时，移动不到菜单子项的问题</li>
|
||||
<li>[集成] utteranc.es 插件, 基于 issues 提供为文档提供留言能力。</li>
|
||||
<li>[升级] layer-vue 1.2.0, 更稳定的 layer 版本。</li>
|
||||
<li>[升级] vue 3.2.26 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-timeline-item>
|
||||
<lay-timeline-item title="0.1.x">
|
||||
<ul>
|
||||
<a name="0-2-7"> </a>
|
||||
<li>
|
||||
<h3>0.1.0 <span class="layui-badge-rim">2021-12-10</span></h3>
|
||||
<ul>
|
||||
<li>孵化。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-timeline-item>
|
||||
</lay-timeline>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
20
package/document/src/document/zh-CN/guide/dark.md
Normal file
20
package/document/src/document/zh-CN/guide/dark.md
Normal file
@@ -0,0 +1,20 @@
|
||||
::: title 夜间模式
|
||||
:::
|
||||
|
||||
::: describe 默认情况下, 网站主题为日间模式。
|
||||
:::
|
||||
|
||||
::: describe 若启用夜间模式, 使用 "全局配置" 组件配合 theme 属性, 设置为 `dark` 值。
|
||||
:::
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<lay-config-provider :theme="theme">
|
||||
<App />
|
||||
</lay-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const theme = ref('dark')
|
||||
</script>
|
||||
```
|
||||
128
package/document/src/document/zh-CN/guide/getStarted.md
Normal file
128
package/document/src/document/zh-CN/guide/getStarted.md
Normal file
@@ -0,0 +1,128 @@
|
||||
::: title 快速上手
|
||||
:::
|
||||
|
||||
<br>
|
||||
|
||||
<p>
|
||||
<a href="http://layui-vue.pearadmin.com" style="margin-left:30px;">
|
||||
<img src="../../../src/assets/layui-logo.png" alt="layui" width="105" style="border-radius:12px;">
|
||||
</a>
|
||||
<span style="font-size:32px;color:#e2e2e2;margin:30px;">+</span>
|
||||
<a href="http://layui-vue.pearadmin.com">
|
||||
<img src="https://qn.antdv.com/vue.png" alt="layui" width="105" style="border-radius:12px;">
|
||||
</a>
|
||||
<span style="font-size:32px;color:#e2e2e2;margin:30px;">=</span>
|
||||
<a href="http://layui-vue.pearadmin.com">
|
||||
<img src="../../../src/assets/logo.jpg" alt="layui" width="105" style="border-radius:12px;">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<br>
|
||||
|
||||
::: title 使用包管理
|
||||
:::
|
||||
|
||||
::: describe 使用 npm 工具安装 layui vue, 然后你可以使用打包工具, 如 vite rollup.
|
||||
:::
|
||||
|
||||
```
|
||||
npm install @layui/layui-vue --save
|
||||
```
|
||||
::: title 全局注册
|
||||
:::
|
||||
|
||||
```js
|
||||
import App from './App.vue'
|
||||
import { createApp } from 'vue'
|
||||
import Layui from '@layui/layui-vue'
|
||||
import '@layui/layui-vue/lib/index.css'
|
||||
|
||||
createApp(App).use(Layui).mount('#app')
|
||||
```
|
||||
::: describe 以上代码便完成了 layui-vue 的引入。需要注意的是，样式文件需要单独引入。
|
||||
:::
|
||||
|
||||
::: title 按需引入
|
||||
:::
|
||||
|
||||
```js
|
||||
import App from './App.vue'
|
||||
import { createApp } from 'vue'
|
||||
import { LayButton, LayTable } from '@layui/layui-vue'
|
||||
import '@layui/layui-vue/es/button/index.css';
|
||||
import '@layui/layui-vue/es/table/index.css';
|
||||
|
||||
var app = createApp(App).
|
||||
|
||||
app.component("LayButton", LayButton);
|
||||
app.component("LayTable", LayTable);
|
||||
|
||||
app.mount('#app')
|
||||
```
|
||||
|
||||
::: title 基础示例
|
||||
:::
|
||||
|
||||
```html
|
||||
<lay-layout>
|
||||
<lay-header>
|
||||
<lay-logo>Layui Admin</lay-logo>
|
||||
</lay-header>
|
||||
<lay-side></lay-side>
|
||||
<lay-body>
|
||||
<router-view></router-view>
|
||||
</lay-body>
|
||||
<lay-footer>pearadmin.com</lay-footer>
|
||||
</lay-layout>
|
||||
```
|
||||
::: title 浏览器导入
|
||||
:::
|
||||
|
||||
::: describe 根据不同的 CDN 提供商有不同的引入方式， 根据不同的 CDN 提供商有不同的引入方式， 我们在这里以 unpkg 举例。
|
||||
:::
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Document</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- 引入 layui-vue 样式 -->
|
||||
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@layui/layui-vue/lib/index.css">
|
||||
<!-- 引入 Vue 3, 使用全局变量 Vue -->
|
||||
<script src="https://unpkg.com/vue@3"></script>
|
||||
<!-- 引入 layui-vue 组件库, 使用全局变量 LayuiVue -->
|
||||
<script src="https://unpkg.com/@layui/layui-vue"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<lay-button @click="sayHello">选项API</lay-button>
|
||||
<lay-button @click="openLayer">组合API</lay-button>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
const { createApp, ref } = Vue;
|
||||
const { layer } = LayuiVue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const openLayer = function () {
|
||||
layer.msg("hello");
|
||||
}
|
||||
return {
|
||||
openLayer
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(LayuiVue);
|
||||
app.mount('#app');
|
||||
</script>
|
||||
|
||||
</html>
|
||||
```
|
||||
21
package/document/src/document/zh-CN/guide/introduce.md
Normal file
21
package/document/src/document/zh-CN/guide/introduce.md
Normal file
@@ -0,0 +1,21 @@
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
<p>
|
||||
<a href="http://layui-vue.pearadmin.com">
|
||||
<img src="../../../src/assets/logo-new.png" alt="layui" width="440">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
::: quote
|
||||
|
||||
layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 , Layui 的 另 一 种 呈 现 方 式
|
||||
|
||||
:::
|
||||
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="2021年，layui-vue 首个版本发布" simple></lay-timeline-item>
|
||||
<lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
|
||||
<lay-timeline-item title="2016年，layui 首个版本发布" simple></lay-timeline-item>
|
||||
<lay-timeline-item title="2015年，layui 孵化" simple></lay-timeline-item>
|
||||
</lay-timeline>
|
||||
13
package/document/src/document/zh-CN/guide/locale.md
Normal file
13
package/document/src/document/zh-CN/guide/locale.md
Normal file
@@ -0,0 +1,13 @@
|
||||
::: title 国际化
|
||||
:::
|
||||
|
||||
::: describe 目前的默认文案是简体中文，如果需要使用其他语言，可以参考下面的方案。
|
||||
:::
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<lay-config-provider locale="zh_CN">
|
||||
<App />
|
||||
</lay-config-provider>
|
||||
</template>
|
||||
```
|
||||
156
package/document/src/document/zh-CN/guide/member.md
Normal file
156
package/document/src/document/zh-CN/guide/member.md
Normal file
@@ -0,0 +1,156 @@
|
||||
::: title 团队成员
|
||||
:::
|
||||
|
||||
<lay-card>
|
||||
<lay-row>
|
||||
<lay-col md="2">
|
||||
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1611/4835367_Jmysy_1578975358.png"></lay-avatar>
|
||||
</lay-col>
|
||||
<lay-col md="3">
|
||||
就眠仪式
|
||||
</lay-col>
|
||||
<lay-col md="8">
|
||||
焦点：layui-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 北京
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-card>
|
||||
<lay-card>
|
||||
<lay-row>
|
||||
<lay-col md="2">
|
||||
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1755/5267877_jobin_jia_1608578025.png"></lay-avatar>
|
||||
</lay-col>
|
||||
<lay-col md="3">
|
||||
落小梅
|
||||
</lay-col>
|
||||
<lay-col md="8">
|
||||
焦点：tree table
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 湖南
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-card>
|
||||
|
||||
<lay-card>
|
||||
<lay-row>
|
||||
<lay-col md="2">
|
||||
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/702/2106738_wanglin300_1639442830.png"></lay-avatar>
|
||||
</lay-col>
|
||||
<lay-col md="3">
|
||||
halo
|
||||
</lay-col>
|
||||
<lay-col md="8">
|
||||
焦点：slider
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 北京
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-card>
|
||||
|
||||
<lay-card>
|
||||
<lay-row>
|
||||
<lay-col md="2">
|
||||
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1871/5614379_xumisky_1607057214.png"></lay-avatar>
|
||||
</lay-col>
|
||||
<lay-col md="3">
|
||||
须弥
|
||||
</lay-col>
|
||||
<lay-col md="8">
|
||||
焦点：layui-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 广州
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：<a href="https://gitee.com/xumisky">Gitee</a> <a href="https://github.com/xumiSky">Github</a>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-card>
|
||||
|
||||
<lay-card>
|
||||
<lay-row>
|
||||
<lay-col md="2">
|
||||
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2469/7407590_wcg666_1640528494.png"></lay-avatar>
|
||||
</lay-col>
|
||||
<lay-col md="3">
|
||||
Sight
|
||||
</lay-col>
|
||||
<lay-col md="8">
|
||||
焦点：layui-vue layer-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 未知
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-card>
|
||||
|
||||
<lay-card>
|
||||
<lay-row>
|
||||
<lay-col md="2">
|
||||
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2596/7789823_finalsummer_1613993823.png"></lay-avatar>
|
||||
</lay-col>
|
||||
<lay-col md="3">
|
||||
finalsummer
|
||||
</lay-col>
|
||||
<lay-col md="8">
|
||||
焦点：layer-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 未知
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-card>
|
||||
|
||||
<lay-card>
|
||||
<lay-row>
|
||||
<lay-col md="2">
|
||||
<lay-avatar src="http://mms0.baidu.com/it/u=1690972933,1482111264&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=500&h=500"></lay-avatar>
|
||||
</lay-col>
|
||||
<lay-col md="3">
|
||||
莫名点
|
||||
</lay-col>
|
||||
<lay-col md="8">
|
||||
焦点：skeleton step splitPanel
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 上海
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：<a href="https://gitee.com/dingyongya">Gitee</a> <a href="https://github.com/dyywork">Github</a>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-card>
|
||||
|
||||
<br>
|
||||
|
||||
::: title 社区伙伴
|
||||
:::
|
||||
|
||||
::: quote
|
||||
在 人 的 尺 度 里，世 界 既 无 始，也 无 终，唯 一 的 信 仰 是，总 有 人 认 得 你 站 在 暴 风 雪 里 的 样 子。
|
||||
:::
|
||||
|
||||
::: describe
|
||||
|
||||
[](https://giteye.net/chart/DBC9Z6HQ)
|
||||
|
||||
:::
|
||||
7
package/document/src/document/zh-CN/guide/problem.md
Normal file
7
package/document/src/document/zh-CN/guide/problem.md
Normal file
@@ -0,0 +1,7 @@
|
||||
::: title 常见问题
|
||||
:::
|
||||
|
||||
::: describe 以下整理了一些 Layui Vue 社区常见的问题和官方答复，在提问之前建议找找有没有类似的问题。
|
||||
:::
|
||||
|
||||
|
||||
52
package/document/src/document/zh-CN/guide/theme.md
Normal file
52
package/document/src/document/zh-CN/guide/theme.md
Normal file
@@ -0,0 +1,52 @@
|
||||
::: title 定制主题
|
||||
:::
|
||||
|
||||
::: describe 全局化配置设置内部组件的主题、语言和组件卸载于其他位置的 DOM 的类名。
|
||||
:::
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<lay-config-provider :themeVariable="themeVariable">
|
||||
<App />
|
||||
</lay-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const themeVariable = {
|
||||
"--global-primary-color":"red",
|
||||
"--global-checked-color":"red"
|
||||
}
|
||||
</script>
|
||||
```
|
||||
::: describe 以下是一些最常用的通用变量，所有样式变量可以在 这里 找到。
|
||||
:::
|
||||
|
||||
```
|
||||
--global-primary-color: #009688; // 主题色
|
||||
|
||||
--global-normal-color: #1e9fff; // 通用色
|
||||
|
||||
--global-warm-color: #ffb800; // 警告色
|
||||
|
||||
--global-danger-color: #ff5722; // 危险色
|
||||
|
||||
--global-checked-color: #5fb878; // 选中色
|
||||
|
||||
--global-border-radius: 2px; // 圆角度
|
||||
|
||||
--global-neutral-color-1: #FAFAFA; // 辅助色-1
|
||||
|
||||
--global-neutral-color-2: #F6F6F6; // 辅助色-2
|
||||
|
||||
--global-neutral-color-3: #eeeeee; // 辅助色-3
|
||||
|
||||
--global-neutral-color-4: #e2e2e2; // 辅助色-4
|
||||
|
||||
--global-neutral-color-5: #dddddd; // 辅助色-5
|
||||
|
||||
--global-neutral-color-6: #d2d2d2; // 辅助色-6
|
||||
|
||||
--global-neutral-color-7: #cccccc; // 辅助色-7
|
||||
|
||||
--global-neutral-color-8: #c2c2c2; // 辅助色-8
|
||||
```
|
||||
7
package/document/src/entry-client.ts
Normal file
7
package/document/src/entry-client.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { createApp } from "./main";
|
||||
|
||||
const { app, router } = createApp();
|
||||
|
||||
router.isReady().then(() => {
|
||||
app.mount("#app");
|
||||
});
|
||||
52
package/document/src/entry-server.ts
Normal file
52
package/document/src/entry-server.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-nocheck
|
||||
import { createApp } from "./main";
|
||||
import { renderToString } from "@vue/server-renderer";
|
||||
|
||||
export async function render(url, manifest): Promise<string[]> {
|
||||
const { app, router } = createApp();
|
||||
|
||||
// set the router to the desired URL before rendering
|
||||
router.push(url);
|
||||
await router.isReady();
|
||||
|
||||
// passing SSR context object which will be available via useSSRContext()
|
||||
// @vitejs/plugin-vue injects code into a component's step() that registers
|
||||
// itself on ctx.modules. After the render, ctx.modules would contain all the
|
||||
// components that have been instantiated during this render call.
|
||||
const ctx = {};
|
||||
const html = await renderToString(app, ctx);
|
||||
|
||||
// the SSR manifest generated by Vite contains module -> chunk/asset mapping
|
||||
// which we can then use to determine what files need to be preloaded for this
|
||||
// request.
|
||||
const preloadLinks = renderPreloadLinks(ctx.modules, manifest);
|
||||
return [html, preloadLinks];
|
||||
}
|
||||
|
||||
function renderPreloadLinks(modules, manifest) {
|
||||
let links = "";
|
||||
const seen = new Set();
|
||||
modules.forEach((id) => {
|
||||
const files = manifest[id];
|
||||
if (files) {
|
||||
files.forEach((file) => {
|
||||
if (!seen.has(file)) {
|
||||
seen.add(file);
|
||||
links += renderPreloadLink(file);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
return links;
|
||||
}
|
||||
|
||||
function renderPreloadLink(file) {
|
||||
if (file.endsWith(".js")) {
|
||||
return `<link rel="modulepreload" crossorigin href="${file}">`;
|
||||
} else if (file.endsWith(".css")) {
|
||||
return `<link rel="stylesheet" href="${file}">`;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
15
package/document/src/language/en_US.ts
Normal file
15
package/document/src/language/en_US.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
export default {
|
||||
nav: {
|
||||
home: "Home",
|
||||
guide: "Guide",
|
||||
components: "Components",
|
||||
resources: "Resources",
|
||||
material: "Material",
|
||||
},
|
||||
home: {
|
||||
description: "An enterprise-class UI components based on Layui and Vue.",
|
||||
version: "version",
|
||||
changelog: "changelog",
|
||||
download: "download",
|
||||
},
|
||||
};
|
||||
16
package/document/src/language/zh_CN.ts
Normal file
16
package/document/src/language/zh_CN.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
export default {
|
||||
nav: {
|
||||
home: "首页",
|
||||
guide: "指南",
|
||||
components: "组件",
|
||||
resources: "生态",
|
||||
material: "物料",
|
||||
},
|
||||
home: {
|
||||
description:
|
||||
"layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.",
|
||||
version: "当前版本",
|
||||
changelog: "更新日志",
|
||||
download: "下载量",
|
||||
},
|
||||
};
|
||||
434
package/document/src/layouts/Layout.vue
Normal file
434
package/document/src/layouts/Layout.vue
Normal file
@@ -0,0 +1,434 @@
|
||||
<template>
|
||||
<lay-config-provider
|
||||
:theme="theme"
|
||||
:locale="locale"
|
||||
:locales="locales"
|
||||
:themeVariable="themeVariable"
|
||||
>
|
||||
<lay-layout class="layui-layout-document" style="height: 100%">
|
||||
<lay-header
|
||||
><lay-logo>
|
||||
<img src="../assets/logo-png.png" /><span
|
||||
style="
|
||||
margin-left: 12px;
|
||||
font-size: 20px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
letter-spacing: -0.2px;
|
||||
opacity: 0.8;
|
||||
"
|
||||
>layui - vue</span
|
||||
>
|
||||
</lay-logo>
|
||||
<ul
|
||||
class="layui-nav layui-layout-left"
|
||||
style="margin-top: 0px; margin-bottom: 0px"
|
||||
>
|
||||
<li
|
||||
class="layui-nav-item"
|
||||
:class="{ 'layui-active': currentPath.includes('/zh-CN/index') }"
|
||||
>
|
||||
<router-link to="/zh-CN/index"> {{ t("nav.home") }} </router-link>
|
||||
</li>
|
||||
<li
|
||||
class="layui-nav-item"
|
||||
:class="{ 'layui-active': currentPath.includes('/zh-CN/guide') }"
|
||||
>
|
||||
<router-link to="/zh-CN/guide"> {{ t("nav.guide") }} </router-link>
|
||||
</li>
|
||||
<li
|
||||
class="layui-nav-item"
|
||||
:class="{
|
||||
'layui-active': currentPath.includes('/zh-CN/components'),
|
||||
}"
|
||||
>
|
||||
<router-link to="/zh-CN/components">
|
||||
{{ t("nav.components") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
class="layui-nav-item"
|
||||
:class="{
|
||||
'layui-active': currentPath.includes('/zh-CN/resources'),
|
||||
}"
|
||||
>
|
||||
<router-link to="/zh-CN/resources">
|
||||
{{ t("nav.resources") }}
|
||||
</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">
|
||||
<lay-dropdown>
|
||||
<a href="javascript:void(0);">
|
||||
<lay-icon
|
||||
size="15px"
|
||||
type="layui-icon-theme"
|
||||
style="padding-left: 30px; padding-right: 30px"
|
||||
></lay-icon>
|
||||
</a>
|
||||
<template #content>
|
||||
<div style="width: 380px; padding: 0px 10px 10px 10px">
|
||||
<lay-color-picker
|
||||
v-model="themeVariable['--global-primary-color']"
|
||||
></lay-color-picker
|
||||
>
|
||||
<lay-color-picker
|
||||
v-model="themeVariable['--global-normal-color']"
|
||||
></lay-color-picker
|
||||
>
|
||||
<lay-color-picker
|
||||
v-model="themeVariable['--global-warm-color']"
|
||||
></lay-color-picker
|
||||
>
|
||||
<lay-color-picker
|
||||
v-model="themeVariable['--global-danger-color']"
|
||||
></lay-color-picker
|
||||
>
|
||||
<lay-color-picker
|
||||
v-model="themeVariable['--global-checked-color']"
|
||||
></lay-color-picker
|
||||
>
|
||||
<lay-input
|
||||
v-model="themeVariable['--global-border-radius']"
|
||||
style="display: inline-block; width: 130px"
|
||||
></lay-input>
|
||||
<lay-color-picker
|
||||
v-model="themeVariable['--global-neutral-color-1']"
|
||||
></lay-color-picker
|
||||
>
|
||||
<lay-color-picker
|
||||
v-model="themeVariable['--global-neutral-color-2']"
|
||||
></lay-color-picker
|
||||
>
|
||||
<lay-color-picker
|
||||
v-model="themeVariable['--global-neutral-color-3']"
|
||||
></lay-color-picker
|
||||
>
|
||||
<lay-color-picker
|
||||
v-model="themeVariable['--global-neutral-color-4']"
|
||||
></lay-color-picker
|
||||
>
|
||||
<lay-color-picker
|
||||
v-model="themeVariable['--global-neutral-color-5']"
|
||||
></lay-color-picker
|
||||
>
|
||||
<lay-color-picker
|
||||
v-model="themeVariable['--global-neutral-color-6']"
|
||||
></lay-color-picker
|
||||
>
|
||||
<lay-color-picker
|
||||
v-model="themeVariable['--global-neutral-color-7']"
|
||||
></lay-color-picker
|
||||
>
|
||||
<lay-color-picker
|
||||
v-model="themeVariable['--global-neutral-color-8']"
|
||||
></lay-color-picker>
|
||||
<lay-color-picker
|
||||
v-model="themeVariable['--global-dark-text-color']"
|
||||
></lay-color-picker
|
||||
>
|
||||
<lay-color-picker
|
||||
v-model="themeVariable['--global-dark-background-color']"
|
||||
></lay-color-picker>
|
||||
|
||||
<lay-button fluid="true">导 出 配 置</lay-button>
|
||||
</div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="https://gitee.com/layui-vue/layui-vue"> Gitee </a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:void(0)">
|
||||
<lay-badge
|
||||
type="rim"
|
||||
class="layui-local-badge"
|
||||
v-if="locale === 'en_US'"
|
||||
@click="changeLocale('zh_CN')"
|
||||
>中 文</lay-badge
|
||||
>
|
||||
<lay-badge
|
||||
type="rim"
|
||||
class="layui-local-badge"
|
||||
v-else
|
||||
@click="changeLocale('en_US')"
|
||||
>英 文</lay-badge
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:void(0)">
|
||||
<lay-switch
|
||||
v-model="theme"
|
||||
class="switch"
|
||||
onswitch-value="dark"
|
||||
unswitch-value="light"
|
||||
onswitch-color="rgba(255, 255, 255, 0.05)"
|
||||
unswitch-color="rgba(255, 255, 255, 0.05)"
|
||||
>
|
||||
<template #onswitch-icon>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="rgba(60, 60, 60, .7)"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
class="vt-switch-appearance-moon"
|
||||
>
|
||||
<path
|
||||
d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
<template #unswitch-icon>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="rgba(60, 60, 60, .7)"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
class="vt-switch-appearance-sun"
|
||||
>
|
||||
<path
|
||||
d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"
|
||||
></path>
|
||||
<path
|
||||
d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"
|
||||
></path>
|
||||
<path
|
||||
d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"
|
||||
></path>
|
||||
<path
|
||||
d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"
|
||||
></path>
|
||||
<path
|
||||
d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"
|
||||
></path>
|
||||
<path
|
||||
d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"
|
||||
></path>
|
||||
<path
|
||||
d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"
|
||||
></path>
|
||||
<path
|
||||
d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"
|
||||
></path>
|
||||
<path
|
||||
d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
</lay-switch>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:void(0)"> 1.0.0 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-header>
|
||||
<router-view></router-view>
|
||||
</lay-layout>
|
||||
</lay-config-provider>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, watch, computed, provide } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import menu from "../view/utils/menus";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import zh_CN from "../language/zh_CN.ts";
|
||||
import en_US from "../language/en_US.ts";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const locale = ref("zh_CN");
|
||||
const locales = [
|
||||
{ name: "zh_CN", locale: zh_CN, merge: true },
|
||||
{ name: "en_US", locale: en_US, merge: true },
|
||||
];
|
||||
let isDark =
|
||||
localStorage.getItem("layui-vue-theme-dark") !== "false" ||
|
||||
window.matchMedia("prefers-color-scheme: dark").matches;
|
||||
|
||||
const theme = ref(isDark ? "dark" : "light");
|
||||
const themeVariable = ref({
|
||||
"--global-primary-color": "#009688",
|
||||
"--global-normal-color": "#1e9fff",
|
||||
"--global-warm-color": "#ffb800",
|
||||
"--global-danger-color": "#ff5722",
|
||||
"--global-checked-color": "#5fb878",
|
||||
"--global-border-radius": "2px",
|
||||
"--global-neutral-color-1": "#FAFAFA",
|
||||
"--global-neutral-color-2": "#F6F6F6",
|
||||
"--global-neutral-color-3": "#eeeeee",
|
||||
"--global-neutral-color-4": "#e2e2e2",
|
||||
"--global-neutral-color-5": "#dddddd",
|
||||
"--global-neutral-color-6": "#d2d2d2",
|
||||
"--global-neutral-color-7": "#cccccc",
|
||||
"--global-neutral-color-8": "#c2c2c2",
|
||||
"--global-dark-text-color": "#FFFFFFc9",
|
||||
"--global-dark-background-color": "#22272E",
|
||||
});
|
||||
|
||||
const menus = [];
|
||||
const currentPath = ref("/zh-CN/guide");
|
||||
watch(
|
||||
() => route.path,
|
||||
(val) => {
|
||||
currentPath.value = val;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
menu.forEach((m) => {
|
||||
m.children.forEach((c) => {
|
||||
menus.push(c);
|
||||
});
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(val) => {
|
||||
currentPath.value = val;
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
|
||||
const handleClick = function (menu) {
|
||||
router.push(menu.path);
|
||||
};
|
||||
|
||||
const changeLocale = function (lang) {
|
||||
locale.value = lang;
|
||||
};
|
||||
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addListener((e) => (theme.value = e.matches ? "dark" : "light"));
|
||||
|
||||
provide("theme", theme);
|
||||
|
||||
return {
|
||||
t,
|
||||
menus,
|
||||
theme,
|
||||
locale,
|
||||
locales,
|
||||
currentPath,
|
||||
handleClick,
|
||||
changeLocale,
|
||||
themeVariable,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.layui-layout-document > .layui-header {
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
.layui-layout-document > .layui-layout > .layui-side {
|
||||
overflow-x: hidden;
|
||||
position: fixed;
|
||||
margin-top: 60px;
|
||||
z-index: 99;
|
||||
height: calc(100% - 60px);
|
||||
border-right: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
.layui-layout-document > .layui-layout > .layui-body {
|
||||
margin-top: 60px;
|
||||
left: 200px;
|
||||
position: absolute;
|
||||
width: calc(100% - 200px);
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.layui-layout-document .layui-header .layui-form-switch {
|
||||
border: 1px solid rgba(60, 60, 60, 0.29);
|
||||
background-color: #f1f1f1 !important;
|
||||
}
|
||||
|
||||
.layui-layout-document .layui-header .layui-nav .layui-nav-item a,
|
||||
.layui-layout-document .layui-header .layui-nav .layui-nav-item a:hover {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.layui-layout-document .layui-header .layui-logo {
|
||||
text-align: left;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.layui-logo img {
|
||||
height: 45px;
|
||||
left: 15px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.layui-header > .layui-nav {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.layui-header > .layui-nav .layui-active * {
|
||||
color: var(--global-checked-color) !important;
|
||||
}
|
||||
|
||||
.layui-header .layui-local-badge {
|
||||
font-size: 12.4px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.layui-menu-docs {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.layui-menu-docs .layui-menu-body-title .layui-font-gray {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.layui-side hr {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.switch svg {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.layui-side {
|
||||
width: 0px !important;
|
||||
}
|
||||
.layui-body {
|
||||
left: 0px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.layui-logo {
|
||||
display: none !important;
|
||||
}
|
||||
.layui-layout-left {
|
||||
left: 0px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
29
package/document/src/main.ts
Normal file
29
package/document/src/main.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import Layout from "./App.vue";
|
||||
import { App, createApp as _createApp } from "vue";
|
||||
import { createRouter } from "./router/index";
|
||||
import { Router } from "vue-router";
|
||||
import layui from "@layui/layui-vue";
|
||||
import "@layui/layui-vue/lib/index.css";
|
||||
import LayCode from "./components/LayCode.vue";
|
||||
import LaySearch from "./components/LaySearch.vue";
|
||||
import LayTableBox from "./components/LayTableBox.vue";
|
||||
import LayAnchor from "./components/LayAnchor.vue";
|
||||
import "./assets/css/index.css";
|
||||
|
||||
export function createApp(): {
|
||||
app: App<Element>;
|
||||
router: Router;
|
||||
} {
|
||||
const app = _createApp(Layout);
|
||||
const router = createRouter();
|
||||
|
||||
app
|
||||
.use(layui)
|
||||
.use(router)
|
||||
.component("LayCode", LayCode)
|
||||
.component("LaySearch", LaySearch)
|
||||
.component("LayTableBox", LayTableBox)
|
||||
.component("LayAnchor", LayAnchor);
|
||||
|
||||
return { app, router };
|
||||
}
|
||||
40
package/document/src/plugin/common-plugins.ts
Normal file
40
package/document/src/plugin/common-plugins.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
import Markdown from "vite-plugin-md";
|
||||
import container from "markdown-it-container";
|
||||
import highlight from "./highlight";
|
||||
import snippet from "./snippet";
|
||||
import demo from "./demo";
|
||||
import createTitle from "./create-title";
|
||||
import createQuote from "./create-quote";
|
||||
import createDescribe from "./create-describe";
|
||||
import createTable from "./create-table";
|
||||
import createAnchor from "./create-anchor";
|
||||
import preWrapper from "./pre-wrapper";
|
||||
import previousNext from "./previous-next";
|
||||
|
||||
const plugins = [
|
||||
vue({
|
||||
include: [/\.vue$/, /\.md$/],
|
||||
}),
|
||||
Markdown({
|
||||
markdownItOptions: {
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true,
|
||||
highlight,
|
||||
},
|
||||
markdownItSetup(md) {
|
||||
md.use(snippet)
|
||||
.use(preWrapper)
|
||||
.use(container, "demo", demo)
|
||||
.use(...createTable("table", ""))
|
||||
.use(...createQuote("quote", ""))
|
||||
.use(...createTitle("title", ""))
|
||||
.use(...createDescribe("describe", ""))
|
||||
.use(...createAnchor("anchor", ""))
|
||||
.use(...previousNext("previousNext", ""));
|
||||
},
|
||||
}),
|
||||
] as any;
|
||||
|
||||
export default plugins;
|
||||
36
package/document/src/plugin/create-anchor.ts
Normal file
36
package/document/src/plugin/create-anchor.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import container from "markdown-it-container";
|
||||
import type Token from "markdown-it/lib/token";
|
||||
|
||||
type ContainerArgs = [
|
||||
typeof container,
|
||||
string,
|
||||
{ render(tokens: Token[], idx: number): string }
|
||||
];
|
||||
|
||||
export default function createContainer(
|
||||
klass: string,
|
||||
defaultTitle: string
|
||||
): ContainerArgs {
|
||||
return [
|
||||
container,
|
||||
klass,
|
||||
{
|
||||
render(tokens, idx) {
|
||||
const token = tokens[idx];
|
||||
if (token.nesting === 1) {
|
||||
const anchors = [];
|
||||
for (const token of tokens) {
|
||||
if (token.nesting === 1 && token.info.includes("title")) {
|
||||
const info = token.info.trim().slice(klass.length).trim();
|
||||
anchors.push(info);
|
||||
}
|
||||
}
|
||||
// 此处仅支持 string | number | boolean 类型
|
||||
return `<lay-anchor anchors="${anchors}" :currIndex="-1" :show="true">`;
|
||||
} else {
|
||||
return "</lay-anchor>\n";
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
29
package/document/src/plugin/create-describe.ts
Normal file
29
package/document/src/plugin/create-describe.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import container from "markdown-it-container";
|
||||
import type Token from "markdown-it/lib/token";
|
||||
|
||||
type ContainerArgs = [
|
||||
typeof container,
|
||||
string,
|
||||
{ render(tokens: Token[], idx: number): string }
|
||||
];
|
||||
|
||||
export default function createContainer(
|
||||
klass: string,
|
||||
defaultTitle: string
|
||||
): ContainerArgs {
|
||||
return [
|
||||
container,
|
||||
klass,
|
||||
{
|
||||
render(tokens, idx) {
|
||||
const token = tokens[idx];
|
||||
const info = token.info.trim().slice(klass.length).trim();
|
||||
if (token.nesting === 1) {
|
||||
return `<p style="padding-left: 30px;padding-top: 20px;padding-bottom: 20px;">${info}`;
|
||||
} else {
|
||||
return "</p>\n";
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
29
package/document/src/plugin/create-quote.ts
Normal file
29
package/document/src/plugin/create-quote.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import container from "markdown-it-container";
|
||||
import type Token from "markdown-it/lib/token";
|
||||
|
||||
type ContainerArgs = [
|
||||
typeof container,
|
||||
string,
|
||||
{ render(tokens: Token[], idx: number): string }
|
||||
];
|
||||
|
||||
export default function createContainer(
|
||||
klass: string,
|
||||
defaultTitle: string
|
||||
): ContainerArgs {
|
||||
return [
|
||||
container,
|
||||
klass,
|
||||
{
|
||||
render(tokens, idx) {
|
||||
const token = tokens[idx];
|
||||
const info = token.info.trim().slice(klass.length).trim();
|
||||
if (token.nesting === 1) {
|
||||
return `<lay-quote style="margin-left:0px;margin-right:0px;margin-top:20px;margin-bottom:40px;">${info}`;
|
||||
} else {
|
||||
return "</lay-quote>\n";
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
29
package/document/src/plugin/create-table.ts
Normal file
29
package/document/src/plugin/create-table.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import container from "markdown-it-container";
|
||||
import type Token from "markdown-it/lib/token";
|
||||
|
||||
type ContainerArgs = [
|
||||
typeof container,
|
||||
string,
|
||||
{ render(tokens: Token[], idx: number): string }
|
||||
];
|
||||
|
||||
export default function createContainer(
|
||||
klass: string,
|
||||
defaultTitle: string
|
||||
): ContainerArgs {
|
||||
return [
|
||||
container,
|
||||
klass,
|
||||
{
|
||||
render(tokens, idx) {
|
||||
const token = tokens[idx];
|
||||
const info = token.info.trim().slice(klass.length).trim();
|
||||
if (token.nesting === 1) {
|
||||
return `<lay-table-box>${info}`;
|
||||
} else {
|
||||
return "</lay-table-box>\n";
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
31
package/document/src/plugin/create-title.ts
Normal file
31
package/document/src/plugin/create-title.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import container from "markdown-it-container";
|
||||
import type Token from "markdown-it/lib/token";
|
||||
|
||||
type ContainerArgs = [
|
||||
typeof container,
|
||||
string,
|
||||
{ render(tokens: Token[], idx: number): string }
|
||||
];
|
||||
|
||||
export default function createContainer(
|
||||
klass: string,
|
||||
defaultTitle: string
|
||||
): ContainerArgs {
|
||||
return [
|
||||
container,
|
||||
klass,
|
||||
{
|
||||
render(tokens, idx) {
|
||||
const token = tokens[idx];
|
||||
const info = token.info.trim().slice(klass.length).trim();
|
||||
if (token.nesting === 1) {
|
||||
return `<lay-field id="${info || defaultTitle}" title="${
|
||||
info || defaultTitle
|
||||
}" style="margin-top:21px;margin-bottom: 20px;">`;
|
||||
} else {
|
||||
return "</lay-field>\n";
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
141
package/document/src/plugin/demo.ts
Normal file
141
package/document/src/plugin/demo.ts
Normal file
@@ -0,0 +1,141 @@
|
||||
import markdown from "markdown-it";
|
||||
import highlight from "./highlight";
|
||||
import type Token from "markdown-it/lib/token";
|
||||
|
||||
function assignScript(script: string) {
|
||||
const dependencies = {} as Record<string, string[]>;
|
||||
const attrs = {} as Record<string, string>;
|
||||
const content = script
|
||||
.replace(/import\s?\{.*\}.*/g, (item) => {
|
||||
const key = getInnerString(item.replace(/'/g, '"'), '"', '"');
|
||||
const value = getInnerString(item.replace(/\s+/g, ""), "{", "}");
|
||||
const list = value ? value.split(",") : [];
|
||||
if (key && dependencies[key]) {
|
||||
dependencies[key] = dependencies[key].concat(list);
|
||||
} else if (key) {
|
||||
dependencies[key] = list;
|
||||
}
|
||||
return "";
|
||||
})
|
||||
/**
|
||||
* const -> let
|
||||
*
|
||||
* const a = -> let a =
|
||||
* const a = -> a =
|
||||
*/
|
||||
.replace(/(const|let|var)\s\w*\s?=/g, (item) => {
|
||||
const attr = getInnerString(item, "\\s", "\\s?=");
|
||||
if (attr && !(attr in attrs)) {
|
||||
attrs[attr] = attr;
|
||||
return `let ${attr} =`;
|
||||
} else {
|
||||
return attr + " =";
|
||||
}
|
||||
})
|
||||
// Remove extra line breaks
|
||||
.replace(/\n+/gm, "\n");
|
||||
// Combine the import
|
||||
const reImport = Object.keys(dependencies).reduce((all, item) => {
|
||||
const filterAttrs = [...new Set(dependencies[item])];
|
||||
return all + `import {${filterAttrs + ","}} from '${item}';\n`;
|
||||
}, "");
|
||||
|
||||
return reImport + content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract part of the new string from the middle of the string
|
||||
* @param {string} string string
|
||||
* @param {string} prefix RegExp string
|
||||
* @param {string} postfix RegExp string
|
||||
* @param {string} type g | m | i
|
||||
*/
|
||||
function getInnerString(
|
||||
string: string,
|
||||
prefix: string,
|
||||
postfix = "",
|
||||
type: "i" | "g" | "m" = "i"
|
||||
): string | undefined {
|
||||
const result = new RegExp(`${prefix}(.*)${postfix}`, type);
|
||||
const match = string.match(result);
|
||||
return match ? match[1].trim() : undefined;
|
||||
}
|
||||
|
||||
let script = ""; // Record the <script> label of the current page
|
||||
|
||||
export default {
|
||||
render: (tokens: Token[], idx: number): string => {
|
||||
// the `demo` block of the current page
|
||||
const htmlBlock = tokens.filter((item) => item.type === "html_block");
|
||||
const { nesting, info = "", map } = tokens[idx];
|
||||
|
||||
if (nesting === -1) {
|
||||
return "</lay-code>";
|
||||
}
|
||||
|
||||
const matchedInfo = info.trim().match(/^demo\s+(.*)$/);
|
||||
const description = matchedInfo && matchedInfo[1];
|
||||
const descTemplate = markdown().render(description || "");
|
||||
let str = ""; // copy the current `demo` block code
|
||||
let lastLine = NaN;
|
||||
|
||||
for (let i = 0; i < htmlBlock.length; i++) {
|
||||
const item = htmlBlock[i];
|
||||
|
||||
if (item.map && map && item.map[0] >= map[0] && item.map[1] <= map[1]) {
|
||||
const { map, content } = item;
|
||||
const delta = map[0] - (lastLine || map[1]);
|
||||
|
||||
if (delta > 0) {
|
||||
str += "\n".repeat(delta);
|
||||
}
|
||||
str += content;
|
||||
lastLine = map[1];
|
||||
if (i === 0) {
|
||||
script = "";
|
||||
}
|
||||
// Remove top <template>
|
||||
if (/^<template>/.test(content)) {
|
||||
const reContent = content.match(/^<template>((\s|\S)*)<\/template>/m);
|
||||
|
||||
htmlBlock[i].content = (reContent && reContent[1]) || "";
|
||||
}
|
||||
// Extract the <script> label content
|
||||
if (content.includes("<script")) {
|
||||
if (/export\sdefault\s?\{/m.test(content)) {
|
||||
const setup = content.match(
|
||||
/setup\s?\(\)\s?\{((\s|\S)*)return\s?\{/m
|
||||
);
|
||||
const reContent = content.replace(
|
||||
/export\sdefault\s?\{((\s|\S)*)\}/m,
|
||||
(setup && setup[1]) || ""
|
||||
);
|
||||
const reScript = reContent.match(
|
||||
/^<script\s?.*?>((\s|\S)*)<\/script>/m
|
||||
);
|
||||
script += (reScript && reScript[1]) || "";
|
||||
} else {
|
||||
const reScript = content.match(
|
||||
/^<script\s?.*?>((\s|\S)*)<\/script>/m
|
||||
);
|
||||
script += (reScript && reScript[1]) || "";
|
||||
}
|
||||
htmlBlock[i].content = "";
|
||||
}
|
||||
// Change the last content to <script> of the current page
|
||||
if (i + 1 === htmlBlock.length) {
|
||||
htmlBlock[i].content = `
|
||||
<script setup>
|
||||
${assignScript(script)}
|
||||
</script>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return `
|
||||
<lay-code>
|
||||
${description ? `<template #description>${descTemplate}</template>` : ""}
|
||||
<template #code>${highlight(str, "vue")}</template>
|
||||
`;
|
||||
},
|
||||
};
|
||||
44
package/document/src/plugin/highlight.ts
Normal file
44
package/document/src/plugin/highlight.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import prism from "prismjs";
|
||||
import loadLanguages from "prismjs/components/index";
|
||||
import escapeHtml from "escape-html";
|
||||
|
||||
loadLanguages(["markup", "css", "javascript"]);
|
||||
|
||||
function wrap(code: string, lang: string): string {
|
||||
if (lang === "text") {
|
||||
code = escapeHtml(code);
|
||||
}
|
||||
return `<pre v-pre><code>${code}</code></pre>`;
|
||||
}
|
||||
|
||||
export default (str: string, lang: string): string => {
|
||||
if (!lang) {
|
||||
return wrap(str, "text");
|
||||
}
|
||||
lang = lang.toLowerCase();
|
||||
const rawLang = lang;
|
||||
if (lang === "vue" || lang === "html") {
|
||||
lang = "markup";
|
||||
}
|
||||
if (lang === "md") {
|
||||
lang = "markdown";
|
||||
}
|
||||
if (lang === "ts") {
|
||||
lang = "typescript";
|
||||
}
|
||||
if (lang === "py") {
|
||||
lang = "python";
|
||||
}
|
||||
if (!prism.languages[lang]) {
|
||||
try {
|
||||
loadLanguages([lang]);
|
||||
} catch (e) {
|
||||
console.warn(lang, e);
|
||||
}
|
||||
}
|
||||
if (prism.languages[lang]) {
|
||||
const code = prism.highlight(str, prism.languages[lang], lang);
|
||||
return wrap(code, rawLang);
|
||||
}
|
||||
return wrap(str, "text");
|
||||
};
|
||||
11
package/document/src/plugin/pre-wrapper.ts
Normal file
11
package/document/src/plugin/pre-wrapper.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import MarkdownIt from "markdown-it";
|
||||
|
||||
export default (md: MarkdownIt): void => {
|
||||
const fence = md.renderer.rules.fence!;
|
||||
md.renderer.rules.fence = (...args) => {
|
||||
const [tokens, idx] = args;
|
||||
const token = tokens[idx];
|
||||
const rawCode = fence(...args);
|
||||
return `<div class="language-${token.info.trim()}">${rawCode}</div>`;
|
||||
};
|
||||
};
|
||||
55
package/document/src/plugin/previous-next.ts
Normal file
55
package/document/src/plugin/previous-next.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
import container from "markdown-it-container";
|
||||
import type Token from "markdown-it/lib/token";
|
||||
import menus from "../view/utils/menus";
|
||||
type ContainerArgs = [
|
||||
typeof container,
|
||||
string,
|
||||
{
|
||||
render(tokens: Token[], idx: number): string;
|
||||
}
|
||||
];
|
||||
|
||||
export default function createContainer(
|
||||
klass: string,
|
||||
defaultTitle: string
|
||||
): ContainerArgs {
|
||||
return [
|
||||
container,
|
||||
klass,
|
||||
{
|
||||
render(tokens, idx) {
|
||||
const token = tokens[idx];
|
||||
const info = token.info.trim().slice(klass.length).trim();
|
||||
const menusChild = menus.map((item) => item.children).flat(1);
|
||||
let prevIndex = 0;
|
||||
let nextIndex = 0;
|
||||
menusChild.forEach((item, index) => {
|
||||
if (item.subTitle === info) {
|
||||
prevIndex = index - 1;
|
||||
nextIndex = index + 1;
|
||||
}
|
||||
});
|
||||
if (token.nesting === 1) {
|
||||
return `<div style="display: flex; justify-content: space-between; margin-top:20px;">
|
||||
<div><router-link to="${
|
||||
menusChild[prevIndex]?.path
|
||||
}" class="lay-link" style="display: ${
|
||||
prevIndex < 0 ? "none" : ""
|
||||
}"> <lay-icon type="layui-icon-left"/>${
|
||||
menusChild[prevIndex]?.title
|
||||
}</router-link></div>
|
||||
<div><router-link to="${
|
||||
menusChild[nextIndex]?.path
|
||||
}" class="lay-link" style="display: ${
|
||||
nextIndex >= menusChild.length ? "none" : ""
|
||||
}">${
|
||||
menusChild[nextIndex]?.title
|
||||
} <lay-icon type="layui-icon-right"/></router-link> </div>
|
||||
</div>`;
|
||||
} else {
|
||||
return ``;
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user