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

📝: chore: 补充文档

Browse Source
This commit is contained in:
sight
2022-06-28 14:07:44 +08:00
parent 21835edb61
commit 8ffb6723d1
6 changed files with 242 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
package/layer/src/component/index.vue
View File

@@ -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>