Merge branch 'develop' of https://gitee.com/layui-vue/layui-vue into develop

example/src/components/LayCode.vue

@@ -38,9 +38,9 @@ const toggle = function () {
 const onPlayground = function(){
   const foundCodes = meta.value.getElementsByClassName('language-html')
   const foundCode = foundCodes[0];
-  const text = foundCode.textContent || "";
+  const SourceCode = foundCode.textContent || "";
   
-  const { link } = usePlayGround(text)
+  const { link } = usePlayGround(SourceCode, true)
   window.open(link)
 }
 

example/src/plugin/usePlayground.ts

@@ -5,36 +5,32 @@ 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语法糖 
+ * 将代码编码为 URI hash, 生成 playground 链接
- * 方案二:和文档代码保持一致,仅在 setup() 中添加 setupLayuiVue(),全局引入 layui
+ * @param source 源码
- * 方案三:<script> 和 <script setup> 标签同时存在,文档中的代码都在<script>中, <script setup>仅用来设置 layui
+ * @param convertSetupSugar 转换 setup，仅字符串替换，没有做任何语法分析
- * @param source 
+ * @returns 处理后的代码，URI hsah， playground 链接
- * @returns 
+  }
  */
-export const usePlayGround = (source: string) => {
+export const usePlayGround = (source: string, convertSetupSugar: boolean) => {
   const decodeCode = source;
-  const result = decodeCode.match(scriptRe)
+  const scriptResult = decodeCode.match(scriptRe)
 
   // 替换 script 标签
   // $1 正则第一个括号匹配的内容
-  let code: string
+  let code: string = decodeCode
-  if (result) {
+  if (convertSetupSugar) {
+    if (scriptResult) {
       code = decodeCode.replace(
         scriptRe,
-      `<script lang="ts" setup>
+        `<script lang="ts" setup>$1
-${SETUP_CODE}
-$1
 </script>`
       )
     } else {
       code = `${decodeCode}
 <script lang="ts" setup>
-${SETUP_CODE}
+
 </script>
 `
     }
@@ -42,7 +38,7 @@ ${SETUP_CODE}
     // 去除 export default,保留其中的内容
     const exportDefaultResult = code.match(exportDefaultRe)
     if (exportDefaultResult) {
-    code = code.replace(exportDefaultRe,trim(trimBr(exportDefaultResult[1]+`</script>`)))
+      code = code.replace(exportDefaultRe, trimBr(exportDefaultResult[1] + `</script>`).trim())
       // console.log("export",code);
     }
     // 去除 setup 函数,保留其中的内容
@@ -51,8 +47,9 @@ ${SETUP_CODE}
       code = code.replace(setupRe, trimBr(setupResult[1]))
       // console.log("setup",code);
     }
-  // TODO 这是临时方案,需要在 playground 中支持 @layui/layer-vue
+  }
   // 替换 layer 引入语句
+  // playground 中使用最新版 layer 请从 @layui/layer-vue 引入
   if (code.match(layerRe)) {
     code = code.replace(layerRe, `import { layer } from "@layui/layui-vue"`)
     // console.log("layer",code);
@@ -63,7 +60,9 @@ ${SETUP_CODE}
 
   const encoded = utoa(JSON.stringify(originCode))
   const link = `https://layui-vue.gitee.io/layui-vue-playground/#${encoded}`
+  //const link = `http://localhost:3001/layui-vue-playground/#${encoded}`
   return {
+    code,
     encoded,
     link,
   }
@@ -78,8 +77,3 @@ function utoa(data: string): string {
 function trimBr(str: string): string {
   return str.replace(/(^[\r\n]*)|([\r\n]*$)/, "")
 }
-
-// 去除字符串两端的空格 
-function trim(str: string): string { 
-return str.replace(/(^\s*)|(\s*$)/g, ""); 
-}