From 43b9d2a2e3e18730df18f839d7111de2d632afe9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=84=A2=E9=B9=8F=E6=9D=83?= <490523604@qq.com> Date: Wed, 26 Jan 2022 08:30:08 +0000 Subject: [PATCH 1/3] =?UTF-8?q?=E6=94=AF=E6=8C=81=E7=9B=B4=E6=8E=A5?= =?UTF-8?q?=E4=BD=BF=E7=94=A8icon=E5=B1=9E=E6=80=A7=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/button/index.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/component/button/index.vue b/src/component/button/index.vue index eda5175f..f2ae0bee 100644 --- a/src/component/button/index.vue +++ b/src/component/button/index.vue @@ -17,6 +17,7 @@ export interface LayButtonProps { disabled?: boolean | string; loading?: boolean | string; nativeType?: "button" | "submit" | "reset"; + icon?: string; } const props = withDefaults(defineProps(), { @@ -25,6 +26,7 @@ const props = withDefaults(defineProps(), { loading: false, disabled: false, nativeType: "button", + icon: "", }); const emit = defineEmits(["click"]); @@ -58,6 +60,7 @@ const classes = computed(() => { :type="nativeType" @click="onClick" > + Date: Sat, 29 Jan 2022 06:43:48 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat(docs):=E9=9B=86=E6=88=90=20layui-vue?= =?UTF-8?q?=20playground;?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/src/components/LayCode.vue | 19 ++++++- example/src/plugin/usePlayground.ts | 85 +++++++++++++++++++++++++++++ 2 files changed, 102 insertions(+), 2 deletions(-) create mode 100644 example/src/plugin/usePlayground.ts diff --git a/example/src/components/LayCode.vue b/example/src/components/LayCode.vue index a1819b7b..e3ce7c16 100644 --- a/example/src/components/LayCode.vue +++ b/example/src/components/LayCode.vue @@ -12,8 +12,9 @@
- - + + +
@@ -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({} 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; +} \ No newline at end of file diff --git a/example/src/plugin/usePlayground.ts b/example/src/plugin/usePlayground.ts new file mode 100644 index 00000000..c69669db --- /dev/null +++ b/example/src/plugin/usePlayground.ts @@ -0,0 +1,85 @@ +const scriptRe = /]*>([\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 + * 方案三:` + ) + } else { + code = `${decodeCode} + +` + } + + // 去除 export default,保留其中的内容 + const exportDefaultResult = code.match(exportDefaultRe) + if(exportDefaultResult){ + code = code.replace(exportDefaultRe,trim(trimBr(exportDefaultResult[1]+``))) + // 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, ""); +} \ No newline at end of file From 53146924aa61c46485638e9757d5730fec0b99bc Mon Sep 17 00:00:00 2001 From: sight <1453017105@qq.com> Date: Sat, 29 Jan 2022 06:46:35 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix(docs):=E9=83=A8=E5=88=86=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E9=80=82=E9=85=8D=20playground?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/docs/zh-CN/components/animation.md | 107 ++++++++++++++++++++ example/docs/zh-CN/components/backtop.md | 5 +- example/docs/zh-CN/components/confirm.md | 4 +- example/docs/zh-CN/components/drawer.md | 4 +- example/docs/zh-CN/components/grid.md | 26 +++++ example/docs/zh-CN/components/layout.md | 91 +++++++++++++++-- example/docs/zh-CN/components/load.md | 6 +- example/docs/zh-CN/components/modal.md | 20 ++-- example/docs/zh-CN/components/msg.md | 4 +- example/docs/zh-CN/components/select.md | 1 - example/docs/zh-CN/components/splitPanel.md | 20 ---- 11 files changed, 236 insertions(+), 52 deletions(-) diff --git a/example/docs/zh-CN/components/animation.md b/example/docs/zh-CN/components/animation.md index 6483a4c9..996bce7f 100644 --- a/example/docs/zh-CN/components/animation.md +++ b/example/docs/zh-CN/components/animation.md @@ -71,6 +71,113 @@ export default { } } + ::: diff --git a/example/docs/zh-CN/components/backtop.md b/example/docs/zh-CN/components/backtop.md index f74b53d3..fe34cbe1 100644 --- a/example/docs/zh-CN/components/backtop.md +++ b/example/docs/zh-CN/components/backtop.md @@ -11,6 +11,9 @@ + + ::: :::title 自定义 @@ -35,7 +38,7 @@ + ::: @@ -136,6 +149,19 @@ export default { } } + ::: diff --git a/example/docs/zh-CN/components/layout.md b/example/docs/zh-CN/components/layout.md index 5544d6fa..6618c897 100644 --- a/example/docs/zh-CN/components/layout.md +++ b/example/docs/zh-CN/components/layout.md @@ -7,7 +7,7 @@ ::: demo ::: @@ -100,11 +85,6 @@ export default { :::