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

🐛(component): 尝试解决layer.open 内容自适应

Browse Source 
ISSUES CLOSED: #I5E4OM
This commit is contained in:
0o张不歪o0 2022-06-28 10:58:18 +08:00
parent cf801fffdb
commit 21835edb61
2 changed files with 66 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package/document-layer/src/document/zh-CN/demo.md
View File

@ -125,6 +125,7 @@ const load4 = function() {
<button @click="openResize">尺寸拉伸</button>
<button @click="openIndex">设置层级</button>
<button @click="openAreaAuto">内容适应</button>
<button @click="openAreaAuto2">内容适应2</button>
</lay-col>
</lay-row>
</template>
@ -220,6 +221,16 @@ const openAreaAuto = function(){
content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>"
})
}
const openAreaAuto2 = function(){
layer.open({
type:1,
title:"area:auto",
offset:['10px','50%'],
isHtmlFragment:true,
content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>"
})
}
</script>
:::

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

@ -40,6 +40,7 @@ import {
import useMove from "../composable/useMove";
import useResize from "../composable/useResize";
import { zIndexKey } from "../tokens";
import { arrayExpression } from "@babel/types";
export interface LayModalProps {
id?: string;
@ -56,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;
@ -111,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,
@ -171,6 +172,9 @@ const firstOpenDelayCalculation = function () {
props
);
}
if (props.isHtmlFragment && props.area === 'auto') {
area.value = ['auto', 'auto'];
}
offset.value = calculateOffset(props.offset, area.value, props.type);
w.value = area.value[0];
h.value = area.value[1];
@ -393,13 +397,35 @@ const supportMove = function () {
* <p>
*/
const styles = computed<any>(() => {
return {
let style = {
top: t.value,
left: l.value,
width: w.value,
height: h.value,
zIndex: index.value,
};
if (props.isHtmlFragment && props.area === 'auto') {
// @ts-ignore
style.maxWidth = 'calc(100% - 2px)';
// @ts-ignore
style.maxHeight = 'calc(100% - 51px)';
style.top = '50%';
style.left = '50%';
if (Array.isArray(offset.value)) {
if (offset.value[0].indexOf('px') > -1) {
style.top = offset.value[0];
}
if (offset.value[1].indexOf('px') > -1) {
style.left = offset.value[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})`;
}
}
}
return style
});
/**
@ -566,33 +592,15 @@ 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>
@ -604,43 +612,26 @@ 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>