📝: chore: 补充文档
This commit is contained in:
sight
parent
21835edb61
commit
8ffb6723d1
@ -6,7 +6,7 @@ button + button {
|
||||
button {
|
||||
height: 38px;
|
||||
line-height: 36px;
|
||||
padding: 0 18px;
|
||||
padding: 0 18px !important;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
</form>
|
||||
</template>
|
||||
<script setup>
|
||||
const emit = defineEmits("add", "sub");
|
||||
const emit = defineEmits(["add", "sub"]);
|
||||
|
||||
const add = () => {
|
||||
emit("add");
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'is-fixed': isFixContorl }" class="control">
|
||||
<i class="layui-icon layui-icon-play btn" @click="onPlayground" />
|
||||
<i class="layui-icon layui-icon-file btn" @click="copy"></i>
|
||||
<i class="layui-icon layui-icon-fonts-code btn" @click="toggle"></i>
|
||||
</div>
|
||||
@ -20,6 +21,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref, watch } from "vue";
|
||||
import { usePlayGround } from "../composable/usePlayground";
|
||||
|
||||
const meta = ref<HTMLElement>({} as HTMLElement);
|
||||
const isFixContorl = ref(false);
|
||||
@ -31,6 +33,13 @@ const toggle = function () {
|
||||
show.value = !show.value;
|
||||
};
|
||||
|
||||
const onPlayground = async function () {
|
||||
const foundCode = meta.value.querySelector(".language-html");
|
||||
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];
|
||||
@ -64,7 +73,9 @@ const copy = function () {
|
||||
}
|
||||
|
||||
if (successful) {
|
||||
window.alert("复制成功");
|
||||
} else {
|
||||
window.alert("复制失败");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
147
package/document-layer/src/composable/usePlayground.ts
Normal file
147
package/document-layer/src/composable/usePlayground.ts
Normal file
@ -0,0 +1,147 @@
|
||||
import type { BuiltInParserName } from "prettier";
|
||||
import { zlibSync, unzlibSync, strToU8, strFromU8 } from "fflate";
|
||||
import extraCss from "../assets/css/index.css?raw";
|
||||
|
||||
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*[\"|\'][^\;\"\']*[\"|\']/;
|
||||
|
||||
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/layer-vue"`);
|
||||
// console.log("layer",code);
|
||||
}
|
||||
|
||||
code = await formatCode(MAIN_FILE_NAME, code);
|
||||
const originCode = {
|
||||
[MAIN_FILE_NAME]: code,
|
||||
"index.css": extraCss,
|
||||
};
|
||||
|
||||
const encoded = utoa(JSON.stringify(originCode));
|
||||
const link = `https://layui-vue.gitee.io/sandbox-vue/#${encoded}`;
|
||||
return {
|
||||
code,
|
||||
encoded,
|
||||
link,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
* @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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 去除字符串两端的空白行
|
||||
* @param str
|
||||
* @returns
|
||||
*/
|
||||
function trimBr(str: string): string {
|
||||
return str.replace(/(^[\r\n]*)|([\r\n]*$)/, "");
|
||||
}
|
||||
|
||||
export function utoa(data: string): string {
|
||||
const buffer = strToU8(data);
|
||||
const zipped = zlibSync(buffer, { level: 9 });
|
||||
const binary = strFromU8(zipped, true);
|
||||
return btoa(binary);
|
||||
}
|
||||
|
||||
export function atou(base64: string): string {
|
||||
const binary = atob(base64);
|
||||
|
||||
// zlib header (x78), level 9 (xDA)
|
||||
if (binary.startsWith("\x78\xDA")) {
|
||||
const buffer = strToU8(binary, true);
|
||||
const unzipped = unzlibSync(buffer);
|
||||
return strFromU8(unzipped);
|
||||
}
|
||||
|
||||
// old unicode hacks for backward compatibility
|
||||
// https://base64.guru/developers/javascript/examples/unicode-strings
|
||||
return decodeURIComponent(escape(binary));
|
||||
}
|
||||
@ -358,7 +358,7 @@ const closeAll = function() {
|
||||
<legend>通讯</legend>
|
||||
</fieldset>
|
||||
|
||||
::: demo 👉 查看 [Children1.vue](https://gitee.com/layui-vue/layer-vue/blob/master/example/src/components/Children1.vue), 通过 h() 函数的第二个参数向 Children1.vue 传递响应式变量。
|
||||
::: demo 👉 查看 [Children1.vue](https://layui-vue.gitee.io/sandbox-vue/#eNqdUkGO00AQ/ErLFyeSY5OrSaJFK87LA3yZtTub2R3PjGba0UaWD5w4cUTiCDwA+AGfQZH4BT127HXEjZu7XNVTXd1t9Mba9NhglEcbwtoqQbgrNMDmviEyGm5KJcunbREZi/rW1NZo1LQuot3508/zx++bbCAOIqltQ0Ani6wgfKYiguOqNhUqBipBInVYC/fEeMaSTTY9CoXm2pdOWgIl9EPo4JnnkRrLXMlvO4IWHIqS5BETOCRceKOOODmDDvbO1BDzUPFMpMQJ3fTzhstGZj24umLeHqSqHOo7jRdumo3YOiTFVOi9lkZ7gjATbCdPizb8HmbMIf796+v5/Y84KXS3fNFcR8nqxRK2O+ilvaU0MIZWACRJIfc6f/nw59vn0Cug3IlYncNhMbOc8KS9o2554fmDqFi9F8pjDwUjXUh+iJqDjZJoGH5VC5s+eqP5GtriAvIK8rbrmHQVw78Hszeu7r/+4w5Ykl30s5N4uYfxBsYEsZbEuVW4lxrfcuEXcSmUwiqe5WydsX6ivQvVEGowkMPd/SOWNK5mFkh4l04KwZe8iIqR4G3YjxVVJfVDDutX9vn1GGVg76LuL+G7LGU=), 通过 h() 函数的第二个参数向 Children1.vue 传递响应式变量。
|
||||
|
||||
<template>
|
||||
<button @click="openComponent1">数据</button>
|
||||
@ -384,7 +384,7 @@ const openComponent1 = () => {
|
||||
|
||||
:::
|
||||
|
||||
::: demo 👉 查看 [Children2.vue](https://gitee.com/layui-vue/layer-vue/blob/master/example/src/components/Children2.vue), 通过 h() 函数的第二个参数声明 onXxx() 形式的函数完成 Children2.vue 的事件监听。
|
||||
::: demo 👉 查看 [Children2.vue](https://layui-vue.gitee.io/sandbox-vue/#eNqNksFum0AQhl9lxAWsYmPnSG2UKOoTtLfSA4Yh3hZ2VzC4sRDnSO2h1x6jPkQP7esklfoWnQXWAaWHcGJmv5n9d+ZvnSutV8cGndDZEpa6SAijWAJs9w2RknCZFiL9tIsdpVFeq1IriZIuYid6+PX14ffPbTCAQ5GQuiGgk0auILyl2IHjslQZFpyQTbnnRMDsNpjcxmGdVkITFIm8MZU1YzVSo/lU8J0VQQsVJimJI/pw8DnIoYO8UiW4rN+dcEVywup8eMlhI4I+uZyR1wdRZBXKd5/VyK4Cm7swQ2E0lqmSNYGulIbdWYLXdgt7ZF7VH+XeZr1ec96ezEfGjLeAXQStGVWvZ2UIr48BSFCBIbh/7u/+/vju+kOWOxFXh3DwJnr9oYn5jLKRBVDyKsu8CuvFEwC9wtUxKRpkDZPgFWws1E1avG32L26xfN6iW/Q/ZkCdWfSwWl6k4zvD5JdlolcfayXZdW08JnnlYdt1DM128NyYuarK/u/JpKPhhoitczZtkmXs1Mcv9zObvqCwbtip0ePdt7m/g/HymX2tea1h7fqxFMTTyjAXEt9wUHvvXVbk+i63dz9MnMLZuT2gr/Z6fBikRbn0/6jpadHJ1I0+OhUIdcpuyzhj3jCUam4v5E0Im7W+fW33ZejI6f4B7opkgw==), 通过 h() 函数的第二个参数声明 onXxx() 形式的函数完成 Children2.vue 的事件监听。
|
||||
|
||||
<template>
|
||||
<button @click="openComponent2">事件</button>
|
||||
|
||||
@ -57,18 +57,18 @@ export interface LayModalProps {
|
||||
move?: boolean | string;
|
||||
resize?: boolean | string;
|
||||
type?:
|
||||
| 0
|
||||
| 1
|
||||
| 2
|
||||
| 3
|
||||
| 4
|
||||
| 5
|
||||
| "dialog"
|
||||
| "page"
|
||||
| "iframe"
|
||||
| "loading"
|
||||
| "drawer"
|
||||
| "photos";
|
||||
| 0
|
||||
| 1
|
||||
| 2
|
||||
| 3
|
||||
| 4
|
||||
| 5
|
||||
| "dialog"
|
||||
| "page"
|
||||
| "iframe"
|
||||
| "loading"
|
||||
| "drawer"
|
||||
| "photos";
|
||||
content?: string | Function | object | VNodeTypes;
|
||||
isHtmlFragment?: boolean;
|
||||
shade?: boolean | string;
|
||||
@ -112,9 +112,9 @@ const props = withDefaults(defineProps<LayModalProps>(), {
|
||||
resize: false,
|
||||
isHtmlFragment: false,
|
||||
isOutAnim: true,
|
||||
destroy: () => { },
|
||||
success: () => { },
|
||||
end: () => { },
|
||||
destroy: () => {},
|
||||
success: () => {},
|
||||
end: () => {},
|
||||
yesText: "确定",
|
||||
isFunction: false,
|
||||
isMessage: false,
|
||||
@ -172,8 +172,8 @@ const firstOpenDelayCalculation = function () {
|
||||
props
|
||||
);
|
||||
}
|
||||
if (props.isHtmlFragment && props.area === 'auto') {
|
||||
area.value = ['auto', 'auto'];
|
||||
if (props.isHtmlFragment && props.area === "auto") {
|
||||
area.value = ["auto", "auto"];
|
||||
}
|
||||
offset.value = calculateOffset(props.offset, area.value, props.type);
|
||||
w.value = area.value[0];
|
||||
@ -404,28 +404,32 @@ const styles = computed<any>(() => {
|
||||
height: h.value,
|
||||
zIndex: index.value,
|
||||
};
|
||||
if (props.isHtmlFragment && props.area === 'auto') {
|
||||
if (props.isHtmlFragment && props.area === "auto") {
|
||||
// @ts-ignore
|
||||
style.maxWidth = 'calc(100% - 2px)';
|
||||
style.maxWidth = "calc(100% - 2px)";
|
||||
// @ts-ignore
|
||||
style.maxHeight = 'calc(100% - 51px)';
|
||||
style.top = '50%';
|
||||
style.left = '50%';
|
||||
style.maxHeight = "calc(100% - 51px)";
|
||||
style.top = "50%";
|
||||
style.left = "50%";
|
||||
if (Array.isArray(offset.value)) {
|
||||
if (offset.value[0].indexOf('px') > -1) {
|
||||
if (offset.value[0].indexOf("px") > -1) {
|
||||
style.top = offset.value[0];
|
||||
}
|
||||
if (offset.value[1].indexOf('px') > -1) {
|
||||
if (offset.value[1].indexOf("px") > -1) {
|
||||
style.left = offset.value[1];
|
||||
}
|
||||
if (offset.value[0].indexOf('%') > -1 || offset.value[1].indexOf('%') > -1) {
|
||||
if (
|
||||
offset.value[0].indexOf("%") > -1 ||
|
||||
offset.value[1].indexOf("%") > -1
|
||||
) {
|
||||
// @ts-ignore
|
||||
style.transform = `translate(-${style.left.indexOf('%')>-1?style.left:0},-${style.top.indexOf('%')>-1?style.top:0})`;
|
||||
style.transform = `translate(-${
|
||||
style.left.indexOf("%") > -1 ? style.left : 0
|
||||
},-${style.top.indexOf("%") > -1 ? style.top : 0})`;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
return style
|
||||
return style;
|
||||
});
|
||||
|
||||
/**
|
||||
@ -592,15 +596,33 @@ defineExpose({ reset, open, close });
|
||||
<template>
|
||||
<div>
|
||||
<!-- 遮盖层 -->
|
||||
<Shade :index="index" :visible="shadeVisible" :opacity="shadeOpacity" @shadeClick="shadeHandle"></Shade>
|
||||
<Shade
|
||||
:index="index"
|
||||
:visible="shadeVisible"
|
||||
:opacity="shadeOpacity"
|
||||
@shadeClick="shadeHandle"
|
||||
></Shade>
|
||||
<!-- 动画容器 -->
|
||||
<transition :enter-active-class="enterActiveClass" :leave-active-class="leaveActiveClass">
|
||||
<transition
|
||||
:enter-active-class="enterActiveClass"
|
||||
:leave-active-class="leaveActiveClass"
|
||||
>
|
||||
<!-- 弹出层 -->
|
||||
<div ref="layero" class="layui-layer layui-layer-border" :class="boxClasses" :style="styles" v-if="visible">
|
||||
<div
|
||||
ref="layero"
|
||||
class="layui-layer layui-layer-border"
|
||||
:class="boxClasses"
|
||||
:style="styles"
|
||||
v-if="visible"
|
||||
>
|
||||
<!-- 标题 -->
|
||||
<Title v-if="showTitle" :title="title"></Title>
|
||||
<!-- 内容 -->
|
||||
<div class="layui-layer-content" :style="{ height: contentHeight }" :class="contentClasses">
|
||||
<div
|
||||
class="layui-layer-content"
|
||||
:style="{ height: contentHeight }"
|
||||
:class="contentClasses"
|
||||
>
|
||||
<template v-if="type === 0 || type === 1 || type === 4">
|
||||
<i v-if="icon" :class="iconClass"></i>
|
||||
<slot v-if="slots.default"></slot>
|
||||
@ -612,26 +634,43 @@ defineExpose({ reset, open, close });
|
||||
</template>
|
||||
</template>
|
||||
<Iframe v-if="type === 2" :src="props.content"></Iframe>
|
||||
<Photos v-if="type === 5" :imgList="props.imgList" :startIndex="props.startIndex"
|
||||
@resetCalculationPohtosArea="resetCalculationPohtosArea"></Photos>
|
||||
<Photos
|
||||
v-if="type === 5"
|
||||
:imgList="props.imgList"
|
||||
:startIndex="props.startIndex"
|
||||
@resetCalculationPohtosArea="resetCalculationPohtosArea"
|
||||
></Photos>
|
||||
</div>
|
||||
<!-- 工具栏 -->
|
||||
<span class="layui-layer-setwin" v-if="type != 3 && type != 5">
|
||||
<a v-if="maxmin && !max" class="layui-layer-min" :class="[min ? 'layui-layer-ico layui-layer-maxmin' : '']"
|
||||
href="javascript:;" @click="minHandle">
|
||||
<a
|
||||
v-if="maxmin && !max"
|
||||
class="layui-layer-min"
|
||||
:class="[min ? 'layui-layer-ico layui-layer-maxmin' : '']"
|
||||
href="javascript:;"
|
||||
@click="minHandle"
|
||||
>
|
||||
<cite v-if="!min"></cite>
|
||||
</a>
|
||||
<a v-if="maxmin && !min" class="layui-layer-ico layui-layer-max" :class="[max ? 'layui-layer-maxmin' : '']"
|
||||
href="javascript:;" @click="maxHandle"></a>
|
||||
<a
|
||||
v-if="maxmin && !min"
|
||||
class="layui-layer-ico layui-layer-max"
|
||||
:class="[max ? 'layui-layer-maxmin' : '']"
|
||||
href="javascript:;"
|
||||
@click="maxHandle"
|
||||
></a>
|
||||
<CloseBtn v-if="closeBtn" @closeHandle="closeHandle"></CloseBtn>
|
||||
</span>
|
||||
<!-- 操作栏 -->
|
||||
<div v-if="((btn && btn.length > 0) || type === 0) && !isMessage" class="layui-layer-btn"
|
||||
:class="[`layui-layer-btn-${btnAlign}`]">
|
||||
<div
|
||||
v-if="((btn && btn.length > 0) || type === 0) && !isMessage"
|
||||
class="layui-layer-btn"
|
||||
:class="[`layui-layer-btn-${btnAlign}`]"
|
||||
>
|
||||
<template v-if="btn && btn.length > 0">
|
||||
<template v-for="(b, index) in btn" :key="index">
|
||||
<a :class="[`layui-layer-btn${index}`]" @click="b.callback(id)">{{
|
||||
b.text
|
||||
b.text
|
||||
}}</a>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user