♻️(document): 调整文档结构
This commit is contained in:
就眠儀式
10
package/document-component/src/App.vue
Normal file
10
package/document-component/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-component/src/assets/background.svg
Normal file
33
package/document-component/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 |
158
package/document-component/src/assets/css/code.css
Normal file
158
package/document-component/src/assets/css/code.css
Normal file
@@ -0,0 +1,158 @@
|
||||
code {
|
||||
margin: 0;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(27, 31, 35, 0.05);
|
||||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
code .token.deleted {
|
||||
color: #ec5975;
|
||||
}
|
||||
|
||||
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;
|
||||
color: #303133;
|
||||
background-color: #fafafa;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 23px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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: #f5871f;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.class-name,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: #f5871f;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
38
package/document-component/src/assets/css/index.css
Normal file
38
package/document-component/src/assets/css/index.css
Normal file
@@ -0,0 +1,38 @@
|
||||
@import './code.css';
|
||||
@import './markdown.css';
|
||||
@import './mobile.css';
|
||||
|
||||
.layui-menu-lg li {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.layui-menu-lg .layui-menu-body-title a:hover,
|
||||
.layui-menu-lg li:hover {
|
||||
background: 0 0;
|
||||
color: var(--global-checked-color);
|
||||
}
|
||||
|
||||
.layui-menu-lg li .layui-menu-body-panel {
|
||||
margin-left: 14px;
|
||||
}
|
||||
|
||||
.layui-menu-lg li .layui-menu-body-panel-left {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.layui-menu .layui-menu-item-checked,
|
||||
.layui-menu .layui-menu-item-checked2 {
|
||||
background-color: var(--global-neutral-color-2) !important;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.layui-menu .layui-menu-item-checked a,
|
||||
.layui-menu .layui-menu-item-checked2 a {
|
||||
color: var(--global-checked-color);
|
||||
}
|
||||
|
||||
.layui-menu-body-title a {
|
||||
display: block;
|
||||
margin: -5px -15px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
243
package/document-component/src/assets/css/markdown.css
Normal file
243
package/document-component/src/assets/css/markdown.css
Normal file
@@ -0,0 +1,243 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
29
package/document-component/src/assets/css/mobile.css
Normal file
29
package/document-component/src/assets/css/mobile.css
Normal file
@@ -0,0 +1,29 @@
|
||||
@media screen and (max-width:768px) {
|
||||
#app > .layui-layout > .layui-header > .layui-logo {
|
||||
display: none;
|
||||
}
|
||||
#app > .layui-layout > .layui-header > .layui-layout-right {
|
||||
display: none;
|
||||
}
|
||||
#app > .layui-layout > .layui-header > .layui-layout-left {
|
||||
display: none;
|
||||
}
|
||||
#app > .layui-layout > .layui-layout > .layui-side {
|
||||
display: none;
|
||||
}
|
||||
#app > .layui-layout > .layui-layout > .layui-body {
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
}
|
||||
#app > .layui-layout > .layui-layout > .layui-body > div {
|
||||
padding: 10px!important;
|
||||
margin-right: 0px!important;
|
||||
width: calc(100% - 20px)!important;
|
||||
}
|
||||
#app > .layui-layout > .layui-layout > .layui-body .lay-aside {
|
||||
display: none;
|
||||
}
|
||||
.site-banner {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
BIN
package/document-component/src/assets/layui-logo.png
Normal file
BIN
package/document-component/src/assets/layui-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
package/document-component/src/assets/logo-new.png
Normal file
BIN
package/document-component/src/assets/logo-new.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
package/document-component/src/assets/logo-png.png
Normal file
BIN
package/document-component/src/assets/logo-png.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
BIN
package/document-component/src/assets/logo.jpg
Normal file
BIN
package/document-component/src/assets/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
package/document-component/src/assets/logo.png
Normal file
BIN
package/document-component/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
1
package/document-component/src/assets/start.svg
Normal file
1
package/document-component/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-component/src/components/LayAnchor.vue
Normal file
270
package/document-component/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 :thumbWidth="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 =
|
||||
// @ts-ignore
|
||||
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>
|
||||
203
package/document-component/src/components/LayCode.vue
Normal file
203
package/document-component/src/components/LayCode.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<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="运行代码"
|
||||
/>
|
||||
<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 "../composable/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 = async function () {
|
||||
const foundCodes = meta.value.getElementsByClassName("language-html");
|
||||
const foundCode = foundCodes[0];
|
||||
const SourceCode = foundCode.textContent || "";
|
||||
|
||||
const { link } = await 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
|
||||
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;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.lay-code .source {
|
||||
padding: 24px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.lay-code .meta {
|
||||
padding: 0 10px;
|
||||
height: 0;
|
||||
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;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
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: rgba(27, 31, 35, 0.05);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.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-color: white;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
}
|
||||
.lay-code .control.is-fixed {
|
||||
position: sticky;
|
||||
z-index: 11;
|
||||
bottom: 0;
|
||||
}
|
||||
.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>
|
||||
105
package/document-component/src/components/LayContributor.vue
Normal file
105
package/document-component/src/components/LayContributor.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="contributor">
|
||||
<lay-tooltip
|
||||
:content="contributor.login"
|
||||
v-for="contributor in contributors"
|
||||
:key="contributor.id"
|
||||
:is-dark="false"
|
||||
>
|
||||
<a :href="contributor.htmlUrl" target="_blank">
|
||||
<lay-avatar :src="contributor.avatarUrl" radius></lay-avatar>
|
||||
</a>
|
||||
</lay-tooltip>
|
||||
</div>
|
||||
<lay-tooltip content="在线编辑" :is-dark="false">
|
||||
<a
|
||||
class="online-edit"
|
||||
:href="
|
||||
'https://github.com/layui/layui-vue/edit/next/package/document/src/document/zh-CN/components/' +
|
||||
filePath +
|
||||
'.md'
|
||||
"
|
||||
target="_blank"
|
||||
>
|
||||
<lay-icon type="layui-icon-edit"></lay-icon>
|
||||
</a>
|
||||
</lay-tooltip>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import axios from "axios";
|
||||
import { Ref, ref } from "vue";
|
||||
|
||||
export interface LayContributor {
|
||||
filePath: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayContributor>(), {
|
||||
filePath: "",
|
||||
});
|
||||
|
||||
const suffix = ".md";
|
||||
const githubAPI =
|
||||
"https://api.github.com/repos/layui/layui-vue/commits?path=/package/document/src/document/zh-CN/components/";
|
||||
const contributors: Ref<any> = ref([]);
|
||||
|
||||
var compare = function (x: any, y: any) {
|
||||
if (x.commits < y.commits) {
|
||||
return 1;
|
||||
} else if (x.commits > y.commits) {
|
||||
return -1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
};
|
||||
|
||||
const fetchContributors = () => {
|
||||
axios.get(githubAPI + props.filePath + suffix).then((result) => {
|
||||
const topic: any[] = [];
|
||||
result.data.forEach((item: any) => {
|
||||
if (item.committer) {
|
||||
const itemdata = {
|
||||
id: item.committer["id"],
|
||||
login: item.committer["login"],
|
||||
avatarUrl: item.committer["avatar_url"],
|
||||
htmlUrl: item.committer["html_url"],
|
||||
commits: 1,
|
||||
};
|
||||
if (topic.some((e) => e.id == itemdata.id)) {
|
||||
topic.forEach((item) => {
|
||||
if (item.id === itemdata.id) {
|
||||
item.commits = item.commits + 1;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
topic.push(itemdata);
|
||||
}
|
||||
}
|
||||
});
|
||||
contributors.value = topic.sort(compare);
|
||||
});
|
||||
};
|
||||
|
||||
fetchContributors();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.contributor {
|
||||
text-align: left;
|
||||
margin: 30px 15px 30px 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.contributor a {
|
||||
height: 40px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.contributor img {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.online-edit {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
66
package/document-component/src/components/LaySearch.vue
Normal file
66
package/document-component/src/components/LaySearch.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<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>
|
||||
38
package/document-component/src/components/LayTableBox.vue
Normal file
38
package/document-component/src/components/LayTableBox.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<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>
|
||||
133
package/document-component/src/composable/usePlayground.ts
Normal file
133
package/document-component/src/composable/usePlayground.ts
Normal file
@@ -0,0 +1,133 @@
|
||||
import type { BuiltInParserName } from "prettier";
|
||||
|
||||
const scriptRe = /<script[^>]*>([\s\S]*)<\/script>/;
|
||||
const exportDefaultRe = /export\s*default\s*\{([\s\S]*)\}\;?\s*<\/script>/;
|
||||
const setupRe = /setup\s*\(\)\s*\{([\s\S]*)return\s*\{([\s\S]*)\}\;?\s*\}\;?/;
|
||||
const layerRe =
|
||||
/import\s?\{\s?layer\s?\}\s?from\s?[\"|\']\@layui\/layer-vue[\"|\']/;
|
||||
|
||||
// danger: 以下字符串拼接代码不可改动缩进或换行,否则会影响 URI hash 解码后代码的排版
|
||||
const MAIN_FILE_NAME = "App.vue";
|
||||
|
||||
/**
|
||||
* 将代码编码为 URI hash, 生成 playground 链接
|
||||
* @param source 源码
|
||||
* @param convertSetupSugar 转换 setup，仅字符串替换，没有做任何语法分析
|
||||
* @returns 处理后的代码，URI hsah， playground 链接
|
||||
}
|
||||
*/
|
||||
export const usePlayGround = async (
|
||||
source: string,
|
||||
convertSetupSugar: boolean
|
||||
) => {
|
||||
const decodeCode = source;
|
||||
const scriptResult = decodeCode.match(scriptRe);
|
||||
|
||||
// 替换 script 标签
|
||||
// $1 正则第一个括号匹配的内容
|
||||
let code: string | undefined = decodeCode;
|
||||
if (convertSetupSugar) {
|
||||
if (scriptResult) {
|
||||
code = decodeCode.replace(
|
||||
scriptRe,
|
||||
`<script lang="ts" setup>$1
|
||||
</script>`
|
||||
);
|
||||
} else {
|
||||
code = `${decodeCode}
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>`;
|
||||
}
|
||||
|
||||
// 去除 export default,保留其中的内容
|
||||
const exportDefaultResult = code.match(exportDefaultRe);
|
||||
if (exportDefaultResult) {
|
||||
code = code.replace(
|
||||
exportDefaultRe,
|
||||
trimBr(exportDefaultResult[1] + `</script>`).trim()
|
||||
);
|
||||
// console.log("export",code);
|
||||
}
|
||||
// 去除 setup 函数,保留其中的内容
|
||||
const setupResult = code.match(setupRe);
|
||||
if (setupResult) {
|
||||
code = code.replace(setupRe, trimBr(setupResult[1]));
|
||||
// console.log("setup",code);
|
||||
}
|
||||
}
|
||||
// 替换 layer 引入语句
|
||||
// playground 中使用最新版 layer 请从 @layui/layer-vue 引入
|
||||
if (code.match(layerRe)) {
|
||||
code = code.replace(layerRe, `import { layer } from "@layui/layui-vue"`);
|
||||
// console.log("layer",code);
|
||||
}
|
||||
|
||||
code = await formatCode(MAIN_FILE_NAME, code);
|
||||
const originCode = {
|
||||
[MAIN_FILE_NAME]: code,
|
||||
};
|
||||
|
||||
const encoded = utoa(JSON.stringify(originCode));
|
||||
const link = `https://layui-vue.gitee.io/sandbox-vue/#${encoded}`;
|
||||
return {
|
||||
code,
|
||||
encoded,
|
||||
link,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 编码
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
function utoa(data: string): string {
|
||||
return btoa(unescape(encodeURIComponent(data)));
|
||||
}
|
||||
|
||||
/**
|
||||
* 去除字符串两端的空白行
|
||||
* @param str
|
||||
* @returns
|
||||
*/
|
||||
function trimBr(str: string): string {
|
||||
return str.replace(/(^[\r\n]*)|([\r\n]*$)/, "");
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns 格式化代码
|
||||
*/
|
||||
async function formatCode(filename: string, data: string) {
|
||||
const [format, parserHtml, parserTypeScript, parserBabel, parserPostcss] =
|
||||
await Promise.all([
|
||||
import("prettier/standalone").then((r) => r.format),
|
||||
import("prettier/parser-html").then((m) => m.default),
|
||||
import("prettier/parser-typescript").then((m) => m.default),
|
||||
import("prettier/parser-babel").then((m) => m.default),
|
||||
import("prettier/parser-postcss").then((m) => m.default),
|
||||
]);
|
||||
let code = data;
|
||||
let parser: BuiltInParserName;
|
||||
if (filename.endsWith(".vue")) {
|
||||
parser = "vue";
|
||||
} else if (filename.endsWith(".js")) {
|
||||
parser = "babel";
|
||||
} else if (filename.endsWith(".ts")) {
|
||||
parser = "typescript";
|
||||
} else if (filename.endsWith(".json")) {
|
||||
parser = "json";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
code = format(code, {
|
||||
parser,
|
||||
plugins: [parserHtml, parserTypeScript, parserBabel, parserPostcss],
|
||||
semi: false, // 语句末尾打印分号
|
||||
singleQuote: true, // 使用单引号
|
||||
vueIndentScriptAndStyle: false, // 是否缩进 Vue 文件中的 script 和 style 标签
|
||||
});
|
||||
|
||||
return code;
|
||||
}
|
||||
0
package/document-component/src/document/.keep
Normal file
0
package/document-component/src/document/.keep
Normal file
@@ -0,0 +1,122 @@
|
||||
::: 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" @click="replay($event,'layui-anim-fadeout')">渐隐</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, animClass) => {
|
||||
const el = e.currentTarget;
|
||||
const targetClass = el.classList[1];
|
||||
if(!targetClass){
|
||||
el.classList.add(animClass);
|
||||
}else{
|
||||
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` |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor animation
|
||||
:::
|
||||
|
||||
::: previousNext animation
|
||||
:::
|
||||
@@ -0,0 +1,143 @@
|
||||
::: 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/1611/4835367_Jmysy_1578975358.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/1611/4835367_Jmysy_1578975358.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/1611/4835367_Jmysy_1578975358.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/1611/4835367_Jmysy_1578975358.png"
|
||||
|
||||
return {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Avatar 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ------ | ---- | -------------- |
|
||||
| src | 图源 | -- |
|
||||
| size | 尺寸 | `xs` `sm` `lg` |
|
||||
| radius | 圆形 | `true` `false` |
|
||||
| alt | 描述图像的替换文本 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor avatar
|
||||
:::
|
||||
|
||||
::: previousNext avatar
|
||||
:::
|
||||
@@ -0,0 +1,138 @@
|
||||
::: 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| 自定义内容 |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor backtop
|
||||
:::
|
||||
|
||||
::: previousNext backtop
|
||||
:::
|
||||
@@ -0,0 +1,94 @@
|
||||
::: 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 动画
|
||||
:::
|
||||
|
||||
::: demo 使用 `ripple` 属性, 添加水波纹动画, 仅支持 `dot` 类型
|
||||
<template>
|
||||
<lay-badge type="dot" ripple></lay-badge>
|
||||
<lay-badge type="dot" theme="orange" ripple></lay-badge>
|
||||
<lay-badge type="dot" theme="green" ripple></lay-badge>
|
||||
<lay-badge type="dot" theme="cyan" ripple></lay-badge>
|
||||
<lay-badge type="dot" theme="blue" ripple></lay-badge>
|
||||
<lay-badge type="dot" theme="black" ripple></lay-badge>
|
||||
<lay-badge type="dot" theme="gray" ripple></lay-badge>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
:::
|
||||
|
||||
|
||||
::: title Badge 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----- | ---- | --------------------------------------------- |
|
||||
| type | 类型 | `dot` `rim` |
|
||||
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Badge 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 备注 |
|
||||
| ----- | ---- | --------------------------------------------- |
|
||||
| default | 默认 | 非 `dot` 可用 |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor badge
|
||||
:::
|
||||
|
||||
::: previousNext badge
|
||||
:::
|
||||
@@ -0,0 +1,117 @@
|
||||
::: 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 | 默认插槽 | `--` |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor breadcrumb
|
||||
:::
|
||||
|
||||
::: previousNext breadcrumb
|
||||
:::
|
||||
@@ -0,0 +1,376 @@
|
||||
::: 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 使用 `border-style` 属性设置边框样式
|
||||
|
||||
<template>
|
||||
<lay-button border-style="dashed">原始按钮</lay-button>
|
||||
<lay-button border="green" border-style="dashed">默认按钮</lay-button>
|
||||
<lay-button border="blue" border-style="dashed">百搭按钮</lay-button>
|
||||
<lay-button border="orange" border-style="dashed">暖色按钮</lay-button>
|
||||
<lay-button border="red" border-style="dashed">警告按钮</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="true">原始按钮</lay-button>
|
||||
<lay-button type="default" radius="true">默认按钮</lay-button>
|
||||
<lay-button type="normal" radius="true">百搭按钮</lay-button>
|
||||
<lay-button type="warm" radius="true">暖色按钮</lay-button>
|
||||
<lay-button type="danger" radius="true">警告按钮</lay-button>
|
||||
<lay-button disabled radius="true">禁用按钮</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` |
|
||||
| border-style | 边框样式 | string | `soild` | `soild` `dashed` `dotted` |
|
||||
| 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 | 默认内容 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor button
|
||||
:::
|
||||
|
||||
::: previousNext button
|
||||
:::
|
||||
228
package/document-component/src/document/zh-CN/components/card.md
Normal file
228
package/document-component/src/document/zh-CN/components/card.md
Normal file
@@ -0,0 +1,228 @@
|
||||
::: 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 | 标题 | `string` | -- | -- |
|
||||
| shadow | 阴影 | `string` | `always` | `always` `hover` `never` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Card 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 可选值 |
|
||||
| ------- | -------- | ------ |
|
||||
| default | 默认插槽 | -- |
|
||||
| header | 头部插槽 | -- |
|
||||
| body | 内容插槽 | -- |
|
||||
| extra | 扩展插槽 | -- |
|
||||
:::
|
||||
|
||||
::: contributor card
|
||||
:::
|
||||
|
||||
::: previousNext card
|
||||
:::
|
||||
@@ -0,0 +1,220 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-carousel v-model="active1">
|
||||
<lay-carousel-item id="1">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#009688;">条目一</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:#5FB878;">条目二</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:#FFB800;">条目三</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:#FF5722;">条目四</div>
|
||||
</lay-carousel-item>
|
||||
</lay-carousel>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const active1 = ref("1")
|
||||
|
||||
return {
|
||||
active1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 不同方向与不同切换动画
|
||||
:::
|
||||
|
||||
::: demo 通过 `anim` 属性来控制切换的放向与动画，支持 `default`左右切换(默认)、`updown`上线切换、`fade`渐隐渐显切换
|
||||
|
||||
<template>
|
||||
<div style="display:flex;justify-content: space-around;flex-wrap:wrap">
|
||||
<lay-carousel v-model="activeAnmi1" anim="updown" style="display:inline-block;width:32%" :autoplay="true">
|
||||
<lay-carousel-item id="1">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#009688;">条目一</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:#5FB878;">条目二</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:#FFB800;">条目三</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:#FF5722;">条目四</div>
|
||||
</lay-carousel-item>
|
||||
</lay-carousel>
|
||||
<lay-carousel v-model="activeAnmi2" style="width:32%">
|
||||
<lay-carousel-item id="1">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#009688;">条目一</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:#5FB878;">条目二</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:#FFB800;">条目三</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:#FF5722;">条目四</div>
|
||||
</lay-carousel-item>
|
||||
</lay-carousel>
|
||||
<lay-carousel v-model="activeAnmi3" anim="fade" style="width:32%;">
|
||||
<lay-carousel-item id="1">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#009688;">条目一</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:#5FB878;">条目二</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:#FFB800;">条目三</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:#FF5722;">条目四</div>
|
||||
</lay-carousel-item>
|
||||
</lay-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const activeAnmi1 = ref("1")
|
||||
const activeAnmi2 = ref("1")
|
||||
const activeAnmi3 = ref("1")
|
||||
return {
|
||||
activeAnmi1,activeAnmi2,activeAnmi3,activeAnmi4
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 控制器位置
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-carousel v-model="active3" indicator="outside">
|
||||
<lay-carousel-item id="1">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#009688;">条目一</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:#5FB878;">条目二</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:#FFB800;">条目三</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:#FF5722;">条目四</div>
|
||||
</lay-carousel-item>
|
||||
</lay-carousel>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const active3 = ref("1")
|
||||
|
||||
return {
|
||||
active3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 动态遍历
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-carousel v-model="active4">
|
||||
<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 active4 = ref("1")
|
||||
|
||||
const arrays = ref([
|
||||
{id: "1", text: "1️⃣"},
|
||||
{id: "2", text: "2️⃣"},
|
||||
{id: "3", text: "3️⃣"},
|
||||
{id: "4", text: "4️⃣"}
|
||||
])
|
||||
|
||||
return {
|
||||
active4,
|
||||
arrays
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Carousel 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 |类型 |可选值 |
|
||||
| --------- | ------------ |--------------| --------------- | -------------------------|
|
||||
| v-model | 当前激活项 | `number` | -- | -- |
|
||||
| anim | 切换方向 | `string` | `default` | `default` `updown` `fade` |
|
||||
| indicator | 控制器位置 | `string` | `inside` |`inside` `outside` `none` |
|
||||
| arrow | 切换按钮状态 | `string` | `hover` |`hover` `always` `none` |
|
||||
| autoplay | 自动播放 | `boolean` | `true` | `true` `false` |
|
||||
| interval | 轮播间隔 | `number` | `3000` | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Carousel 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 可选值 |
|
||||
| ------ | -------- | ------ |
|
||||
| change | 切换回调 | id |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor carousel
|
||||
:::
|
||||
|
||||
::: previousNext carousel
|
||||
:::
|
||||
@@ -0,0 +1,647 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 将数据按照指定的格式传入后分层分级，通过此组件逐级查看并选择。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-cascader` 标签创建级联选择器
|
||||
|
||||
<template>
|
||||
<lay-cascader :options="options" v-model="value" placeholder="点我试一试" style="width:250px">
|
||||
</lay-cascader>
|
||||
<span style="margin-left:20px">输出的值：{{value}}</span>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const value=ref(null)
|
||||
const options = [
|
||||
{
|
||||
value: "Guide",
|
||||
label: "指南",
|
||||
children: [
|
||||
{
|
||||
value: "shejiyuanze",
|
||||
label: "设计原则",
|
||||
children: [
|
||||
{
|
||||
value: "yizhi",
|
||||
label: "一致",
|
||||
},
|
||||
{
|
||||
value: "fankui",
|
||||
label: "反馈",
|
||||
},
|
||||
{
|
||||
value: "xiaolv",
|
||||
label: "效率",
|
||||
},
|
||||
{
|
||||
value: "kekong",
|
||||
label: "可控",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "daohang",
|
||||
label: "导航",
|
||||
children: [
|
||||
{
|
||||
value: "cexiangdaohang",
|
||||
label: "侧向导航",
|
||||
},
|
||||
{
|
||||
value: "dingbudaohang",
|
||||
label: "顶部导航",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "Components",
|
||||
label: "组件",
|
||||
children: [
|
||||
{
|
||||
value: "basic",
|
||||
label: "Basic",
|
||||
children: [
|
||||
{
|
||||
value: "layout",
|
||||
label: "Layout 布局",
|
||||
},
|
||||
{
|
||||
value: "color",
|
||||
label: "Color 色彩",
|
||||
},
|
||||
{
|
||||
value: "typography",
|
||||
label: "Typography 字体",
|
||||
},
|
||||
{
|
||||
value: "icon",
|
||||
label: "Icon 图标",
|
||||
},
|
||||
{
|
||||
value: "button",
|
||||
label: "Button 按钮",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form",
|
||||
children: [
|
||||
{
|
||||
value: "radio",
|
||||
label: "Radio 单选框",
|
||||
},
|
||||
{
|
||||
value: "checkbox",
|
||||
label: "Checkbox 多选框",
|
||||
},
|
||||
{
|
||||
value: "input",
|
||||
label: "Input 输入框",
|
||||
},
|
||||
{
|
||||
value: "input-number",
|
||||
label: "InputNumber 计数器",
|
||||
},
|
||||
{
|
||||
value: "select",
|
||||
label: "Select 选择器",
|
||||
},
|
||||
{
|
||||
value: "cascader",
|
||||
label: "Cascader 级联选择器",
|
||||
},
|
||||
{
|
||||
value: "switch",
|
||||
label: "Switch 开关",
|
||||
},
|
||||
{
|
||||
value: "slider",
|
||||
label: "Slider 滑块",
|
||||
},
|
||||
{
|
||||
value: "time-picker",
|
||||
label: "TimePicker 时间选择器",
|
||||
},
|
||||
{
|
||||
value: "date-picker",
|
||||
label: "DatePicker 日期选择器",
|
||||
},
|
||||
{
|
||||
value: "datetime-picker",
|
||||
label: "DateTimePicker 日期时间选择器",
|
||||
},
|
||||
{
|
||||
value: "upload",
|
||||
label: "Upload 上传",
|
||||
},
|
||||
{
|
||||
value: "rate",
|
||||
label: "Rate 评分",
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form 表单",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "data",
|
||||
label: "Data",
|
||||
children: [
|
||||
{
|
||||
value: "table",
|
||||
label: "Table 表格",
|
||||
},
|
||||
{
|
||||
value: "tag",
|
||||
label: "Tag 标签",
|
||||
},
|
||||
{
|
||||
value: "progress",
|
||||
label: "Progress 进度条",
|
||||
},
|
||||
{
|
||||
value: "tree",
|
||||
label: "Tree 树形控件",
|
||||
},
|
||||
{
|
||||
value: "pagination",
|
||||
label: "Pagination 分页",
|
||||
},
|
||||
{
|
||||
value: "badge",
|
||||
label: "Badge 标记",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "notice",
|
||||
label: "Notice",
|
||||
children: [
|
||||
{
|
||||
value: "alert",
|
||||
label: "Alert 警告",
|
||||
},
|
||||
{
|
||||
value: "loading",
|
||||
label: "Loading 加载",
|
||||
},
|
||||
{
|
||||
value: "message",
|
||||
label: "Message 消息提示",
|
||||
},
|
||||
{
|
||||
value: "message-box",
|
||||
label: "MessageBox 弹框",
|
||||
},
|
||||
{
|
||||
value: "notification",
|
||||
label: "Notification 通知",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "navigation",
|
||||
label: "Navigation",
|
||||
children: [
|
||||
{
|
||||
value: "menu",
|
||||
label: "NavMenu 导航菜单",
|
||||
},
|
||||
{
|
||||
value: "tabs",
|
||||
label: "Tabs 标签页",
|
||||
},
|
||||
{
|
||||
value: "breadcrumb",
|
||||
label: "Breadcrumb 面包屑",
|
||||
},
|
||||
{
|
||||
value: "dropdown",
|
||||
label: "Dropdown 下拉菜单",
|
||||
},
|
||||
{
|
||||
value: "steps",
|
||||
label: "Steps 步骤条",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "others",
|
||||
label: "Others",
|
||||
children: [
|
||||
{
|
||||
value: "dialog",
|
||||
label: "Dialog 对话框",
|
||||
},
|
||||
{
|
||||
value: "tooltip",
|
||||
label: "Tooltip 文字提示",
|
||||
},
|
||||
{
|
||||
value: "popover",
|
||||
label: "Popover 弹出框",
|
||||
},
|
||||
{
|
||||
value: "card",
|
||||
label: "Card 卡片",
|
||||
},
|
||||
{
|
||||
value: "carousel",
|
||||
label: "Carousel 走马灯",
|
||||
},
|
||||
{
|
||||
value: "collapse",
|
||||
label: "Collapse 折叠面板",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "Resource",
|
||||
label: "资源",
|
||||
children: [
|
||||
{
|
||||
value: "axure",
|
||||
label: "Axure Components",
|
||||
},
|
||||
{
|
||||
value: "sketch",
|
||||
label: "Sketch Templates",
|
||||
},
|
||||
{
|
||||
value: "jiaohu",
|
||||
label: "组件交互文档",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 自定义分割符号
|
||||
:::
|
||||
::: demo 使用 `decollator` 属性 自定义分割符号
|
||||
<template>
|
||||
<lay-cascader :options="options" v-model="value1" decollator="-" placeholder="我可以自定义分割符号" style="width:250px"></lay-cascader>
|
||||
<span style="margin-left:20px">输出的值：{{value1}}</span>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const value1=ref(null)
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: title 触发方式
|
||||
:::
|
||||
::: demo 本组弹出效果依托于DropDown组件，触发方式与其保持一致
|
||||
<template>
|
||||
<lay-cascader :options="options" placeholder="click触发(默认)" style="width:250px;margin-right:20px"></lay-cascader>
|
||||
<lay-cascader :options="options" placeholder="hover触发" style="width:250px;margin-right:20px" trigger="hover"></lay-cascader>
|
||||
<lay-cascader :options="options" placeholder="右键触发" style="width:250px" trigger="contextMenu"></lay-cascader>
|
||||
</template>
|
||||
:::
|
||||
|
||||
|
||||
::: title Cascader 插槽
|
||||
:::
|
||||
::: demo 使用 `默认插槽` 可以自定义回显区域的内容,并且你可以通过change回调轻松拿到回显的值，同时你也可以使用`动态插槽名`来自定义你想要展示的内容，只需要在传入的数据中加入 `slot`参数，然后愉快的使用插槽自定义内容
|
||||
<template>
|
||||
<lay-cascader :options="options" v-model="value2" @change="onChange">
|
||||
<lay-button type="normal">Click me ❤️</lay-button>
|
||||
<lay-badge theme="orange" v-if="displayValue" style="margin-left:10px">{{displayValue}}</lay-badge>
|
||||
</lay-cascader>
|
||||
<lay-cascader :options="options2" v-model="value" placeholder="动态插槽案例" style="width:250px;margin-left:20px">
|
||||
<template #Guide>🤨😐😑😶😏😒🙄😬🤥😌</template>
|
||||
<template #Components>👋🤚🖐️✋🖖👌🤌🤏🤞🤟</template>
|
||||
<template #Resource>📱📲📶📳📴☎📞📟📠🤳</template>
|
||||
</lay-cascader>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const value2=ref(null)
|
||||
const displayValue=ref(null)
|
||||
const onChange=(val)=>{
|
||||
displayValue.value=val
|
||||
}
|
||||
const options2 = [
|
||||
{
|
||||
value: "Guide",
|
||||
label: "指南",
|
||||
slot:"Guide",
|
||||
children: [
|
||||
{
|
||||
value: "shejiyuanze",
|
||||
label: "设计原则",
|
||||
children: [
|
||||
{
|
||||
value: "yizhi",
|
||||
label: "一致",
|
||||
},
|
||||
{
|
||||
value: "fankui",
|
||||
label: "反馈",
|
||||
},
|
||||
{
|
||||
value: "xiaolv",
|
||||
label: "效率",
|
||||
},
|
||||
{
|
||||
value: "kekong",
|
||||
label: "可控",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "daohang",
|
||||
label: "导航",
|
||||
children: [
|
||||
{
|
||||
value: "cexiangdaohang",
|
||||
label: "侧向导航",
|
||||
},
|
||||
{
|
||||
value: "dingbudaohang",
|
||||
label: "顶部导航",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "Components",
|
||||
label: "组件",
|
||||
slot:"Components",
|
||||
children: [
|
||||
{
|
||||
value: "basic",
|
||||
label: "Basic",
|
||||
children: [
|
||||
{
|
||||
value: "layout",
|
||||
label: "Layout 布局",
|
||||
},
|
||||
{
|
||||
value: "color",
|
||||
label: "Color 色彩",
|
||||
},
|
||||
{
|
||||
value: "typography",
|
||||
label: "Typography 字体",
|
||||
},
|
||||
{
|
||||
value: "icon",
|
||||
label: "Icon 图标",
|
||||
},
|
||||
{
|
||||
value: "button",
|
||||
label: "Button 按钮",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form",
|
||||
children: [
|
||||
{
|
||||
value: "radio",
|
||||
label: "Radio 单选框",
|
||||
},
|
||||
{
|
||||
value: "checkbox",
|
||||
label: "Checkbox 多选框",
|
||||
},
|
||||
{
|
||||
value: "input",
|
||||
label: "Input 输入框",
|
||||
},
|
||||
{
|
||||
value: "input-number",
|
||||
label: "InputNumber 计数器",
|
||||
},
|
||||
{
|
||||
value: "select",
|
||||
label: "Select 选择器",
|
||||
},
|
||||
{
|
||||
value: "cascader",
|
||||
label: "Cascader 级联选择器",
|
||||
},
|
||||
{
|
||||
value: "switch",
|
||||
label: "Switch 开关",
|
||||
},
|
||||
{
|
||||
value: "slider",
|
||||
label: "Slider 滑块",
|
||||
},
|
||||
{
|
||||
value: "time-picker",
|
||||
label: "TimePicker 时间选择器",
|
||||
},
|
||||
{
|
||||
value: "date-picker",
|
||||
label: "DatePicker 日期选择器",
|
||||
},
|
||||
{
|
||||
value: "datetime-picker",
|
||||
label: "DateTimePicker 日期时间选择器",
|
||||
},
|
||||
{
|
||||
value: "upload",
|
||||
label: "Upload 上传",
|
||||
},
|
||||
{
|
||||
value: "rate",
|
||||
label: "Rate 评分",
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form 表单",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "data",
|
||||
label: "Data",
|
||||
children: [
|
||||
{
|
||||
value: "table",
|
||||
label: "Table 表格",
|
||||
},
|
||||
{
|
||||
value: "tag",
|
||||
label: "Tag 标签",
|
||||
},
|
||||
{
|
||||
value: "progress",
|
||||
label: "Progress 进度条",
|
||||
},
|
||||
{
|
||||
value: "tree",
|
||||
label: "Tree 树形控件",
|
||||
},
|
||||
{
|
||||
value: "pagination",
|
||||
label: "Pagination 分页",
|
||||
},
|
||||
{
|
||||
value: "badge",
|
||||
label: "Badge 标记",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "notice",
|
||||
label: "Notice",
|
||||
children: [
|
||||
{
|
||||
value: "alert",
|
||||
label: "Alert 警告",
|
||||
},
|
||||
{
|
||||
value: "loading",
|
||||
label: "Loading 加载",
|
||||
},
|
||||
{
|
||||
value: "message",
|
||||
label: "Message 消息提示",
|
||||
},
|
||||
{
|
||||
value: "message-box",
|
||||
label: "MessageBox 弹框",
|
||||
},
|
||||
{
|
||||
value: "notification",
|
||||
label: "Notification 通知",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "navigation",
|
||||
label: "Navigation",
|
||||
children: [
|
||||
{
|
||||
value: "menu",
|
||||
label: "NavMenu 导航菜单",
|
||||
},
|
||||
{
|
||||
value: "tabs",
|
||||
label: "Tabs 标签页",
|
||||
},
|
||||
{
|
||||
value: "breadcrumb",
|
||||
label: "Breadcrumb 面包屑",
|
||||
},
|
||||
{
|
||||
value: "dropdown",
|
||||
label: "Dropdown 下拉菜单",
|
||||
},
|
||||
{
|
||||
value: "steps",
|
||||
label: "Steps 步骤条",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "others",
|
||||
label: "Others",
|
||||
children: [
|
||||
{
|
||||
value: "dialog",
|
||||
label: "Dialog 对话框",
|
||||
},
|
||||
{
|
||||
value: "tooltip",
|
||||
label: "Tooltip 文字提示",
|
||||
},
|
||||
{
|
||||
value: "popover",
|
||||
label: "Popover 弹出框",
|
||||
},
|
||||
{
|
||||
value: "card",
|
||||
label: "Card 卡片",
|
||||
},
|
||||
{
|
||||
value: "carousel",
|
||||
label: "Carousel 走马灯",
|
||||
},
|
||||
{
|
||||
value: "collapse",
|
||||
label: "Collapse 折叠面板",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "Resource",
|
||||
label: "资源",
|
||||
slot:"Resource",
|
||||
children: [
|
||||
{
|
||||
value: "axure",
|
||||
label: "Axure Components",
|
||||
},
|
||||
{
|
||||
value: "sketch",
|
||||
label: "Sketch Templates",
|
||||
},
|
||||
{
|
||||
value: "jiaohu",
|
||||
label: "组件交互文档",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Cascader 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 |
|
||||
| ----------------------- | -------------------- |
|
||||
| placeholder | 提示信息 |
|
||||
| v-model / modelValue | 值 |
|
||||
| decollator | 分割符号，默认为 / |
|
||||
| options | 选项参数 格式请见上面的demo |
|
||||
|
||||
:::
|
||||
|
||||
::: title Cascader 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 |
|
||||
| ---- | ------------ |
|
||||
| change | 选中后数据改变的回调 |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor cascader
|
||||
:::
|
||||
|
||||
::: previousNext cascader
|
||||
:::
|
||||
@@ -0,0 +1,241 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 在一组可选项中进行多项选择时。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-checkbox` 标签, 创建一个复选框
|
||||
|
||||
<template>
|
||||
<lay-checkbox name="like" skin="primary" v-model="checked1" label="1" ></lay-checkbox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const checked1 = ref(false)
|
||||
|
||||
return {
|
||||
checked1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 默认样式
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-checkbox name="like" label="1" v-model="checked2" >普通</lay-checkbox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const checked2 = ref(false)
|
||||
|
||||
return {
|
||||
checked2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 复选框组
|
||||
:::
|
||||
|
||||
::: demo 方便通过数组生成 checkbox 复选框。
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</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-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>
|
||||
</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-checkbox name="like" skin="primary" label="1" :disabled="disabled" v-model="checked6">禁用</lay-checkbox>
|
||||
</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-checkbox name="like" skin="primary" label="1" @change="change" v-model="checked7">回调</lay-checkbox>
|
||||
</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 半选状态
|
||||
:::
|
||||
|
||||
::: demo 在实现全选效果时，你可能会用到 indeterminate 属性。
|
||||
|
||||
<template>
|
||||
<lay-checkbox name="like" skin="primary" label="1" isIndeterminate="true" v-model="checked8">半选</lay-checkbox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const checked8 = ref(true);
|
||||
|
||||
return {
|
||||
checked8
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Checkbox 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ------------------- | ------------- | -------------------- |
|
||||
| name | 原始属性 name | -- |
|
||||
| skin | 主题 | -- |
|
||||
| label | 选中值 | -- |
|
||||
| v-model | 是否选中 | `true` `false` |
|
||||
| isIndeterminate | 半选状态 | `true` `false` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Checkbox 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 可选值 |
|
||||
| ------ | -------- | -------------------- |
|
||||
| change | 切换事件 | isChecked : 当前状态 |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor checkbox
|
||||
:::
|
||||
|
||||
::: previousNext checkbox
|
||||
:::
|
||||
@@ -0,0 +1,256 @@
|
||||
::: 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}` |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor collapse
|
||||
:::
|
||||
|
||||
::: previousNext collapse
|
||||
:::
|
||||
@@ -0,0 +1,177 @@
|
||||
::: 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" |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor color
|
||||
:::
|
||||
|
||||
::: previousNext color
|
||||
:::
|
||||
@@ -0,0 +1,99 @@
|
||||
::: 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 取色器
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-color-picker v-model="color" eyeDropper></lay-color-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "vue";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const color = ref("#009688");
|
||||
|
||||
return {
|
||||
color
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Icon Picker 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| | | |
|
||||
| ---------- | -------- | --- |
|
||||
| v-model | 选中色 | -- |
|
||||
| preset | 预设颜色 | -- |
|
||||
| eyeDropper | 取色器 | Boolean |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor colorPicker
|
||||
:::
|
||||
|
||||
::: previousNext colorPicker
|
||||
:::
|
||||
@@ -0,0 +1,90 @@
|
||||
::: 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: 按钮组 } |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor confirm
|
||||
:::
|
||||
|
||||
::: previousNext confirm
|
||||
:::
|
||||
@@ -0,0 +1,92 @@
|
||||
::: 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 | 流模式 | `boolean` `string` | `flase` | `true` `false` |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor container
|
||||
:::
|
||||
|
||||
::: previousNext container
|
||||
:::
|
||||
@@ -0,0 +1,157 @@
|
||||
::: 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
|
||||
```
|
||||
::: contributor countUp
|
||||
:::
|
||||
|
||||
::: previousNext countUp
|
||||
:::
|
||||
@@ -0,0 +1,245 @@
|
||||
::: 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 | — |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor datePicker
|
||||
:::
|
||||
|
||||
::: previousNext datePicker
|
||||
:::
|
||||
@@ -0,0 +1,172 @@
|
||||
::: 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 通过函数 layer.drawer(options) 打开抽屉
|
||||
|
||||
<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>
|
||||
|
||||
:::
|
||||
|
||||
::: contributor drawer
|
||||
:::
|
||||
|
||||
::: previousNext drawer
|
||||
:::
|
||||
@@ -0,0 +1,463 @@
|
||||
::: 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>
|
||||
|
||||
<lay-dropdown trigger="contextMenu">
|
||||
<lay-button>contextMenu 触发</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 trigger="focus">
|
||||
<lay-input placeholder="Focus 触发"></lay-input>
|
||||
<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 :trigger="['hover','focus','click']">
|
||||
<lay-input placeholder="hover focus click"></lay-input>
|
||||
<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-button @click="manualRef.open()">打开</lay-button>
|
||||
<lay-button @click="manualRef.hide()">关闭</lay-button>
|
||||
<br><br>
|
||||
<lay-dropdown ref="manualRef" :clickOutsideToClose="false" :clickToClose="false">
|
||||
<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() {
|
||||
const manualRef = ref()
|
||||
|
||||
return {
|
||||
manualRef,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 默认打开
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-dropdown :visible="true" updateAtScroll>
|
||||
<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 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 弹出位置
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-dropdown placement="top-left">
|
||||
<lay-button type="primary">topLeft</lay-button>
|
||||
<template #content>
|
||||
<div style="width:300px;height:200px;"></div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
|
||||
<lay-dropdown placement="top">
|
||||
<lay-button type="primary">top</lay-button>
|
||||
<template #content>
|
||||
<div style="width:300px;height:200px;"></div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
|
||||
<lay-dropdown placement="top-right">
|
||||
<lay-button type="primary">topRight</lay-button>
|
||||
<template #content>
|
||||
<div style="width:300px;height:200px;"></div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
|
||||
<lay-dropdown placement="bottom-left">
|
||||
<lay-button type="primary">bottomLeft</lay-button>
|
||||
<template #content>
|
||||
<div style="width:300px;height:200px;"></div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
|
||||
<lay-dropdown placement="bottom">
|
||||
<lay-button type="primary">bottom</lay-button>
|
||||
<template #content>
|
||||
<div style="width:300px;height:200px;"></div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
|
||||
<lay-dropdown placement="bottom-right">
|
||||
<lay-button type="primary">bottomRight</lay-button>
|
||||
<template #content>
|
||||
<div style="width:300px;height:200px;"></div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const btnSize = ref('')
|
||||
const toogleSize = () => {
|
||||
btnSize.value = btnSize.value ? '' : 'lg'
|
||||
}
|
||||
|
||||
return {
|
||||
btnSize,
|
||||
toogleSize
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 其它属性
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-dropdown placement="bottom-left" autoFitWidth>
|
||||
<lay-button type="primary">autoFitWidth</lay-button>
|
||||
<template #content>
|
||||
<lay-dropdown-menu>
|
||||
<lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item>选项二1111111111111111111111</lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
|
||||
</lay-dropdown-menu>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
|
||||
<lay-dropdown placement="bottom-left" :autoFitMinWidth="false">
|
||||
<lay-button type="primary">关闭 autoFitMinWidth</lay-button>
|
||||
<template #content>
|
||||
<lay-dropdown-menu>
|
||||
<lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item>选项二111111111</lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
|
||||
</lay-dropdown-menu>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
|
||||
<lay-dropdown placement="bottom-left" updateAtScroll>
|
||||
<lay-button type="primary">updateAtScroll</lay-button>
|
||||
<template #content>
|
||||
<lay-dropdown-menu>
|
||||
<lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item>选项二111111111</lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
|
||||
</lay-dropdown-menu>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
|
||||
<lay-dropdown placement="bottom-left" updateAtScroll :contentOffset="8">
|
||||
<lay-button type="primary">contentOffset: 8px</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>
|
||||
|
||||
<br><br>
|
||||
<lay-button @click="triggerHeight += 100">改变触发器尺寸</lay-button>
|
||||
<lay-button @click="contentHeight += 100">改变面板尺寸</lay-button>
|
||||
<br><br>
|
||||
<lay-dropdown placement="bottom-left" trigger="focus" :autoFitPosition="true" :autoFixPosition="true" :blurToClose="false" :clickOutsideToClose="false">
|
||||
<lay-input placeholder="autoFixPosition" :style="{height: triggerHeight + 'px'}"></lay-input>
|
||||
<template #content>
|
||||
<div :style="{width:'350px', height: contentHeight + 'px'}"></div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const btnSize = ref('')
|
||||
const toogleSize = () => {
|
||||
btnSize.value = btnSize.value ? '' : 'lg'
|
||||
}
|
||||
|
||||
const triggerHeight = ref(100)
|
||||
const contentHeight = ref(200)
|
||||
|
||||
return {
|
||||
btnSize,
|
||||
toogleSize,
|
||||
triggerWidth,
|
||||
triggerStyle,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Dropdown 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ------- | -------- | --------------- |
|
||||
| visible | 下拉面板是否可见 |`true` `false`|
|
||||
| trigger | 触发方式,类型 `string` 或 trigger 数组 | `click` `hover` `focus` `contextMenu` |
|
||||
| disabled | 是否禁用触发 | `true` `false` |
|
||||
| placement | 下拉面板位置 |`top` `top-left` `top-right` `bottom` `bottom-left` `bottom-right`|
|
||||
| autoFitPosition| 是否自动调整下拉面板位置，默认 `true` |`true` `false` |
|
||||
| autoFitWidth | 是否将下拉面板宽度设置为触发器宽度, 默认 `false` |`true` `false` |
|
||||
| autoFitMinWidth | 是否将下拉面板最小宽度设置为触发器宽度, 默认 `true` |`true` `false` |
|
||||
| updateAtScroll | 是否在容器滚动时更新下拉面板的位置,默认 `false` | `true` `false` |
|
||||
| autoFixPosition | 是否在触发器或下拉面板尺寸变化时更新下拉面板位置,<br>面板尺寸变化参见级联选择器,默认 `true` |`true` `false` |
|
||||
| clickToClose | 是否在点击触发器时关闭面板,默认 `true` |`true` `false`|
|
||||
| blurToClose | 是否在触发器失去焦点时关闭面板,默认 `true` |`true` `false`|
|
||||
| clickOutsideToClose| 是否点击外部关闭下拉面板,默认 `true`|`true` `false`|
|
||||
| contentOffset | 下拉面板距离触发器的偏移距离，默认 2| -|
|
||||
|
||||
|
||||
:::
|
||||
|
||||
::: title Dropdown 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 可选值 |
|
||||
| ------- | -------- | ------ |
|
||||
| content | 下拉内容 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title Dropdown 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 参数 |
|
||||
| ------- | -------- | ------ |
|
||||
| hide | 隐藏下拉内容后触发 | -- |
|
||||
| open | 显示下拉内容后触发 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: contributor dropdown
|
||||
:::
|
||||
|
||||
::: previousNext dropdown
|
||||
:::
|
||||
@@ -0,0 +1,136 @@
|
||||
::: 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 图片插槽
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-empty description="刷新试试">
|
||||
<template #image>
|
||||
图片
|
||||
</template>
|
||||
</lay-empty>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Empty 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----------- | -------- | ------ |
|
||||
| description | 描述信息 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Empty 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----------- | -------- | ------ |
|
||||
| extra | 扩展插槽 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor empty
|
||||
:::
|
||||
|
||||
::: previousNext empty
|
||||
:::
|
||||
@@ -0,0 +1,151 @@
|
||||
::: 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 | 操作 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor exception
|
||||
:::
|
||||
|
||||
::: previousNext exception
|
||||
:::
|
||||
@@ -0,0 +1,83 @@
|
||||
::: 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 | 标题 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: contributor field
|
||||
:::
|
||||
|
||||
::: previousNext field
|
||||
:::
|
||||
659
package/document-component/src/document/zh-CN/components/form.md
Normal file
659
package/document-component/src/document/zh-CN/components/form.md
Normal file
@@ -0,0 +1,659 @@
|
||||
::: 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 通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left， 当设为 top 时标签会置于表单域的顶部
|
||||
|
||||
<template>
|
||||
<lay-form :model="model">
|
||||
<lay-form-item label="账户" :label-position="labelPosition" prop="username">
|
||||
<lay-input v-model="model.username"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="密码" :label-position="labelPosition" prop="password">
|
||||
<lay-input v-model="model.password" type="password"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="爱好" :label-position="labelPosition" 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="特长" :label-position="labelPosition" prop="specialty">
|
||||
<lay-radio v-model="labelPosition" name="labelPosition" label="left">左</lay-radio>
|
||||
<lay-radio v-model="labelPosition" name="labelPosition" label="top">上</lay-radio>
|
||||
<lay-radio v-model="labelPosition" name="labelPosition" label="right">右</lay-radio>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="描述" :label-position="labelPosition" 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 labelPosition = ref('right');
|
||||
|
||||
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,
|
||||
labelPosition
|
||||
}
|
||||
}
|
||||
}
|
||||
</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/layui-vue/blob/next/package/component/src/component/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` | - | - |
|
||||
| label-position| 子项前边描述值的位置 | `string` | `left` `top` `right` |`right` |
|
||||
| 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'
|
||||
}
|
||||
```
|
||||
|
||||
::: contributor form
|
||||
:::
|
||||
|
||||
::: previousNext form
|
||||
:::
|
||||
@@ -0,0 +1,234 @@
|
||||
::: 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 | - |
|
||||
:::
|
||||
|
||||
::: contributor fullscreen
|
||||
:::
|
||||
|
||||
::: previousNext fullscreen
|
||||
:::
|
||||
195
package/document-component/src/document/zh-CN/components/grid.md
Normal file
195
package/document-component/src/document/zh-CN/components/grid.md
Normal file
@@ -0,0 +1,195 @@
|
||||
::: 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 | 间隔 | `number` `string` | -- |0 - 30 |
|
||||
|
||||
:::
|
||||
|
||||
::: title Col 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| --------- | ------------------------------ | ------ |------ |------ |
|
||||
| xs | 尺寸 - 超小屏幕 (手机<768px) | `number` `string` | -- | 0 - 24 |
|
||||
| sm | 尺寸 - 小屏幕 (平板 ≥768px) | `number` `string` | -- | 0 - 24 |
|
||||
| md | 尺寸 - 中等屏幕 (桌面 ≥992px) | `number` `string` | -- | 0 - 24 |
|
||||
| lg | 尺寸 - 大型屏幕 (桌面 ≥1200px) | `number` `string` | -- |0 - 24 |
|
||||
| xs-offset | 偏移 - 超小屏幕 (手机<768px) | `number` `string` | -- |0 - 24 |
|
||||
| sm-offset | 偏移 - 小屏幕 (平板 ≥768px) | `number` `string` | -- | 0 - 24 |
|
||||
| md-offset | 偏移 - 中等屏幕 (桌面 ≥992px) | `number` `string` | -- |0 - 24 |
|
||||
| lg-offset | 偏移 - 大型屏幕 (桌面 ≥1200px) | `number` `string` | -- |0 - 24 |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor grid
|
||||
:::
|
||||
|
||||
::: previousNext grid
|
||||
:::
|
||||
279
package/document-component/src/document/zh-CN/components/icon.md
Normal file
279
package/document-component/src/document/zh-CN/components/icon.md
Normal file
@@ -0,0 +1,279 @@
|
||||
::: 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 | 尺寸 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor icon
|
||||
:::
|
||||
|
||||
::: previousNext icon
|
||||
:::
|
||||
@@ -0,0 +1,152 @@
|
||||
::: 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 | 启用搜索 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor iconPicker
|
||||
:::
|
||||
|
||||
::: previousNext iconPicker
|
||||
:::
|
||||
@@ -0,0 +1,243 @@
|
||||
::: 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 prefix-icon="layui-icon-home" suffix-icon="layui-icon-home">
|
||||
</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` |
|
||||
| readonly | 原生属性 readonly | `true` `false` |
|
||||
| v-model / modelValue | 值 | -- |
|
||||
| autofocus | 原生属性 autofocus | `true` `false` |
|
||||
| autocomplete | 原生属性 autocomplete | `true` `false` |
|
||||
| allow-clear | 允许清空 allow-clear | `true` `false` |
|
||||
| prefix-icon | 前置图标 | -- |
|
||||
| suffix-icon | 后置图标 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Input 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ----- | ------------------- | ----------------|
|
||||
| input | 原生 input 事件 | event : Event |
|
||||
| foucs | 原生 foucs 事件 | event : Event |
|
||||
| blur | 原生 blur 事件 | event : Event |
|
||||
| change| 原生 change 事件 | event : Event |
|
||||
| clear | 清空 事件 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Input 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ----- | ------------------- | ----------------|
|
||||
| prefix | 输入框前置内容 | -- |
|
||||
| suffix | 输入框后置内容 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor input
|
||||
:::
|
||||
|
||||
::: previousNext input
|
||||
:::
|
||||
@@ -0,0 +1,154 @@
|
||||
::: 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) |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor inputNumber
|
||||
:::
|
||||
|
||||
::: previousNext inputNumber
|
||||
:::
|
||||
@@ -0,0 +1,270 @@
|
||||
::: 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>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>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 | 底部 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor layout
|
||||
:::
|
||||
|
||||
::: previousNext layout
|
||||
:::
|
||||
129
package/document-component/src/document/zh-CN/components/line.md
Normal file
129
package/document-component/src/document/zh-CN/components/line.md
Normal file
@@ -0,0 +1,129 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: describe 默认为水平分割线
|
||||
:::
|
||||
|
||||
::: 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/>
|
||||
自定义颜色
|
||||
<lay-line theme="#EEF08D"></lay-line><br/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 带内容的分割线
|
||||
:::
|
||||
|
||||
::: describe 带内容的分割线，contentPosition 属性设置内容位置，offset 属性设置内容偏移量, 单位 <code>px</code> 或百分比值。也可以通过 <code>border-style</code>和<code>border-width</code>自定义样式
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-line>🌲 🌲 🌲 🌲</lay-line><br>
|
||||
<lay-line contentPosition="left">left 默认</lay-line><br>
|
||||
<lay-line contentPosition="right" offset="8%">right 百分比</lay-line><br>
|
||||
<lay-line border-style="dashed" border-width="3px">自 定 义 宽 度 和 样 式</lay-line><br>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title 竖直分割线
|
||||
:::
|
||||
|
||||
::: describe 设置 <code>direction = 'vertical'</code> 即可使用竖直分割线
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
默认分割线
|
||||
<lay-line direction="vertical"></lay-line>
|
||||
赤色分割线
|
||||
<lay-line direction="vertical" theme="red"></lay-line>
|
||||
橙色分割线
|
||||
<lay-line direction="vertical" theme="orange"></lay-line>
|
||||
墨绿分割线
|
||||
<lay-line direction="vertical" theme="green"></lay-line>
|
||||
青色分割线
|
||||
<lay-line direction="vertical" theme="cyan"></lay-line>
|
||||
蓝色分割线
|
||||
<lay-line direction="vertical" theme="blue"></lay-line>
|
||||
黑色分割线
|
||||
<lay-line direction="vertical" theme="black"></lay-line>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: title Line 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 说明 | 可选值 |
|
||||
| ----- | ----------- | --------------------------------------------- |
|
||||
| direction | 分割线的方向 | `horizontal` `vertical`|
|
||||
| contentPosition | 分割线内容位置 | `center` `left` `right` |
|
||||
| offset | 分割线内容偏移量，单位 px | eg: `30px` `20%`|
|
||||
| theme | 主题 | `red` `orange` `green` `cyan` `blue` `black` `gray` 或 string |
|
||||
| borderWidth | 分割线宽度，单位 px | eg: `2px`|
|
||||
| borderStyle | 分割线样式 | <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style">参见MDN：border-style</a> |
|
||||
|
||||
:::
|
||||
|
||||
::: title Line 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 说明 |
|
||||
| ------ | ---------- |
|
||||
| default| 默认插槽，仅支持 direction 为 `horizontal`|
|
||||
|
||||
:::
|
||||
|
||||
::: contributor line
|
||||
:::
|
||||
|
||||
::: previousNext line
|
||||
:::
|
||||
140
package/document-component/src/document/zh-CN/components/load.md
Normal file
140
package/document-component/src/document/zh-CN/components/load.md
Normal file
@@ -0,0 +1,140 @@
|
||||
::: 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: 加载时长 } |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor load
|
||||
:::
|
||||
|
||||
::: previousNext load
|
||||
:::
|
||||
611
package/document-component/src/document/zh-CN/components/menu.md
Normal file
611
package/document-component/src/document/zh-CN/components/menu.md
Normal file
@@ -0,0 +1,611 @@
|
||||
::: 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 :selectedKey="selectedKey" @changeSelectedKey="changeSelectedKey" @changeOpenKeys="changeOpenKeys" 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")
|
||||
const changeSelectedKey = (val) => {
|
||||
selectedKey.value = val;
|
||||
}
|
||||
|
||||
const changeOpenKeys = (val) => {
|
||||
openKeys2.value = val;
|
||||
}
|
||||
|
||||
return {
|
||||
openKeys2,
|
||||
selectedKey,
|
||||
changeOpenKeys,
|
||||
changeSelectedKey
|
||||
}
|
||||
}
|
||||
}
|
||||
</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 扩展图标
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" 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>
|
||||
<template v-slot:expandIcon={isExpand}>
|
||||
{{isExpand}}
|
||||
</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 openKeys7 = ref(["7"])
|
||||
const selectedKey = ref("5")
|
||||
|
||||
return {
|
||||
isTree,
|
||||
openKeys7,
|
||||
selectedKey,
|
||||
}
|
||||
}
|
||||
}
|
||||
</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 | 菜单标题 | -- |
|
||||
| expandIcon | 扩展图标 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Sub Menu 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 备注 |
|
||||
| ----- | -------- | ---- |
|
||||
| title | 菜单标题 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor menu
|
||||
:::
|
||||
|
||||
::: previousNext menu
|
||||
:::
|
||||
@@ -0,0 +1,366 @@
|
||||
::: 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="changeVisible9" type="primary">关闭标题</lay-button>
|
||||
<lay-layer title="false" move="true" shade="false" v-model="visible9">
|
||||
内容
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const visible9 = ref(false)
|
||||
const changeVisible9 = function() {
|
||||
visible9.value = !visible9.value
|
||||
}
|
||||
return {
|
||||
visible9
|
||||
};
|
||||
}
|
||||
};
|
||||
</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, btn: [
|
||||
{text:"关闭", callback: function(layerId) {
|
||||
layer.close(layerId);
|
||||
}}
|
||||
]})
|
||||
}
|
||||
|
||||
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 | 关闭回调 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor modal
|
||||
:::
|
||||
|
||||
::: previousNext modal
|
||||
:::
|
||||
101
package/document-component/src/document/zh-CN/components/msg.md
Normal file
101
package/document-component/src/document/zh-CN/components/msg.md
Normal file
@@ -0,0 +1,101 @@
|
||||
::: 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: 图标 } |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor msg
|
||||
:::
|
||||
|
||||
::: previousNext msg
|
||||
:::
|
||||
@@ -0,0 +1,131 @@
|
||||
::: 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" background="#ecf5ff" ></lay-notice-bar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "vue"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const visible = ref(true);
|
||||
|
||||
return {
|
||||
visible
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 垂直滚动
|
||||
:::
|
||||
|
||||
::: demo
|
||||
<template>
|
||||
<lay-notice-bar :scrollable="true" leftIcon="layui-icon-mute" :textlist="list">
|
||||
</lay-notice-bar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref,reactive } from "vue"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const list = reactive([
|
||||
{ id: '1', text: '条目一' },
|
||||
{ id: '2', text: '条目二' },
|
||||
{ id: '3', text: '条目三' },
|
||||
{ id: '4', text: '条目四' },
|
||||
])
|
||||
return {
|
||||
list,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Notice Bar 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ---- | -------- | --------------------- |
|
||||
| mode | 模式 | 'link' 'closeable' |
|
||||
| text | 内容 | 滚动内容 |
|
||||
| leftIcon | 左侧图标 | -- |
|
||||
| rightIcon | 右侧图标 | -- |
|
||||
| scrollable | 是否开启垂直滚动|true,false|
|
||||
| textlist | 垂直滚动内容| Array|
|
||||
:::
|
||||
|
||||
::: contributor noticeBar
|
||||
:::
|
||||
|
||||
::: previousNext noticeBar
|
||||
:::
|
||||
317
package/document-component/src/document/zh-CN/components/page.md
Normal file
317
package/document-component/src/document/zh-CN/components/page.md
Normal file
@@ -0,0 +1,317 @@
|
||||
::: 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="limit1" :pages="pages1" :total="total1" :show-count="showCount1" @limit="limit1=$event" :show-page="showPage1" :show-limit="showLimit1" :show-refresh="showRefresh1" showSkip="showSkip1"></lay-page>
|
||||
每页数量:{{limit1}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const limit1 = ref(5)
|
||||
const total1 = ref(99)
|
||||
const showCount1 = ref(true)
|
||||
const showPage1 = ref(true)
|
||||
const showLimit1 = ref(true)
|
||||
const showRefresh1 = ref(true)
|
||||
const showSkip1 = ref(true)
|
||||
const pages1 = ref(6);
|
||||
|
||||
return {
|
||||
limit1,
|
||||
total1,
|
||||
pages1,
|
||||
showCount1,
|
||||
showPage1,
|
||||
showLimit1,
|
||||
showRefresh1,
|
||||
showSkip1
|
||||
}
|
||||
}
|
||||
}
|
||||
</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 | 下一页 | 下一页 |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor page
|
||||
:::
|
||||
|
||||
::: previousNext page
|
||||
:::
|
||||
@@ -0,0 +1,92 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 如果页面的路径比较简单，则使用页头组件要比面包屑更直观一点。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-page-header` 标签
|
||||
|
||||
<template>
|
||||
<lay-page-header content="详情页面" @back="handleBack"></lay-page-header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const handleBack=()=>{
|
||||
alert('点击返回回调')
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: demo 使用 `backText` 属性 自定义返回文本
|
||||
|
||||
<template>
|
||||
<lay-page-header content="详情页面" backText="back" @back="handleBack"></lay-page-header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const handleBack=()=>{
|
||||
alert('点击返回回调')
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title PageHeader 插槽
|
||||
:::
|
||||
::: demo 使用 默认插槽可以自定义右侧内容 同时content属性将失效
|
||||
|
||||
<template>
|
||||
<lay-page-header backText="back" @back="handleBack">
|
||||
<span>Do what ever you want...</span>
|
||||
<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>
|
||||
</lay-page-header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const handleBack=()=>{
|
||||
alert('点击返回回调')
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title PageHeader 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ------ | ---- | -------------- |
|
||||
| content| 标题,当前默认插槽不为空时失效 | -- |
|
||||
| backText| 返回文本 | 默认 "返回" |
|
||||
|
||||
:::
|
||||
|
||||
::: title PageHeader 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 |
|
||||
| ------ | ---- |
|
||||
| back| 点击返回回调 |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor pageHeader
|
||||
:::
|
||||
|
||||
::: previousNext pageHeader
|
||||
:::
|
||||
@@ -0,0 +1,59 @@
|
||||
::: 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
|
||||
|
||||
| 插槽 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ------- | -------- | ------ | ------ | ----- |
|
||||
| shadow | 阴影 | `string` | `always` | `always` `hover` `never` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Panel 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 可选值 |
|
||||
| ------- | -------- | ------ |
|
||||
| default | 默认插槽 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor panel
|
||||
:::
|
||||
|
||||
::: previousNext panel
|
||||
:::
|
||||
@@ -0,0 +1,171 @@
|
||||
::: 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 环形进度条
|
||||
:::
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-progress percent="10" circle :show-text="showText" style="margin-right:10px"></lay-progress>
|
||||
<lay-progress percent="20" circle :show-text="showText" text="销售量" theme="red" style="margin-right:10px"></lay-progress>
|
||||
<lay-progress percent="30" circle :show-text="showText" theme="blue" text="不同尺寸" circleSize="200" circleWidth="20" style="margin-right:10px"></lay-progress>
|
||||
<lay-progress percent="70" circle :show-text="showText" text="宽度控制" theme="orange" circleSize="200" circleWidth="40"></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 | 展示描述 | -- |
|
||||
| circle | 环形进度条| 默认为 `false` |
|
||||
| circleSize| 环形进度条尺寸| 默认为 `150` 单位是px |
|
||||
| circleWidth| 环形进度条线条宽度| 默认为 `6` 单位是px |
|
||||
:::
|
||||
|
||||
::: contributor progress
|
||||
:::
|
||||
|
||||
::: previousNext progress
|
||||
:::
|
||||
@@ -0,0 +1,68 @@
|
||||
::: 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 | 灰色样式 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor quote
|
||||
:::
|
||||
|
||||
::: previousNext quote
|
||||
:::
|
||||
@@ -0,0 +1,183 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 用于在多个备选项中选中单个状态。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-radio` 标签, 创建一个单选框
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const selected1 = ref("1");
|
||||
|
||||
return {
|
||||
selected1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 禁用状态
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</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-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>
|
||||
</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 单选分组
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-radio-group name="action" v-model="selected4" @change="change4">
|
||||
<lay-radio label="1">写作</lay-radio>
|
||||
<lay-radio label="2">画画</lay-radio>
|
||||
<lay-radio label="3">运动</lay-radio>
|
||||
</lay-radio-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const selected4 = ref("1");
|
||||
const change4 = function( current ) {
|
||||
console.log("当前值:" + current)
|
||||
}
|
||||
return {
|
||||
selected4,
|
||||
change4
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Radio 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 默认值 |
|
||||
| ------- | ------------- | ------ |
|
||||
| name | 原始属性 name | -- |
|
||||
| label | 当前值 | -- |
|
||||
| v-model | 选中值 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Radio 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ------ | -------- | ---------------- |
|
||||
| change | 切换事件 | current : 当前值 |
|
||||
|
||||
:::
|
||||
|
||||
::: title RadioGroup 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 默认值 |
|
||||
| ------- | ------------- | ------ |
|
||||
| v-model | 选中值 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title RadioGroup 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ------ | -------- | ---------------- |
|
||||
| change | 切换事件 | current : 当前值 |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor radio
|
||||
:::
|
||||
|
||||
::: previousNext radio
|
||||
:::
|
||||
349
package/document-component/src/document/zh-CN/components/rate.md
Normal file
349
package/document-component/src/document/zh-CN/components/rate.md
Normal file
@@ -0,0 +1,349 @@
|
||||
::: 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="clearHalf" :half="true" :is-block="true" has-clear></lay-rate>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const clearHalf = ref(0.5)
|
||||
return {
|
||||
clearHalf
|
||||
}
|
||||
}
|
||||
}
|
||||
</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 |
|
||||
| has-clear | 评分是否需要清除功能 | `boolean` | false |
|
||||
| clear-icon | 评分清除功能使用的图标`class` | `string` | `layui-icon-close-fill` |
|
||||
| icons | 评分使用图标`class`；`["空心", "实心"]`/`["空心", "半心", "实心"]` | `string[]` | 星型 |
|
||||
|
||||
:::
|
||||
|
||||
::: title Rate 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 参数 |
|
||||
| -------- | -------- | ------ |
|
||||
| -- | 默认插槽，自定义内容时可以使用为 | { value } |
|
||||
|
||||
:::
|
||||
|
||||
::: title Rate 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 回调参数 |
|
||||
| -------- | -------- | ------ |
|
||||
| select | 选中之后触发事件 | (value: number) |
|
||||
| clear | 清除之后触发事件 | (value: number) |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor rate
|
||||
:::
|
||||
|
||||
::: previousNext rate
|
||||
:::
|
||||
@@ -0,0 +1,113 @@
|
||||
::: 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 | 扩展 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor result
|
||||
:::
|
||||
|
||||
::: previousNext result
|
||||
:::
|
||||
@@ -0,0 +1,104 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 为组件添加水波纹动画。
|
||||
:::
|
||||
|
||||
::: title 内部水波纹
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-ripple` 标签, 添加水波纹。
|
||||
|
||||
<template>
|
||||
<lay-ripple>
|
||||
<lay-button>click</lay-button>
|
||||
</lay-ripple><br>
|
||||
<lay-ripple trigger="always">
|
||||
<lay-button>always</lay-button>
|
||||
</lay-ripple><br>
|
||||
<lay-ripple trigger="mouseenter">
|
||||
<lay-button>mouseenter</lay-button>
|
||||
</lay-ripple>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 外部水波纹
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-ripple` 标签, 添加水波纹。
|
||||
|
||||
<template>
|
||||
<lay-ripple type="out" borderRadius="1px">
|
||||
<lay-button>click</lay-button>
|
||||
</lay-ripple><br><br><br>
|
||||
<p>always:</p>
|
||||
<lay-ripple type="out" trigger="always" borderRadius="50%" color="#009688">
|
||||
<div style="border-radius:50%;background-color:#009688;width:8px;height:8px"></div>
|
||||
</lay-ripple><br><br><br>
|
||||
<p>mouseenter:</p>
|
||||
<lay-ripple type="out" trigger="mouseenter" borderRadius="50%" color="#009688" spread-width="50px">
|
||||
<div style="border-radius:50%;background-color:#009688;width:20px;height:20px"></div>
|
||||
</lay-ripple><br>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Ripple 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----------- | -------- | ------ |
|
||||
| type | 波纹类型 | `out` `inset` |
|
||||
| color | 波纹颜色 | -- |
|
||||
| borderRadius | 圆角，仅 `out` 类型 | -- |
|
||||
| spreadWidth | 扩散宽度，单位 px，仅 `out` 类型 | -- |
|
||||
| spreadSize | 扩散大小，单位 px，仅 `inset` 类型 | -- |
|
||||
| trigger | 触发方式 | `click` `always` `mouseenter`|
|
||||
| center | 是否在元素中心扩散 | -- |
|
||||
|
||||
:::
|
||||
|
||||
:::title Ripple 插槽
|
||||
:::
|
||||
|
||||
:::table
|
||||
| 插槽 | 描述 | 参数 |
|
||||
|------ |----------|-----------|
|
||||
| default | 默认插槽 | - |
|
||||
:::
|
||||
|
||||
::: contributor ripple
|
||||
:::
|
||||
|
||||
::: previousNext ripple
|
||||
:::
|
||||
@@ -0,0 +1,53 @@
|
||||
::: 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 | 高度 | -- |
|
||||
| thumbWidth | 滑块宽度 | -- |
|
||||
| thumbColor | 滑块颜色 | -- |
|
||||
| trackColor | 滑槽颜色 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor scroll
|
||||
:::
|
||||
|
||||
::: previousNext scroll
|
||||
:::
|
||||
@@ -0,0 +1,375 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 用于代替原生的选择器，或者需要一个更优雅的多选器时。支持关键词查询
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-select` 标签, 创建下拉选择框
|
||||
|
||||
<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`) | - |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor select
|
||||
:::
|
||||
|
||||
::: previousNext select
|
||||
:::
|
||||
@@ -0,0 +1,120 @@
|
||||
::: 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 | 自定义插槽 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor skeleton
|
||||
:::
|
||||
|
||||
::: previousNext skeleton
|
||||
:::
|
||||
@@ -0,0 +1,125 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 作为一个拖拽式的交互性组件，滑块往往能给产品带来更好的操作体验。
|
||||
:::
|
||||
|
||||
::: title 横向
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-slider` 标签, 创建滑块
|
||||
|
||||
<template>
|
||||
<lay-slider :showDots="true" :step="10" :max="100" 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 :showDots="false" :step="10" 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="0" :max="100" 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` | - | - |
|
||||
| showDots | 是否显示断点 | `Boolean` | - | false |
|
||||
:::
|
||||
|
||||
::: contributor slider
|
||||
:::
|
||||
|
||||
::: previousNext slider
|
||||
:::
|
||||
@@ -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 | - | 按照个数平分 |
|
||||
:::
|
||||
|
||||
::: contributor splitPanel
|
||||
:::
|
||||
|
||||
::: previousNext splitPanel
|
||||
:::
|
||||
475
package/document-component/src/document/zh-CN/components/step.md
Normal file
475
package/document-component/src/document/zh-CN/components/step.md
Normal file
@@ -0,0 +1,475 @@
|
||||
::: 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 | 内容区域自定义 |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor step
|
||||
:::
|
||||
|
||||
::: previousNext step
|
||||
:::
|
||||
@@ -0,0 +1,218 @@
|
||||
::: 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 | 切换事件 | val : 当前值 |
|
||||
|
||||
:::
|
||||
|
||||
::: title Switch 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 参数 |
|
||||
| ------ | -------- | ---------------- |
|
||||
| onswitch-icon | 启用图标 | -- |
|
||||
| unswitch-icon | 禁用图标 | -- |
|
||||
:::
|
||||
|
||||
::: contributor switch
|
||||
:::
|
||||
|
||||
::: previousNext switch
|
||||
:::
|
||||
366
package/document-component/src/document/zh-CN/components/tab.md
Normal file
366
package/document-component/src/document/zh-CN/components/tab.md
Normal file
@@ -0,0 +1,366 @@
|
||||
::: 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 @click="addTab">添加</lay-button>
|
||||
<lay-tab type="card" allow-close v-model="current8">
|
||||
<lay-tab-item v-for="a in arr2" :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() {
|
||||
let index = 4;
|
||||
const current8 = ref('1')
|
||||
const arr2 = ref([
|
||||
{id:'1', title:'选项一', closable: false},
|
||||
{id:'2', title:'选项二'},
|
||||
{id:'3', title:'选项三'}
|
||||
])
|
||||
const addTab = function(){
|
||||
index++;
|
||||
arr2.value.push({
|
||||
id: String(index),
|
||||
title:'新选项卡' + index
|
||||
})
|
||||
current8.value = String(index);
|
||||
}
|
||||
|
||||
return {
|
||||
arr2,
|
||||
addTab,
|
||||
current8
|
||||
}
|
||||
}
|
||||
}
|
||||
</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` 表示不进行切换 |
|
||||
| activeBarTransition| 是否开启 activeBar 动画,仅 brief 有效,默认 `false`| `true` `false`|
|
||||
|
||||
:::
|
||||
|
||||
::: title Tab 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ------ | -------- | ---- |
|
||||
| change | 选中切换 | id |
|
||||
| close | 关闭事件 | id |
|
||||
|
||||
:::
|
||||
|
||||
::: title Tab Item 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| -------- | -------- | ------ |
|
||||
| id | 唯一标识 | -- |
|
||||
| title | 头部标题 | -- |
|
||||
| closable | 允许关闭 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor tab
|
||||
:::
|
||||
|
||||
::: previousNext tab
|
||||
:::
|
||||
@@ -0,0 +1,548 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 展示行列数据。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-table` 标签, 创建表格
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns1" :dataSource="dataSource1"></lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const columns1 = [
|
||||
{
|
||||
title:"账户",
|
||||
width:"200px",
|
||||
key:"username"
|
||||
},{
|
||||
title:"密码",
|
||||
width: "180px",
|
||||
key:"password"
|
||||
},{
|
||||
title:"年龄",
|
||||
width: "180px",
|
||||
key:"age"
|
||||
},{
|
||||
title:"备注",
|
||||
width: "180px",
|
||||
key:"remark",
|
||||
ellipsisTooltip: true,
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource1 = [
|
||||
{username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'}
|
||||
]
|
||||
|
||||
return {
|
||||
columns1,
|
||||
dataSource1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 不同尺寸
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-radio v-model="size2" name="action" label="sm">sm</lay-radio>
|
||||
<lay-radio v-model="size2" name="action" label="md">md</lay-radio>
|
||||
<lay-radio v-model="size2" name="action" label="lg">lg</lay-radio>
|
||||
</lay-form>
|
||||
<lay-table :columns="columns2" :dataSource="dataSource2" :size="size2"></lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const columns2 = [
|
||||
{
|
||||
title:"账户",
|
||||
width:"200px",
|
||||
key:"username"
|
||||
},{
|
||||
title:"密码",
|
||||
width: "180px",
|
||||
key:"password"
|
||||
},{
|
||||
title:"年龄",
|
||||
width: "180px",
|
||||
key:"age"
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource2 = [
|
||||
{username:"root", password:"root", age:"18"},
|
||||
{username:"woow", password:"woow", age:"20"}
|
||||
]
|
||||
|
||||
const size2 = ref('md');
|
||||
|
||||
return {
|
||||
size2,
|
||||
columns2,
|
||||
dataSource2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 开启分页
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns3" :dataSource="dataSource3" :page="page3" @change="change3"></lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const page3 = {
|
||||
total: 100,
|
||||
limit: 10,
|
||||
current: 2
|
||||
}
|
||||
|
||||
const change3 = function({ current }){
|
||||
console.log("当前页:" + JSON.stringify(current))
|
||||
}
|
||||
|
||||
const columns3 = [
|
||||
{
|
||||
title:"账户",
|
||||
width:"200px",
|
||||
slot:"username",
|
||||
key:"username"
|
||||
},{
|
||||
title:"密码",
|
||||
width: "180px",
|
||||
slot:"password",
|
||||
key:"password"
|
||||
},{
|
||||
title:"年龄",
|
||||
width: "180px",
|
||||
key:"age"
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource3 = [
|
||||
{username:"root", password:"root", age:"18"},
|
||||
{username:"woow", password:"woow", age:"20"}
|
||||
]
|
||||
|
||||
return {
|
||||
page3,
|
||||
change3,
|
||||
columns3,
|
||||
dataSource3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 开启排序
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns4" :dataSource="dataSource4"></lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const columns4 = [
|
||||
{
|
||||
title:"姓名",
|
||||
width:"200px",
|
||||
key:"name"
|
||||
},{
|
||||
title:"成绩",
|
||||
width: "180px",
|
||||
key:"score",
|
||||
sort: true
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource4 = [
|
||||
{name:"张三", score:100},
|
||||
{name:"李四", score:80},
|
||||
{name:"王二", score:99},
|
||||
{name:"麻子", score:92},
|
||||
{name:"无名", score:60},
|
||||
{name:"有名", score:70},
|
||||
]
|
||||
|
||||
return {
|
||||
columns4,
|
||||
dataSource4
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 完整表格
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns5" id="id" :dataSource="dataSource5" v-model:selectedKeys="selectedKeys5" :checkbox="checkbox5" :default-toolbar="defaultToolbar5" @row="rowClick5">
|
||||
<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 size="xs">修改</lay-button>
|
||||
<lay-button size="xs" type="primary">删除</lay-button>
|
||||
</template>
|
||||
<template v-slot:expand="{ data }">
|
||||
<div style="height:100px;">
|
||||
内容
|
||||
</div>
|
||||
</template>
|
||||
</lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const selectedKeys5 = ref(['1'])
|
||||
const checkbox5 = ref(true)
|
||||
const defaultToolbar5 = ref(true)
|
||||
|
||||
const columns5 = [
|
||||
{
|
||||
title:"账户",
|
||||
width:"200px",
|
||||
titleSlot: "username-title",
|
||||
customSlot:"username",
|
||||
key:"username",
|
||||
align: "left"
|
||||
},{
|
||||
title:"密码",
|
||||
customSlot:"password",
|
||||
width:"200px",
|
||||
key:"password",
|
||||
align: "center"
|
||||
},
|
||||
{
|
||||
title:"年龄",
|
||||
width: "200px",
|
||||
key:"age",
|
||||
sort: true,
|
||||
align: "right"
|
||||
},
|
||||
{
|
||||
title:"备注",
|
||||
width: "180px",
|
||||
key:"remark",
|
||||
ellipsisTooltip: true,
|
||||
}
|
||||
,{
|
||||
title:"操作",
|
||||
width:"100px",
|
||||
customSlot:"operator",
|
||||
key:"operator"
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource5 = [
|
||||
{id:"1", username:"root",password: '**',age:"18",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
|
||||
{id:"2", username:"woow",password: '**', age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'}
|
||||
]
|
||||
|
||||
const rowClick5 = function(data) {
|
||||
console.log(JSON.stringify(data))
|
||||
}
|
||||
|
||||
const rowDoubleClick5 = function(data) {
|
||||
console.log(JSON.stringify(data))
|
||||
}
|
||||
|
||||
watch(selectedKeys5, () => {
|
||||
console.log("复选框监听:" + selectedKeys5.value);
|
||||
})
|
||||
|
||||
return {
|
||||
columns5,
|
||||
dataSource5,
|
||||
selectedKeys5,
|
||||
checkbox5,
|
||||
defaultToolbar5,
|
||||
rowClick5,
|
||||
rowDoubleClick5
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 开启子表
|
||||
:::
|
||||
|
||||
::: demo 当表格内容较多不能一次性完全展示时。
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns6" :dataSource="dataSource6">
|
||||
<template v-slot:expand="{ data }">
|
||||
{{ data }}
|
||||
</template>
|
||||
</lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const columns6 = [
|
||||
{
|
||||
title:"姓名",
|
||||
width:"200px",
|
||||
key:"name"
|
||||
},{
|
||||
title:"成绩",
|
||||
width: "180px",
|
||||
key:"score"
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource6 = [
|
||||
{name:"张三", score:100},
|
||||
{name:"李四", score:80},
|
||||
{name:"王二", score:99},
|
||||
{name:"麻子", score:92},
|
||||
{name:"无名", score:60},
|
||||
{name:"有名", score:70},
|
||||
]
|
||||
|
||||
return {
|
||||
columns6,
|
||||
dataSource6
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 树形表格
|
||||
:::
|
||||
|
||||
::: demo 树形数据的展示，当数据中有 children 字段时会自动展示为树形表格, 通过设置 indentSize 以控制每一层的缩进宽度, 使用 childrenColumnName 替换默认字段
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns7" :dataSource="dataSource7">
|
||||
</lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const columns7 = [
|
||||
{
|
||||
title:"姓名",
|
||||
width:"200px",
|
||||
key:"name"
|
||||
},{
|
||||
title:"成绩",
|
||||
width: "180px",
|
||||
key:"score"
|
||||
},
|
||||
]
|
||||
|
||||
const dataSource7 = [
|
||||
{name:"系统管理", score:100, children: [{name:"用户管理", score:100, children: [{name:"用户修改", score:100},{name:"用户删除", score:100}]},{name:"角色管理", score:100}]},
|
||||
{name:"电商管理", score:100, children: [{name:"商品管理", score:100},{name:"分类管理", score:100}]},
|
||||
]
|
||||
|
||||
return {
|
||||
columns7,
|
||||
dataSource7
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 固定表头
|
||||
:::
|
||||
|
||||
::: demo 设置 `height` 或者 `max-height` 即可实现
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns8" :dataSource="dataSource8" max-height="300px"></lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const columns8 = [
|
||||
{
|
||||
title:"账户",
|
||||
width:"200px",
|
||||
key:"username"
|
||||
},{
|
||||
title:"密码",
|
||||
width: "180px",
|
||||
key:"password"
|
||||
},{
|
||||
title:"年龄",
|
||||
width: "180px",
|
||||
key:"age"
|
||||
},{
|
||||
title:"备注",
|
||||
key:"remark",
|
||||
ellipsisTooltip: true,
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource8 = [
|
||||
{username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
|
||||
{username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
|
||||
{username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
|
||||
{username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
|
||||
]
|
||||
|
||||
return {
|
||||
columns8,
|
||||
dataSource8
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Table 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| -------------------- | ----------------------------- | --------- | ------- | -------------- |
|
||||
| columns | 列配置 - [更多](#tableColumn) | -- | -- | -- |
|
||||
| dataSource | 数据源 | -- | -- | -- |
|
||||
| checkbox | 开启复选框 | `boolean` | `false` | `true` `false` |
|
||||
| id | 主键 | `string` | -- | -- |
|
||||
| v-model:selectedKeys | 选中项 | -- | -- | -- |
|
||||
| default-toolbar | 工具栏 | `boolean` | `false` | `true` `false` |
|
||||
| size | 尺寸 | `string` | `md` | `lg` `md` `sm` |
|
||||
| children-column-name | 树节点字段 | `string` | `children`| -- |
|
||||
| indent-size | 树表行级缩进 | `number` | `30` | -- |
|
||||
| height | 表格高度 | `number` | -- | -- |
|
||||
| maxHeight | 表格最大高度 | `number` | -- | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Table 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 参数 |
|
||||
| ---------- | ------ | ------------- |
|
||||
| row | 行单击 | data : 当前行 |
|
||||
| row-double | 行双击 | data : 当前行 |
|
||||
|
||||
:::
|
||||
|
||||
::: title Table 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 参数 |
|
||||
| ------- | ------------ | ---- |
|
||||
| toolbar | 自定义工具栏 | -- |
|
||||
|
||||
:::
|
||||
|
||||
### <div id="tableColumn"></div>
|
||||
|
||||
::: title Table 数据
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| --------------- | ------------------------------ | --------- | ------- | ----------------------- |
|
||||
| title | 列标题 | -- | -- | -- |
|
||||
| key | 数据字段 | -- | -- | -- |
|
||||
| customSlot | 自定义插槽 | -- | -- | -- |
|
||||
| width | 宽度 | -- | -- | -- |
|
||||
| minWidth | 最小宽度 | -- | `100px` | -- |
|
||||
| sort | 排序 | -- | -- | -- |
|
||||
| titleSlot | 标题插槽 | -- | -- | -- |
|
||||
| align | 对齐方式 | `string` | `left` | `left` `right` `center` |
|
||||
| ellipsisTooltip | 当内容过长被隐藏时显示 tooltip | `boolean` | `false` | `true` `false` |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor table
|
||||
:::
|
||||
|
||||
::: previousNext table
|
||||
:::
|
||||
@@ -0,0 +1,155 @@
|
||||
::: 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 显示字数
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-textarea placeholder="显示字数" v-model="data4" show-count></lay-textarea>
|
||||
<br>
|
||||
<lay-textarea placeholder="最大输入长度" v-model="data5" show-count maxlength="10"></lay-textarea>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const data4 = ref("");
|
||||
const data5 = ref("");
|
||||
return {
|
||||
data4,
|
||||
data5
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Textarea 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----------- | ------------- | -------------- |
|
||||
| name | 原始属性 name | -- |
|
||||
| placeholder | 提示信息 | -- |
|
||||
| show-count | 显示字数 | `true` `false` |
|
||||
| disabled | 禁用 | `true` `false` |
|
||||
| v-model | 值 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Textarea 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 可选值 |
|
||||
| ----- | --------------- | ---------------- |
|
||||
| input | 原生 input 事件 | event : 事件对象 |
|
||||
| foucs | 原生 foucs 事件 | event : 事件对象 |
|
||||
| blur | 原生 blur 事件 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor textarea
|
||||
:::
|
||||
|
||||
::: previousNext textarea
|
||||
:::
|
||||
@@ -0,0 +1,182 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 将时间抽象到二维平面，垂直呈现一段从过去到现在的故事。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-timeline` 与 `lay-timeline-item` 标签, 创建时间线
|
||||
|
||||
<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 | 节点 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor timeline
|
||||
:::
|
||||
|
||||
::: previousNext timeline
|
||||
:::
|
||||
@@ -0,0 +1,168 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 字体使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div style="width: 125px; ">
|
||||
<lay-tooltip content="假装这里有文字提示" ref="tooltip" :isAutoShow="true">
|
||||
假装这里有文字提示
|
||||
</lay-tooltip>
|
||||
</div>
|
||||
<div style="width: 126px; margin-top: 20px">
|
||||
<lay-tooltip content="假装这里有文字提示" ref="tooltip" :isAutoShow="true">
|
||||
假装这里有文字提示
|
||||
</lay-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
:::
|
||||
|
||||
::: 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` ||
|
||||
| isAutoShow | 控制超出文本 `...` 时自动展示， 没有 `...` 时不展示 | `false`(默认值)、`true` ||
|
||||
|
||||
:::
|
||||
|
||||
::: contributor tooltip
|
||||
:::
|
||||
|
||||
::: previousNext tooltip
|
||||
:::
|
||||
@@ -0,0 +1,194 @@
|
||||
::: 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 | 开启搜索 | -- |
|
||||
| width | 左右盒子宽度 | `200px` |
|
||||
| height | 左右盒子高度 | `360px` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Transfer 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| Name | Description | Accepted Values |
|
||||
| ---- | ----------- | --------------- |
|
||||
| item | 列表项 | { data } |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor transfer
|
||||
:::
|
||||
|
||||
::: previousNext transfer
|
||||
:::
|
||||
@@ -0,0 +1,107 @@
|
||||
::: 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 | 淡入淡出 |
|
||||
:::
|
||||
|
||||
::: contributor transition
|
||||
:::
|
||||
|
||||
::: previousNext transition
|
||||
:::
|
||||
326
package/document-component/src/document/zh-CN/components/tree.md
Normal file
326
package/document-component/src/document/zh-CN/components/tree.md
Normal file
@@ -0,0 +1,326 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 树形组件一般用于展示具有层级关系的数据
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-tree` 标签, 创建树形组件, @node-click 监听节点点击。
|
||||
|
||||
<template>
|
||||
<lay-tree
|
||||
:data="data"
|
||||
@node-click="handleClick"
|
||||
>
|
||||
</lay-tree>
|
||||
</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: ''
|
||||
}]
|
||||
}]
|
||||
}]);
|
||||
|
||||
function handleClick(node) {
|
||||
clickNode.value = node
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 选择节点
|
||||
:::
|
||||
|
||||
::: demo 使用 `showCheckbox` 属性开启复选框
|
||||
|
||||
<template>
|
||||
<lay-tree
|
||||
:data="data"
|
||||
v-model:checkedKeys="checkedKeys"
|
||||
:showCheckbox="showCheckbox"
|
||||
>
|
||||
</lay-tree>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const checkedKeys = ref([30,31])
|
||||
const showCheckbox = ref(true)
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 关闭连线
|
||||
:::
|
||||
|
||||
::: demo 使用 `showLine` 属性关闭节点连线
|
||||
|
||||
<template>
|
||||
<lay-tree
|
||||
:data="data"
|
||||
:showLine="showLine"
|
||||
>
|
||||
</lay-tree>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const showLine=ref(false)
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 过渡动画
|
||||
:::
|
||||
|
||||
::: demo 使用 `collapse-transition` 属性开启展开过渡动画
|
||||
|
||||
<template>
|
||||
<lay-tree
|
||||
:data="data"
|
||||
collapse-transition
|
||||
>
|
||||
</lay-tree>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 定义标题
|
||||
:::
|
||||
|
||||
::: demo 使用 `title` 插槽自定义节点标题
|
||||
|
||||
<template>
|
||||
<lay-tree
|
||||
:data="data"
|
||||
collapse-transition
|
||||
>
|
||||
<template v-slot:title="{ data }">
|
||||
{{ data.id }}
|
||||
</template>
|
||||
</lay-tree>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
</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 事件 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: contributor transition
|
||||
:::
|
||||
|
||||
::: previousNext transition
|
||||
:::
|
||||
@@ -0,0 +1,296 @@
|
||||
::: 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 使用 `default` 插槽, 自定义入口
|
||||
|
||||
<template>
|
||||
<lay-upload @done="getUploadFile" @choose="beginChoose">
|
||||
<template v-slot:default="params">
|
||||
<lay-button>上传 - 是否禁用 - {{ params.disabled }}</lay-button>
|
||||
</template>
|
||||
<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` 对上传按钮添加禁用状态,使用 `disabledPreview` 对上传预览区域添加禁用状态
|
||||
|
||||
<template>
|
||||
<lay-upload @done="getUploadFile2" :disabled="true" :disabledPreview="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 | -- |
|
||||
| disabledPreview | 设置文件预览插槽区域为禁用状态 | boolean | false | -- |
|
||||
| cut | 是否开启选择图片后检测,设置true可开启 | boolean | false | -- |
|
||||
| cutOptions | 开启剪裁的模态弹窗与剪裁框的配置 | object | { layerOption,copperOption } | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Upload 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 名称 | 描述 | 参数 |
|
||||
| ------- | -------- | ---- |
|
||||
| preview | 自定义预览效果 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Upload 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 名称 | 描述 | 参数 |
|
||||
| ------- | -------- | ---- |
|
||||
| choose | 打开系统选择文件窗体的回调 | -- |
|
||||
| before | 上传事务开启前的回调 | -- |
|
||||
| done | 上传事务结束的回调 | -- |
|
||||
| error | 上传事务中出现错误的回调 | -- |
|
||||
| cutdown | 剪裁完成 | -- |
|
||||
| cutclose | 剪裁取消 | -- |
|
||||
:::
|
||||
|
||||
::: contributor upload
|
||||
:::
|
||||
|
||||
::: previousNext upload
|
||||
:::
|
||||
|
||||
162
package/document-component/src/document/zh-CN/guide/changelog.md
Normal file
162
package/document-component/src/document/zh-CN/guide/changelog.md
Normal file
@@ -0,0 +1,162 @@
|
||||
::: 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.2.x">
|
||||
<ul>
|
||||
<a name="1-2-0"></a>
|
||||
<li>
|
||||
<h3>1.2.1 <span class="layui-badge-rim">2022-06-21</span></h3>
|
||||
<ul>
|
||||
<li>[新增] dropdown 组件 placement 属性, 设置下拉面板位置。</li>
|
||||
<li>[新增] dropdown 组件 autoFitPosition 属性, 超出浏览器边界自动调整下拉面板位置, 默认为 true。</li>
|
||||
<li>[新增] dropdown 组件 autoFitWidth 与 autoFitMinWidth 属性, 是否将下拉面板宽度与最小宽度设置为触发器宽度, 默认 false。</li>
|
||||
<li>[新增] dropdown 组件 updateAtScroll 属性, 是否在容器滚动时更新下拉面板的位置,默认 false。</li>
|
||||
<li>[新增] dropdown 组件 autoFixPosition 属性, 是否在触发器或下拉面板尺寸变化时更新下拉面板位置, 默认 true。</li>
|
||||
<li>[新增] dropdown 组件 clickOutsideToClose 属性, 点击面板外部关闭下拉, 默认 true。</li>
|
||||
<li>[新增] dropdown 组件 contentOffset 属性, 下拉面板距离触发器的偏移距离，默认 2。</li>
|
||||
<li>[新增] progress 组件 circleSize 和 circleWidth 属性, 用于控制环形进度条尺寸与线条宽度。</li>
|
||||
<li>[修复] progress 组件 circle 模式夜间主题不兼容的问题。</li>
|
||||
<li>[新增] carousel 组件 过渡动画，默认为滑动。</li>
|
||||
<li>[修复] carousel 组件 autoplay 属性为false时仍自动播放问题。</li>
|
||||
<li>[修复] cascader 组件 按需加载无法正常引入使用。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-timeline-item>
|
||||
<lay-timeline-item title="1.1.x">
|
||||
<ul>
|
||||
<a name="1-1-9"></a>
|
||||
<li>
|
||||
<h3>1.1.10 <span class="layui-badge-rim">2022-06-21</span></h3>
|
||||
<ul>
|
||||
<li>[修复] darkreader 依赖不存在的问题</li>
|
||||
<li>[修复] cascader 组件的样式文件污染</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-1-9"></a>
|
||||
<li>
|
||||
<h3>1.1.9 <span class="layui-badge-rim">2022-06-21</span></h3>
|
||||
<ul>
|
||||
<li>[新增] progress 组件 circle 属性, 支持环形进度条</li>
|
||||
<li>[新增] cascader 组件, 将数据按照指定的格式传入后分层分级，通过此组件逐级查看并选择</li>
|
||||
<li>[新增] page-header 组件,页面的路径比较简单,则使用页头组件要,比面包屑更直观一点</li>
|
||||
<li>[修复] layer 组件 btn 属性 callback 回调参数 id 为空的问题</li>
|
||||
<li>[优化] layer 组件 callback 回调 id 参数, 配合 layer.close() 关闭当前弹层</li>
|
||||
<li>[优化] layui-vue 在 nuxt3 中的使用, 将 darkreader 替换为 ssr-darkreader</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-1-8"></a>
|
||||
<li>
|
||||
<h3>1.1.8 <span class="layui-badge-rim">2022-06-20</span></h3>
|
||||
<ul>
|
||||
<li>[新增] provider 组件 theme 属性 auto 值, 自动跟随系统主题</li>
|
||||
<li>[新增] checkbox 组件 is-indeterminate 属性, 用于展示半选状态</li>
|
||||
<li>[新增] layui-vue-helper 插件, 用于 Visual Studio Code 辅助开发</li>
|
||||
<li>[新增] textarea 组件 show-count 属性, 用于展示输入长度与 max-length</li>
|
||||
<li>[修复] carousel 组件加载时无法获取 carousel-item 轮播项</li>
|
||||
<li>[修复] input-number 组件 modelValue 属性类型错误</li>
|
||||
<li>[修复] checkbox 组件 夜间模式 选中状态异常</li>
|
||||
<li>[优化] table 组件 checkedKeys 属性, 加入半选状态</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-1-7"></a>
|
||||
<li>
|
||||
<h3>1.1.7 <span class="layui-badge-rim">2022-06-13</span></h3>
|
||||
<ul>
|
||||
<li>[新增] upload 组件 default 插槽, 允许自定义上传入口</li>
|
||||
<li>[新增] transfer 组件 width 与 height 属性, 允许自定义盒子尺寸</li>
|
||||
<li>[新增] table 组件 max-height 与 height 属性, 超出指定高度标题固定</li>
|
||||
<li>[修复] transfer 组件 input 样式, 由原生 input 修改为 lay-input 组件</li>
|
||||
<li>[修复] transfer 组件 transfer-data 高度超出 transfer-box 的问题</li>
|
||||
<li>[修复] table 组件 按需加载 时, 内置 checkbox 无法正常显示的问题</li>
|
||||
<li>[优化] input 组件 modelValue 属性非必填, 使用 @input 回调取值</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-1-6"></a>
|
||||
<li>
|
||||
<h3>1.1.6 <span class="layui-badge-rim">2022-06-11</span></h3>
|
||||
<ul>
|
||||
<li>[新增] input 组件 prefix-icon 属性, 用于设置输入框前置图标</li>
|
||||
<li>[新增] input 组件 suffix-icon 属性, 用于设置输入框后置图标</li>
|
||||
<li>[修复] date-picker 组件 v-model 无法解析 yy-mm-dd 年月日, 会显示现在日期的问题</li>
|
||||
<li>[优化] dropdown 组件 trigger 属性为 context-menu 值, 不再根据鼠标位置展示内容</li>
|
||||
<li>[优化] input-number 组件 v-model 内容默认对齐方式为 center, 更符合普遍的审美</li>
|
||||
<li>[升级] vue, vueuse, vue-i18n, darkreader, rollup 等核心依赖 </li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-1-5"></a>
|
||||
<li>
|
||||
<h3>1.1.5 <span class="layui-badge-rim">2022-06-04</span></h3>
|
||||
<ul>
|
||||
<li>[新增] input 组件 label-position 属性, 通过设置改变表单域标签的位置, top、left 为可选值</li>
|
||||
<li>[修复] tab 组件 brief 风格 position 为 bottom 时 active-bar 的位置</li>
|
||||
<li>[修复] tab 组件 brief 风格 background-color 为 transparent 透明色</li>
|
||||
<li>[优化] tab 组件 tab-panel 宽度超出当前组件宽度时, 增加左右滑动的能力</li>
|
||||
<li>[优化] input 组件 foucs 状态, 新增 global-checked-color 选中色</li>
|
||||
<li>[优化] layer 组件 夜间模式 样式, 新增 border 边框样式</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-1-4"></a>
|
||||
<li>
|
||||
<h3>1.1.4 <span class="layui-badge-rim">2022-05-29</span></h3>
|
||||
<ul>
|
||||
<li>[新增] table 组件 childrenColumnName 属性, 配置 children 子节点为其他字段</li>
|
||||
<li>[新增] table 组件 indent-size 属性, 用于 tree-table 模式控制每一层的缩进宽度</li>
|
||||
<li>[新增] table 组件 expand 插槽, 内容较多不能一次性完全展示时使用, 参数 data 为当前行数据</li>
|
||||
<li>[新增] table 组件 children 字段解析, 当字段中存在 children 时会自动转化为树表</li>
|
||||
<li>[新增] tree 组件 title 插槽, 参数 data 为当前行数据, 用于自定义节点标题</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-1-3"></a>
|
||||
<li>
|
||||
<h3>1.1.3 <span class="layui-badge-rim">2022-05-27</span></h3>
|
||||
<ul>
|
||||
<li>[新增] input 组件 clear 事件, 清空内容时触发的无参事件</li>
|
||||
<li>[新增] avatar 组件 alt 属性, 用于设置描述图像无法正常显示时的替换文本</li>
|
||||
<li>[新增] radio-group 组件, 公用 name change v-model 属性, 简化多 radio 使用</li>
|
||||
<li>[修复] tab 组件初始化时, 因无法监听到 slots 变化, 而导致 layui-tab-title 无法正常显示的问题</li>
|
||||
<li>[优化] input 组件 allow-clear 触发策略, 由始终显示调整为 v-model 不为空显示</li>
|
||||
<li>[优化] icon-picker 组件 search 功能, 为 input 输入框增加清空操作</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-timeline-item>
|
||||
</lay-timeline>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
61
package/document-component/src/document/zh-CN/guide/dark.md
Normal file
61
package/document-component/src/document/zh-CN/guide/dark.md
Normal file
@@ -0,0 +1,61 @@
|
||||
::: title 夜间模式
|
||||
:::
|
||||
|
||||
::: describe 默认情况下, 网站主题为日间模式。
|
||||
:::
|
||||
|
||||
::: describe 若启用夜间模式, 使用 "全局配置" 组件配合 theme 属性, 设置为 `dark` 值。
|
||||
:::
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<lay-config-provider :theme="theme">
|
||||
<App />
|
||||
</lay-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const theme = ref('dark')
|
||||
</script>
|
||||
```
|
||||
|
||||
::: title 偏好设置
|
||||
:::
|
||||
|
||||
::: describe 若内置的夜间模式不满足要求时, 可通过 dark-partial 属性进行偏好设置。
|
||||
:::
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<lay-config-provider :theme="theme" :dark-partial="darkPartial">
|
||||
<App />
|
||||
</lay-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const theme = ref('dark')
|
||||
|
||||
const darkPartial = {
|
||||
brightness: 100,
|
||||
contrast: 90,
|
||||
grayscale: 0,
|
||||
darkSchemeBackgroundColor: "black";
|
||||
darkSchemeTextColor: "white";
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
::: title Dark Partial 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ----------- | -------- | ------- | --------- | ---------------------------------- |
|
||||
| brightness | 亮度 | `number` | `100` | `0 - 100` |
|
||||
| contrast | 对比度 | `number` | `100` | `0 - 100` |
|
||||
| grayscale | 灰度值 | `number` | `0` | `0 - 100` |
|
||||
| darkSchemeBackgroundColor | 背景颜色 | `string` | -- | -- |
|
||||
| darkSchemeTextColor | 前景颜色 | `string` | -- | -- |
|
||||
|
||||
:::
|
||||
@@ -0,0 +1,193 @@
|
||||
::: title 快速上手
|
||||
:::
|
||||
|
||||
<br>
|
||||
<p>
|
||||
<a href="http://layui-vue.pearadmin.com" style="margin-left:30px;">
|
||||
<img 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="../../../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 自动按需
|
||||
:::
|
||||
|
||||
::: describe 安装 <a href="https://github.com/antfu/unplugin-vue-components" target="_blank" style="color:#5FB878"><code>unplugin-vue-components</code></a> 和 <a href="https://github.com/antfu/unplugin-auto-import" target="_blank" style="color:#5FB878"><code>unplugin-auto-import</code></a> 插件，插件会自动解析模板中用到的组件，并引入组件和样式。
|
||||
:::
|
||||
|
||||
```
|
||||
npm install -D unplugin-vue-components unplugin-auto-import
|
||||
```
|
||||
|
||||
::: describe 修改 vite.config.js 文件
|
||||
:::
|
||||
|
||||
```js
|
||||
// vite.config.ts
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { LayuiVueResolver } from 'unplugin-vue-components/resolvers'
|
||||
|
||||
export default {
|
||||
plugins: [
|
||||
// ...其它插件
|
||||
AutoImport({
|
||||
resolvers: [LayuiVueResolver()],
|
||||
}),
|
||||
// 自动解析 layui-vue 组件
|
||||
Components({
|
||||
resolvers: [LayuiVueResolver()],
|
||||
}),
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
::: describe LayuiVueResolver 类型声明
|
||||
:::
|
||||
|
||||
```ts
|
||||
export declare function LayuiVueResolver(
|
||||
options?: LayuiVueResolverOptions = {}
|
||||
): ComponentResolver
|
||||
|
||||
export interface LayuiVueResolverOptions {
|
||||
/**
|
||||
* 将样式与组件一起导入
|
||||
*
|
||||
* @default 'css'
|
||||
*/
|
||||
importStyle?: boolean | 'css'
|
||||
|
||||
/**
|
||||
* 是否解析图标
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
resolveIcons?: boolean
|
||||
|
||||
/**
|
||||
* 排除不需要自动导入的组件
|
||||
*
|
||||
* eg: exclude: ['LayDocTable', /^LayDoc[A-Z]/,]
|
||||
*/
|
||||
exclude?: Array<string | RegExp>;
|
||||
}
|
||||
```
|
||||
|
||||
::: title 手动按需
|
||||
:::
|
||||
|
||||
::: describe 需要手动引入组件样式
|
||||
:::
|
||||
|
||||
```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 提供商有不同的引入方式，我们在这里以 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="openLayer">Hello</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>
|
||||
```
|
||||
@@ -0,0 +1,21 @@
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
<p>
|
||||
<a href="http://layui-vue.pearadmin.com">
|
||||
<img 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="2022年，layui-vue 里程碑版本 1.0.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>
|
||||
@@ -0,0 +1,38 @@
|
||||
::: title 国际化
|
||||
:::
|
||||
|
||||
::: describe 目前的默认文案是简体中文，如果需要使用其他语言，可以参考下面的方案。
|
||||
:::
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<lay-config-provider locale="zh_CN">
|
||||
<App />
|
||||
</lay-config-provider>
|
||||
</template>
|
||||
```
|
||||
::: describe layui-vue 内部会维护一个 vue-i18n 实例, 你无需再去创建，直接使用 useI18n() 获取即可
|
||||
:::
|
||||
|
||||
::: describe 你可以使用 locales 属性来扩展语言包, 用户自定义语言包优先级大于组件库内部维护的语言包, 即你可以扩展亦可以覆盖。
|
||||
:::
|
||||
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<lay-config-provider locale="zh_CN" :locales="locales">
|
||||
<App />
|
||||
</lay-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const locales = [
|
||||
'zh_CN': {
|
||||
message: '你好, layui-vue'
|
||||
},
|
||||
'en_US': {
|
||||
message: 'hello, layui-vue'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
```
|
||||
158
package/document-component/src/document/zh-CN/guide/member.md
Normal file
158
package/document-component/src/document/zh-CN/guide/member.md
Normal file
@@ -0,0 +1,158 @@
|
||||
::: 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!avatar200"></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
|
||||
|
||||
<a href="https://github.com/layui-vue/layui-vue/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=layui-vue/layui-vue" />
|
||||
</a>
|
||||
|
||||
:::
|
||||
@@ -0,0 +1,67 @@
|
||||
::: title Visual Studio Code 插件
|
||||
:::
|
||||
|
||||
::: describe layui-vue-helper 是 layui-vue 的开发增强工具，提供代码片段，自动补全，悬浮提示功能
|
||||
:::
|
||||
|
||||
::: title 安装
|
||||
:::
|
||||
|
||||
::: describe 在 Visual Studio Code 内置或网页版扩展市场搜索 layui-vue-helper，点击安装即可，插件会在 Vue 和 HTML 文件中自动激活
|
||||
:::
|
||||
|
||||
::: title 自动补全
|
||||
:::
|
||||
|
||||
> 按 `Ctrl+Space` (Windows, Linux) 或 `Cmd+Space` (macOS) 查看自动补全列表，目前只支持属性和事件补全
|
||||
|
||||
> 支持 Vue 和 HTML 文件
|
||||
|
||||
> 
|
||||
|
||||
::: title 文档悬停提示
|
||||
:::
|
||||
|
||||
> 移动光标到 layui-vue 的 tag 或 prop，显示悬浮文档。
|
||||
|
||||
> 
|
||||
|
||||
::: title 代码片段
|
||||
:::
|
||||
|
||||
> 输入片段触发词，按 `Tab` 切换预设输入点
|
||||
|
||||
> 
|
||||
|
||||
> **其它代码片段的触发词和 layui-vue 组件名一致**
|
||||
|
||||
::: table
|
||||
|
||||
| Trigger Key | Describe |
|
||||
|-------------|-------------------------|
|
||||
| layer-open | layer-vue 弹层 open()方法|
|
||||
| layer-load | layer-vue 弹层 load()方法|
|
||||
| layer-confirm| layer-vue 弹层 confirm()方法|
|
||||
| layer-msg | layer-vue 弹层 msg()方法|
|
||||
| layer-drawer| layer-vue 弹层 drawer()方法|
|
||||
| lay-cdn | layui-vue CDN |
|
||||
| lay-cdn-es | layui-vue ES Module CDN |
|
||||
| lay-cdn-css | layui-vue css CDN |
|
||||
| v-cdn | Vue 3 CDN |
|
||||
| v-cdn-es | Vue 3 ES Module CDN |
|
||||
| !v | Vue setup 传统模板 |
|
||||
| !vs | Vue setup 语法糖模板 |
|
||||
| !lay-html | layui-vue-html 模板 |
|
||||
| !lay-html-es| layui-vue-html ES Module 模板 |
|
||||
|
||||
:::
|
||||
<style>
|
||||
.markdown-body blockquote img{
|
||||
width: 650px;
|
||||
height: 400px;
|
||||
}
|
||||
.markdown-body table{
|
||||
margin-left: 35px;
|
||||
width: 650px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,11 @@
|
||||
::: title 常见问题
|
||||
:::
|
||||
|
||||
::: describe 以下整理了一些 Layui Vue 社区常见的问题和官方答复，在提问之前建议找找有没有类似的问题。
|
||||
:::
|
||||
|
||||
::: describe 若你想在 DOM 中直接书写 Vue 模板，Vue 则必须从 DOM 中获取模板字符串。因为浏览器的原生 HTML 解析行为，因此有一些需要注意的事项。
|
||||
:::
|
||||
|
||||
::: describe <a>https://staging-cn.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats</a >
|
||||
:::
|
||||
53
package/document-component/src/document/zh-CN/guide/theme.md
Normal file
53
package/document-component/src/document/zh-CN/guide/theme.md
Normal file
@@ -0,0 +1,53 @@
|
||||
::: 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-component/src/entry-client.ts
Normal file
7
package/document-component/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-component/src/entry-server.ts
Normal file
52
package/document-component/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-component/src/language/en_US.ts
Normal file
15
package/document-component/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-component/src/language/zh_CN.ts
Normal file
16
package/document-component/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: "下载量",
|
||||
},
|
||||
};
|
||||
391
package/document-component/src/layouts/Layout.vue
Normal file
391
package/document-component/src/layouts/Layout.vue
Normal file
@@ -0,0 +1,391 @@
|
||||
<template>
|
||||
<lay-config-provider
|
||||
:locale="locale"
|
||||
:locales="locales"
|
||||
:theme="appStore.theme"
|
||||
:themeVariable="appStore.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 class="theme-panel">
|
||||
<lay-color-picker
|
||||
v-model="appStore.themeVariable['--global-primary-color']"
|
||||
></lay-color-picker>
|
||||
<lay-color-picker
|
||||
v-model="appStore.themeVariable['--global-normal-color']"
|
||||
></lay-color-picker>
|
||||
<lay-color-picker
|
||||
v-model="appStore.themeVariable['--global-warm-color']"
|
||||
></lay-color-picker>
|
||||
<lay-color-picker
|
||||
v-model="appStore.themeVariable['--global-danger-color']"
|
||||
></lay-color-picker>
|
||||
<lay-color-picker
|
||||
v-model="appStore.themeVariable['--global-checked-color']"
|
||||
></lay-color-picker>
|
||||
<lay-input
|
||||
v-model="appStore.themeVariable['--global-border-radius']"
|
||||
style="display: inline-block; width: 130px"
|
||||
></lay-input>
|
||||
<lay-color-picker
|
||||
v-model="appStore.themeVariable['--global-neutral-color-1']"
|
||||
></lay-color-picker>
|
||||
<lay-color-picker
|
||||
v-model="appStore.themeVariable['--global-neutral-color-2']"
|
||||
></lay-color-picker>
|
||||
<lay-color-picker
|
||||
v-model="appStore.themeVariable['--global-neutral-color-3']"
|
||||
></lay-color-picker>
|
||||
<lay-color-picker
|
||||
v-model="appStore.themeVariable['--global-neutral-color-4']"
|
||||
></lay-color-picker>
|
||||
<lay-color-picker
|
||||
v-model="appStore.themeVariable['--global-neutral-color-5']"
|
||||
></lay-color-picker>
|
||||
<lay-color-picker
|
||||
v-model="appStore.themeVariable['--global-neutral-color-6']"
|
||||
></lay-color-picker>
|
||||
<lay-color-picker
|
||||
v-model="appStore.themeVariable['--global-neutral-color-7']"
|
||||
></lay-color-picker>
|
||||
<lay-color-picker
|
||||
v-model="appStore.themeVariable['--global-neutral-color-8']"
|
||||
></lay-color-picker>
|
||||
</div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="https://gitee.com/layui/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="appStore.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)"> {{ version }} </a>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-header>
|
||||
<router-view></router-view>
|
||||
</lay-layout>
|
||||
</lay-config-provider>
|
||||
</template>
|
||||
<script>
|
||||
import { provide, ref, watch } 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";
|
||||
import { useAppStore } from "../store/app";
|
||||
import config from "../../../component/package.json";
|
||||
|
||||
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 },
|
||||
];
|
||||
const appStore = useAppStore();
|
||||
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;
|
||||
};
|
||||
|
||||
const version = config.version;
|
||||
|
||||
provide("version", version);
|
||||
|
||||
return {
|
||||
t,
|
||||
menus,
|
||||
locale,
|
||||
version,
|
||||
locales,
|
||||
appStore,
|
||||
currentPath,
|
||||
handleClick,
|
||||
changeLocale,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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 {
|
||||
margin-top: -5px;
|
||||
height: 45px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.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-menu li,
|
||||
.layui-menu-body-title a {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
.layui-side hr {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.switch svg {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.theme-panel {
|
||||
width: 380px;
|
||||
padding: 0px 10px 10px 10px;
|
||||
}
|
||||
|
||||
.theme-panel > * {
|
||||
margin-right: 9px;
|
||||
}
|
||||
</style>
|
||||
32
package/document-component/src/main.ts
Normal file
32
package/document-component/src/main.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import Layout from "./App.vue";
|
||||
import { App, createApp as _createApp } from "vue";
|
||||
import { createRouter } from "./router/index";
|
||||
import { Router } from "vue-router";
|
||||
import Store from "./store";
|
||||
import layui from "../../component/src/index";
|
||||
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 LayContributor from "./components/LayContributor.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(Store)
|
||||
.use(router)
|
||||
.component("LayCode", LayCode)
|
||||
.component("LaySearch", LaySearch)
|
||||
.component("LayTableBox", LayTableBox)
|
||||
.component("LayAnchor", LayAnchor)
|
||||
.component("LayContributor", LayContributor);
|
||||
|
||||
return { app, router };
|
||||
}
|
||||
42
package/document-component/src/plugin/all-plugins.ts
Normal file
42
package/document-component/src/plugin/all-plugins.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
import Markdown from "vite-plugin-md";
|
||||
import container from "markdown-it-container";
|
||||
import preWrapper from "./pre-wrapper";
|
||||
import highlight from "./highlight";
|
||||
import snippet from "./snippet";
|
||||
import demo from "./create-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 createPreviousNext from "./create-previous-next";
|
||||
import createContributor from "./create-contributor";
|
||||
|
||||
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(...createPreviousNext("previousNext"))
|
||||
.use(...createContributor("contributor"));
|
||||
},
|
||||
}),
|
||||
] as any;
|
||||
|
||||
export default plugins;
|
||||
33
package/document-component/src/plugin/create-anchor.ts
Normal file
33
package/document-component/src/plugin/create-anchor.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
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): 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";
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
28
package/document-component/src/plugin/create-contributor.ts
Normal file
28
package/document-component/src/plugin/create-contributor.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
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): 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-contributor file-path='${info}'></lay-contributor>`;
|
||||
} else {
|
||||
return ``;
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
140
package/document-component/src/plugin/create-demo.ts
Normal file
140
package/document-component/src/plugin/create-demo.ts
Normal file
@@ -0,0 +1,140 @@
|
||||
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>
|
||||
`;
|
||||
},
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user