129 lines
3.3 KiB
Vue
129 lines
3.3 KiB
Vue
<template>
|
|
<Modal
|
|
v-model="isLightAppModalShow"
|
|
footer-hide
|
|
class-name="bsch-oepn-modal"
|
|
scrollable
|
|
:width="modalWidth"
|
|
:fullscreen="isFullscreen"
|
|
:title="modalTitle"
|
|
:transfer="false"
|
|
@on-cancel="handleModalCancel"
|
|
>
|
|
<template #header>
|
|
<div class="fix custom-title">
|
|
<div class="fl">{{ modalTitle }}</div>
|
|
<a class="fr" @click="isFullState = !isFullState">
|
|
<Icon v-if="!isFullState" :size="18" type="ios-expand" />
|
|
<Icon v-if="isFullState" :size="18" type="ios-contract" />
|
|
</a>
|
|
</div>
|
|
</template>
|
|
<div class="tc" :style="bschOpenIframeStyle" v-if="!!isLoading">
|
|
<img class="align-middle" style="width: 100px" :src="requireImg('page-loading.svg')" alt="" />
|
|
</div>
|
|
<iframe
|
|
v-if="isIframeShow"
|
|
v-show="!isLoading"
|
|
@load="onIframeLoad"
|
|
:style="bschOpenIframeStyle"
|
|
:src="iframeUrl"
|
|
frameborder="0"
|
|
></iframe>
|
|
</Modal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, onMounted, onUnmounted, ref } from "vue";
|
|
import mittBus from "@/utils/mitt";
|
|
import { requireImg } from "@/utils/hook/useImg";
|
|
import { LightAppModal } from "@/types";
|
|
|
|
const isLightAppModalShow = ref(false),
|
|
isIframeShow = ref(false),
|
|
isLoading = ref(true),
|
|
modalWidth = ref(80),
|
|
modalHeight = ref(70),
|
|
modalTitle = ref(),
|
|
iframeUrl = ref();
|
|
|
|
const isFullState = ref(false);
|
|
const bschOpenIframeStyle = computed(() => {
|
|
if (isFullscreen.value)
|
|
return {
|
|
width: "100%",
|
|
height: "100%",
|
|
border: "none",
|
|
};
|
|
let height = ((document.documentElement.clientHeight - 52) * modalHeight.value) / 100;
|
|
return {
|
|
width: "100%",
|
|
height: height + "px",
|
|
border: "none",
|
|
};
|
|
});
|
|
|
|
const isFullscreen = computed(() => (modalWidth.value == 100 && modalHeight.value == 100) || !!isFullState.value);
|
|
|
|
onMounted(function () {
|
|
mittBus.on("showLightAppModal", (params: LightAppModal) => {
|
|
const { title, url, width, height } = params;
|
|
isIframeShow.value = true;
|
|
isLoading.value = true;
|
|
modalTitle.value = title;
|
|
iframeUrl.value = url;
|
|
modalWidth.value = width;
|
|
modalHeight.value = height;
|
|
console.log(title, url, width, height);
|
|
isLightAppModalShow.value = true;
|
|
setTimeout(() => {
|
|
isLoading.value = false;
|
|
}, 300);
|
|
});
|
|
});
|
|
onUnmounted(function () {
|
|
mittBus.off("showLightAppModal");
|
|
});
|
|
|
|
function onIframeLoad() {
|
|
isLoading.value = false;
|
|
}
|
|
|
|
function handleModalCancel() {
|
|
setTimeout(() => {
|
|
isFullState.value = false;
|
|
isIframeShow.value = false;
|
|
}, 300);
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.bsch-oepn-modal {
|
|
iframe {
|
|
width: 100%;
|
|
}
|
|
.ivu-modal-body {
|
|
padding: 0;
|
|
max-height: inherit;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.custom-title {
|
|
width: calc(100% - 30px);
|
|
line-height: 20px;
|
|
color: #17233d;
|
|
position: relative;
|
|
a {
|
|
color: #999 !important;
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 0;
|
|
&:hover {
|
|
color: #17233d !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|