|
@@ -0,0 +1,41 @@
|
|
|
+<script>
|
|
|
+import Icon from '@ER/icon'
|
|
|
+import hooks from '@ER/hooks'
|
|
|
+export default {
|
|
|
+ name: 'ErIframe',
|
|
|
+ inheritAttrs: false,
|
|
|
+ customOptions: {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+<script setup>
|
|
|
+import { ref, computed } from 'vue'
|
|
|
+
|
|
|
+const { t } = hooks.useI18n()
|
|
|
+// data: 配置的 item type 整个对象 params: 配置 item type后的 调整(美化/兼容后)的配置
|
|
|
+const props = defineProps(['data', 'params'])
|
|
|
+const ns = hooks.useNamespace('FormTypesIframe_pc')
|
|
|
+const isFullscreen = ref(false)
|
|
|
+// 切换全屏
|
|
|
+const toggleFullscreen = () => {
|
|
|
+ isFullscreen.value = !isFullscreen.value
|
|
|
+}
|
|
|
+const localHeight = computed(() => {
|
|
|
+ return isFullscreen.value ? '100%' : `${props.data?.options?.height ?? 200}px`
|
|
|
+})
|
|
|
+</script>
|
|
|
+<template>
|
|
|
+ <div :class="[ns.b(), isFullscreen ? 'FormTypesIframe--maximize' : '']">
|
|
|
+ <div class="actions">
|
|
|
+ <el-tooltip placement="top" :content="$t(isFullscreen ? 'le.exitFullscreen' : 'le.fullscreen')">
|
|
|
+ <!-- 全屏 -->
|
|
|
+ <el-button type="primary" class="icon-button button-screen" @click="toggleFullscreen">
|
|
|
+ <LeIcon :icon-class="isFullscreen ? 'le-suoxiao' : 'le-fangda'" />
|
|
|
+ </el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div v-show="!data?.options?.src" class="placeholder">{{ t('er.form.iframePlaceholder') }}</div>
|
|
|
+ <iframe :src="data?.options?.src" frameborder="0" scrolling="auto" width="100%" :height="localHeight" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped></style>
|