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

Merge branch 'develop' into alpha

Browse Source
This commit is contained in:
就眠儀式 2022-01-29 09:15:11 +08:00
commit 366854317a
14 changed files with 341 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
example/docs/zh-CN/components/animation.md
View File

@ -71,6 +71,113 @@ export default {
}
}
</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 .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: #009688;
cursor: pointer;
color: #fff;
border-radius: 50%;
}
.anim .site-doc-icon li .code {
white-space: nowrap;
}
</style>
:::

5
example/docs/zh-CN/components/backtop.md
View File

@ -11,6 +11,9 @@
<lay-backtop></lay-backtop>
</template>
<script>
</script>
:::
:::title 自定义
@ -35,7 +38,7 @@
<script>
import { ref } from 'vue'
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {

4
example/docs/zh-CN/components/confirm.md
View File

@ -11,7 +11,7 @@
</template>
<script>
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {
@ -39,7 +39,7 @@ export default {
</template>
<script>
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {

4
example/docs/zh-CN/components/drawer.md
View File

@ -90,7 +90,7 @@ export default {
<script>
import { ref } from 'vue'
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {
@ -125,7 +125,7 @@ export default {
<script>
import { ref } from 'vue'
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {

26
example/docs/zh-CN/components/grid.md
View File

@ -105,6 +105,19 @@ export default {
}
}
</script>
<style>
.grid-demo-bg1 {
background-color: #63BA79;
}
.grid-demo {
padding: 10px;
line-height: 50px;
border-radius: 2px;
text-align: center;
background-color: #79C48C;
color: #fff;
}
</style>
:::
@ -136,6 +149,19 @@ export default {
}
}
</script>
<style>
.grid-demo-bg1 {
background-color: #63BA79;
}
.grid-demo {
padding: 10px;
line-height: 50px;
border-radius: 2px;
text-align: center;
background-color: #79C48C;
color: #fff;
}
</style>
:::

91
example/docs/zh-CN/components/layout.md
View File

@ -7,7 +7,7 @@
::: demo
<template>
<lay-layout>
<lay-layout class="example">
<lay-header>header</lay-header>
<lay-body>content</lay-body>
<lay-footer>footer</lay-footer>
@ -27,21 +27,21 @@ export default {
</script>
<style>
.lay-code .layui-footer,
.lay-code .layui-header {
.example .layui-footer,
.example .layui-header {
line-height: 60px;
text-align: center;
background: #87ca9a;
color: white;
}
.lay-code .layui-side {
.example .layui-side {
display: flex;
background: #77c38c;
align-items: center;
justify-content: center;
color: white;
}
.lay-code .layui-body {
.example .layui-body {
display: flex;
background: #5FB878;
align-items: center;
@ -58,7 +58,7 @@ export default {
::: demo
<template>
<lay-layout>
<lay-layout class="example">
<lay-side>left</lay-side>
<lay-body>content</lay-body>
<lay-side>right</lay-side>
@ -76,6 +76,29 @@ export default {
}
}
</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>
:::
@ -85,7 +108,7 @@ export default {
::: demo
<template>
<lay-layout>
<lay-layout class="example">
<lay-header>header</lay-header>
<lay-layout>
<lay-side>side</lay-side>
@ -105,6 +128,29 @@ export default {
}
}
</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>
:::
@ -114,7 +160,7 @@ export default {
::: demo
<template>
<lay-layout>
<lay-layout class="example">
<lay-side>side</lay-side>
<lay-layout>
<lay-header>header</lay-header>
@ -123,7 +169,7 @@ export default {
</lay-layout>
</lay-layout>
<hr>
<lay-layout>
<lay-layout class="example">
<lay-layout>
<lay-header>header</lay-header>
<lay-body>body</lay-body>
@ -132,7 +178,7 @@ export default {
<lay-side>side</lay-side>
</lay-layout>
<hr>
<lay-layout>
<lay-layout class="example">
<lay-header>Header</lay-header>
<lay-body>
<lay-layout>
@ -143,7 +189,7 @@ export default {
<lay-footer>Footer</lay-footer>
</lay-layout>
<hr>
<lay-layout>
<lay-layout class="example">
<lay-header>Header</lay-header>
<lay-body>
<lay-layout>
@ -166,6 +212,29 @@ export default {
}
}
</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>
:::

6
example/docs/zh-CN/components/load.md
View File

@ -16,7 +16,7 @@
<script>
import { ref } from 'vue'
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {
@ -54,7 +54,7 @@ export default {
</template>
<script>
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {
@ -85,7 +85,7 @@ export default {
<script>
import { ref } from 'vue'
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {

20
example/docs/zh-CN/components/modal.md
View File

@ -28,7 +28,7 @@ export default {
return {
visible1
};
},
}
};
</script>
@ -61,7 +61,7 @@ export default {
return {
visible2
};
},
}
};
</script>
@ -94,7 +94,7 @@ export default {
return {
visible3
};
},
}
};
</script>
@ -127,7 +127,7 @@ export default {
return {
visible4
};
},
}
};
</script>
@ -160,7 +160,7 @@ export default {
return {
visible8
};
},
}
};
</script>
@ -193,7 +193,7 @@ export default {
type5,
visible5
};
},
}
};
</script>
@ -231,7 +231,7 @@ export default {
btn6,
visible6
};
},
}
};
</script>
@ -264,7 +264,7 @@ export default {
return {
visible7
};
},
}
};
</script>
@ -283,7 +283,7 @@ export default {
<script>
import { ref, watch } from "vue";
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
import { useRoute, useRouter } from "vue-router";
export default {
setup() {
@ -307,7 +307,7 @@ export default {
close,
closeAll
};
},
}
};
</script>

4
example/docs/zh-CN/components/msg.md
View File

@ -11,7 +11,7 @@
</template>
<script>
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {
@ -42,7 +42,7 @@ export default {
</template>
<script>
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {

1
example/docs/zh-CN/components/select.md
View File

@ -46,7 +46,6 @@ export default {
import { ref } from 'vue'
export default {
name:'selectChange',
setup() {
const value = ref(null);
var i = 1;

20
example/docs/zh-CN/components/splitPanel.md
View File

@ -18,11 +18,6 @@
</template>
<script>
export default {
setup() {
}
}
</script>
:::
@ -44,11 +39,6 @@ export default {
</template>
<script>
export default {
setup() {
}
}
</script>
:::
@ -70,11 +60,6 @@ export default {
</template>
<script>
export default {
setup() {
}
}
</script>
:::
@ -100,11 +85,6 @@ export default {
</template>
<script>
export default {
setup() {
}
}
</script>
:::

19
example/src/components/LayCode.vue
View File

@ -12,8 +12,9 @@
</div>
</div>
<div :class="{ 'is-fixed': isFixContorl }" class="control">
<i class="layui-icon layui-icon-file" @click="copy" />
<i class="layui-icon layui-icon-fonts-code" @click="toggle" />
<i class="layui-icon layui-icon-play btn" @click="onPlayground" title="在 Playground 中打开" />
<i class="layui-icon layui-icon-file btn" @click="copy" title="复制代码" />
<i class="layui-icon layui-icon-fonts-code btn" @click="toggle" title="查看代码"/>
</div>
</div>
</template>
@ -22,6 +23,8 @@
import { layer } from '@layui/layer-vue'
import { onMounted, onUnmounted, ref, watch } from 'vue'
import { usePlayGround } from '../plugin/usePlayground'
const meta = ref<HTMLElement>({} as HTMLElement)
const isFixContorl = ref(false)
const codeAreaHeight = ref(0)
@ -32,6 +35,15 @@ const toggle = function () {
show.value = !show.value
}
const onPlayground = function(){
const foundCodes = meta.value.getElementsByClassName('language-html')
const foundCode = foundCodes[0];
const text = foundCode.textContent || "";
const { link } = usePlayGround(text)
window.open(link)
}
const copy = function () {
const foundCodes = meta.value.getElementsByClassName('language-html')
const foundCode = foundCodes[0];
@ -186,4 +198,7 @@ function handleScroll() {
padding-left: 10px;
padding-right: 10px;
}
.btn:hover::before {
color: #5FB878;
}
</style>

85
example/src/plugin/usePlayground.ts Normal file
View File

@ -0,0 +1,85 @@
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';
// 用于全局引入 layui
const SETUP_CODE = `import { setupLayuiVue } from './layui-vue.js'
setupLayuiVue()`;
/**
* √方案一:转换为setup语法糖
* 方案二:和文档代码保持一致,仅在 setup() 中添加 setupLayuiVue(),全局引入 layui
* 方案三:<script> 和 <script setup> 标签同时存在,文档中的代码都在<script>中, <script setup>仅用来设置 layui
* @param source
* @returns
*/
export const usePlayGround = (source: string) => {
const decodeCode = source;
const result = decodeCode.match(scriptRe)
// 替换 script 标签
// $1 正则第一个括号匹配的内容
let code: string
if (result) {
code = decodeCode.replace(
scriptRe,
`<script lang="ts" setup>
${SETUP_CODE}
$1
</script>`
)
} else {
code = `${decodeCode}
<script lang="ts" setup>
${SETUP_CODE}
</script>
`
}
// 去除 export default,保留其中的内容
const exportDefaultResult = code.match(exportDefaultRe)
if(exportDefaultResult){
code = code.replace(exportDefaultRe,trim(trimBr(exportDefaultResult[1]+`</script>`)))
// console.log("export",code);
}
// 去除 setup 函数,保留其中的内容
const setupResult = code.match(setupRe)
if(setupResult){
code = code.replace(setupRe,trimBr(setupResult[1]))
// console.log("setup",code);
}
// TODO 这是临时方案,需要在 playground 中支持 @layui/layer-vue
// 替换 layer 引入语句
if(code.match(layerRe)){
code = code.replace(layerRe,`import { layer } from "@layui/layui-vue"`)
// console.log("layer",code);
}
const originCode = {
[MAIN_FILE_NAME]: code,
}
const encoded = utoa(JSON.stringify(originCode))
const link = `https://layui-vue.gitee.io/layui-vue-playground/#${encoded}`
return {
encoded,
link,
}
}
//编码
function utoa(data: string): string {
return btoa(unescape(encodeURIComponent(data)));
}
// 去除字符串两端的空白行
function trimBr(str: string): string{
return str.replace(/(^[\r\n]*)|([\r\n]*$)/,"")
}
// 去除字符串两端的空格
function trim(str: string): string {
return str.replace(/(^\s*)|(\s*$)/g, "");
}

3
src/component/button/index.vue
View File

@ -17,6 +17,7 @@ export interface LayButtonProps {
disabled?: boolean | string;
loading?: boolean | string;
nativeType?: "button" | "submit" | "reset";
icon?: string;
}
const props = withDefaults(defineProps<LayButtonProps>(), {
@ -25,6 +26,7 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
loading: false,
disabled: false,
nativeType: "button",
icon: "",
});
const emit = defineEmits(["click"]);
@ -58,6 +60,7 @@ const classes = computed(() => {
:type="nativeType"
@click="onClick"
>
<i v-if="icon" :class="'layui-icon ' + icon"></i>
<i
v-if="loading"
class="layui-icon layui-icon-loading-one layui-anim layui-anim-rotate layui-anim-loop"