<template>
|
<el-row class="main-frame">
|
<div v-if="element.frameLinks.src" class="main-frame">
|
<iframe
|
v-if="state.frameShow"
|
:id="'iframe-' + element.id"
|
:src="element.frameLinks.src"
|
scrolling="auto"
|
frameborder="0"
|
class="main-frame main-de-iframe"
|
/>
|
<div v-if="isEdit" class="frame-mask edit-mask">
|
<span style="opacity: 1">
|
<span style="font-weight: bold; color: lawngreen">{{
|
t('visualization.edit_web_tips')
|
}}</span>
|
</span>
|
</div>
|
<!--Here are three 15px wide masks(left top right) for easy clicking on the display jump button-->
|
<div v-if="isEdit" class="frame-mask preview-top-mask" />
|
<div v-if="isEdit" class="frame-mask preview-right-mask" />
|
<div v-if="isEdit" class="frame-mask preview-left-mask" />
|
<div v-if="screenShot" class="frame-mask" />
|
</div>
|
<div v-else class="info-class">
|
<span>{{ t('visualization.link_add_tips_pre') }}</span>
|
</div>
|
</el-row>
|
</template>
|
|
<script setup lang="ts">
|
import { nextTick, onMounted, reactive, toRefs } from 'vue'
|
import { useEmitt } from '@/hooks/web/useEmitt'
|
import { useI18n } from '@/hooks/web/useI18n'
|
|
const { t } = useI18n()
|
|
const props = defineProps({
|
propValue: {
|
type: String,
|
require: true
|
},
|
element: {
|
type: Object
|
},
|
isEdit: {
|
type: Boolean,
|
require: false,
|
default: true
|
},
|
active: {
|
type: Boolean,
|
require: false,
|
default: false
|
},
|
screenShot: {
|
type: Boolean,
|
default: false
|
}
|
})
|
|
const { element, isEdit, screenShot } = toRefs(props)
|
|
const state = reactive({
|
pOption: {},
|
frameShow: true
|
})
|
|
const frameLinksChange = () => {
|
state.frameShow = false
|
nextTick(() => {
|
state.frameShow = true
|
})
|
}
|
|
onMounted(() => {
|
useEmitt({
|
name: 'frameLinksChange-' + element.value.id,
|
callback: function () {
|
frameLinksChange()
|
}
|
})
|
})
|
</script>
|
|
<style lang="less" scoped>
|
.info-class {
|
text-align: center;
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: rgba(255, 255, 255, 0.3);
|
font-size: 12px;
|
color: #9ea6b2;
|
}
|
|
.main-frame {
|
height: 100%;
|
width: 100%;
|
}
|
|
.frame-mask {
|
display: flex;
|
opacity: 0.5;
|
position: absolute;
|
top: 0px;
|
z-index: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.edit-mask {
|
left: 0px;
|
background-color: #5c5e61;
|
height: 100% !important;
|
width: 100% !important;
|
}
|
|
.preview-top-mask {
|
left: 0px;
|
height: 15px !important;
|
width: 100% !important;
|
}
|
|
.preview-right-mask {
|
right: 0px;
|
height: 100% !important;
|
width: 15px !important;
|
}
|
|
.preview-left-mask {
|
left: 0px;
|
height: 100% !important;
|
width: 15px !important;
|
}
|
</style>
|
