🐛(component): 尝试解决layer.open 内容自适应
ISSUES CLOSED: #I5E4OM
This commit is contained in:
0o张不歪o0
parent
cf801fffdb
commit
21835edb61
@ -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>
|
||||
|
||||
:::
|
||||
|
||||
@ -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;
|
||||
@ -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,39 +612,22 @@ 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)">{{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user