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

fix(layer): 放大缩小时 Iframe 高度自适应

Browse Source
This commit is contained in:
就眠仪式 2021-11-02 20:58:39 +08:00
parent 9e56b83ae3
commit 808f86ba8e
3 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/docs/zh-CN/components/layer.md
View File

@ -259,5 +259,5 @@ export default {
| height | 高 | -- | | height | 高 | -- |
| v-model:visible | 展示 隐藏 | false | | v-model:visible | 展示 隐藏 | false |
| content | 内容 | -- | | content | 内容 | -- |
| shade | 开启遮盖 | -- | | shade | 开启遮盖 | -- |
| shadeClose | 遮盖点击关闭 | -- | | shadeClose | 遮盖点击关闭 | -- |

2
docs/index.html
View File

@ -17,7 +17,7 @@
<!--preload-links--> <!--preload-links-->
</head> </head>
<body style="zoom: 0.9"> <body>
<div id="app"> <div id="app">
<!--app-html--> <!--app-html-->
</div> </div>

33
src/module/layer/index.vue
View File

@ -1,29 +1,31 @@
<template> <template>
<!-- 遮盖 --> <!-- 遮盖 -->
<div <div
class="layui-layer-shade"
style="z-index: 19891020; background-color: rgb(0, 0, 0); opacity: 0.1"
@click="shadeHandle"
v-if="visible && shade" v-if="visible && shade"
class="layui-layer-shade"
style="background-color: rgb(0, 0, 0); opacity: 0.1"
:style="{ zIndex: zIndex }"
@click="shadeHandle"
></div> ></div>
<!-- 元素 --> <!-- 元素 -->
<div <div
v-if="visible" v-if="visible"
:id="id" :id="id"
class="layui-layer" class="layui-layer"
style="z-index: 19891021; position: fixed" style="position: fixed"
:style="{ :style="{
top: top, top: top,
left: left, left: left,
width: width, width: width,
height: height, height: height,
zIndex: zIndex
}" }"
> >
<div class="layui-layer-title" style="cursor: move"> <div class="layui-layer-title" style="cursor: move">
{{ title }} {{ title }}
</div> </div>
<div class="layui-layer-content"> <div class="layui-layer-content" :style="{ height: contentHeight }">
<div v-if="type === 1" :style="{ height: contentHeight }"> <div v-if="type === 1" style="height:100%">
<slot v-if="slot.default"></slot> <slot v-if="slot.default"></slot>
<template v-else> <template v-else>
{{ content }} {{ content }}
@ -35,8 +37,7 @@
allowtransparency="true" allowtransparency="true"
frameborder="0" frameborder="0"
:src="content" :src="content"
style="width: 100%" style="width: 100%;height:100%;"
:style="{ height: contentHeight }"
></iframe> ></iframe>
</div> </div>
<span class="layui-layer-setwin" <span class="layui-layer-setwin"
@ -92,6 +93,7 @@ onUpdated(() => {
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
id?: string id?: string
zIndex?: number
title?: string title?: string
offset?: string[] offset?: string[]
width?: string width?: string
@ -107,6 +109,7 @@ const props = withDefaults(
}>(), }>(),
{ {
id: 'layer', id: 'layer',
zIndex: 99999999,
title: '标题', title: '标题',
offset: () => ['50%', '50%'], offset: () => ['50%', '50%'],
width: '390px', width: '390px',
@ -132,6 +135,20 @@ const contentHeight = ref(
: 'calc(' + height.value + ' - 50px)' : 'calc(' + height.value + ' - 50px)'
) )
watch(max, function () {
if (max.value) {
contentHeight.value =
props.btn.length > 0
? 'calc(100% - 100px)'
: 'calc(100% - 50px)'
} else {
contentHeight.value =
props.btn.length > 0
? 'calc(' + height.value + ' - 100px)'
: 'calc(' + height.value + ' - 50px)'
}
})
const emit = defineEmits(['close', 'update:visible']) const emit = defineEmits(['close', 'update:visible'])
const moveHandle = function () { const moveHandle = function () {