Skip to content

phsl / admin

Go to a project
Commit 21621fd2 by 芋道源码 Committed by Gitee
Options

!508 【优化】优化iframe布局 

Merge pull request !508 from 半栈幼儿员/hotfix/iframe
parents 7ff082a9 6586ba43
Showing with 33 additions and 28 deletions
src/components/IFrame/src/IFrame.vue
...@@ -7,26 +7,41 @@ const props = defineProps({ ...@@ -7,26 +7,41 @@ const props = defineProps({
src: propTypes.string.def('') src: propTypes.string.def('')
}) })
const loading = ref(true) const loading = ref(true)
const height = ref('')
const frameRef = ref<HTMLElement | null>(null) const frameRef = ref<HTMLElement | null>(null)
const init = () => { const init = () => {
height.value = document.documentElement.clientHeight - 94.5 + 'px' nextTick(() => {
loading.value = true
if (!frameRef.value) return
frameRef.value.onload = () => {
loading.value = false loading.value = false
}
})
} }
onMounted(() => { onMounted(() => {
setTimeout(() => {
init() init()
}, 300)
}) })
watch(
() => props.src,
() => {
init()
}
)
</script> </script>
<template> <template>
<div v-loading="loading" :style="'height:' + height"> <div
v-loading="loading"
class="w-full h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-2px)]"
>
<iframe <iframe
ref="frameRef" ref="frameRef"
:src="props.src" :src="props.src"
frameborder="no" frameborder="0"
scrolling="auto" scrolling="auto"
style="width: 100%; height: 100%" height="100%"
width="100%"
allowfullscreen="true"
webkitallowfullscreen="true"
mozallowfullscreen="true"
></iframe> ></iframe>
</div> </div>
</template> </template>
src/views/infra/druid/index.vue
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<doc-alert title="数据库 MyBatis" url="https://doc.iocoder.cn/mybatis/" /> <doc-alert title="数据库 MyBatis" url="https://doc.iocoder.cn/mybatis/" />
<doc-alert title="多数据源（读写分离）" url="https://doc.iocoder.cn/dynamic-datasource/" /> <doc-alert title="多数据源（读写分离）" url="https://doc.iocoder.cn/dynamic-datasource/" />
<ContentWrap> <ContentWrap :bodyStyle="{ padding: '0px' }" class="!mb-0">
<IFrame v-if="!loading" :src="url" /> <IFrame v-if="!loading" v-loading="loading" :src="url" />
</ContentWrap> </ContentWrap>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
......
src/views/infra/server/index.vue
<template> <template>
<doc-alert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" /> <doc-alert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" />
<ContentWrap> <ContentWrap :bodyStyle="{ padding: '0px' }" class="!mb-0">
<IFrame v-if="!loading" v-loading="loading" :src="src" /> <IFrame v-if="!loading" v-loading="loading" :src="src" />
</ContentWrap> </ContentWrap>
</template> </template>
......
src/views/infra/skywalking/index.vue
<template> <template>
<doc-alert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" /> <doc-alert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" />
<ContentWrap> <ContentWrap :bodyStyle="{ padding: '0px' }" class="!mb-0">
<IFrame v-if="!loading" v-loading="loading" :src="src" /> <IFrame v-if="!loading" v-loading="loading" :src="src" />
</ContentWrap> </ContentWrap>
</template> </template>
......
src/views/infra/swagger/index.vue
<template> <template>
<doc-alert title="接口文档" url="https://doc.iocoder.cn/api-doc/" /> <doc-alert title="接口文档" url="https://doc.iocoder.cn/api-doc/" />
<ContentWrap> <ContentWrap :bodyStyle="{ padding: '0px' }" class="!mb-0">
<IFrame :src="src" /> <IFrame v-if="!loading" v-loading="loading" :src="src" />
</ContentWrap> </ContentWrap>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
......
src/views/mall/trade/delivery/pickUpStore/PickUpStoreForm.vue
...@@ -106,14 +106,8 @@ ...@@ -106,14 +106,8 @@
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
</template> </template>
<el-dialog <el-dialog v-model="mapDialogVisible" title="获取经纬度" append-to-body>
v-model="mapDialogVisible" <IFrame class="h-609px" :src="tencentLbsUrl" />
title="获取经纬度"
append-to-body
width="500px"
class="mapBox"
>
<iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="tencentLbsUrl"></iframe>
</el-dialog> </el-dialog>
</Dialog> </Dialog>
</template> </template>
...@@ -266,8 +260,3 @@ onMounted(async () => { ...@@ -266,8 +260,3 @@ onMounted(async () => {
await initTencentLbsMap() await initTencentLbsMap()
}) })
</script> </script>
<style lang="scss">
.mapBox .el-dialog__body {
height: 640px !important;
}
</style>
src/views/report/goview/index.vue
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<ContentWrap> <ContentWrap>
<doc-alert title="大屏设计器" url="https://doc.iocoder.cn/report/screen/" /> <doc-alert title="大屏设计器" url="https://doc.iocoder.cn/report/screen/" />
<ContentWrap :bodyStyle="{ padding: '0px' }" class="!mb-0">
<IFrame :src="src" /> <IFrame :src="src" />
</ContentWrap> </ContentWrap>
</template> </template>
......
src/views/report/jmreport/index.vue
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<ContentWrap> <ContentWrap>
<doc-alert title="报表设计器" url="https://doc.iocoder.cn/report/" /> <doc-alert title="报表设计器" url="https://doc.iocoder.cn/report/" />
<ContentWrap :bodyStyle="{ padding: '0px' }" class="!mb-0">
<IFrame :src="src" /> <IFrame :src="src" />
</ContentWrap> </ContentWrap>
</template> </template>
...@@ -10,6 +11,5 @@ import { getAccessToken } from '@/utils/auth' ...@@ -10,6 +11,5 @@ import { getAccessToken } from '@/utils/auth'
defineOptions({ name: 'JimuReport' }) defineOptions({ name: 'JimuReport' })
const BASE_URL = import.meta.env.VITE_BASE_URL const src = ref(import.meta.env.VITE_BASE_URL + '/jmreport/list?token=' + getAccessToken())
const src = ref(BASE_URL + '/jmreport/list?token=' + getAccessToken())
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment