<!-- 网页 iframe 组件 (Ant Design Vue 版本) -->
|
<script lang="ts" setup>
|
import { computed } from 'vue';
|
|
import { isUrl } from '#/utils';
|
|
defineOptions({ name: 'IframeComponent' });
|
|
const props = withDefaults(defineProps<Props>(), {
|
modelValue: '',
|
value: '',
|
url: '',
|
height: '500px',
|
width: '100%',
|
frameborder: '0',
|
allowfullscreen: true,
|
loading: 'lazy',
|
sandbox: '',
|
});
|
|
// 接受父组件参数
|
interface Props {
|
modelValue?: string;
|
value?: string;
|
url?: string;
|
height?: string;
|
width?: string;
|
frameborder?: string;
|
allowfullscreen?: boolean;
|
loading?: 'eager' | 'lazy';
|
sandbox?: string;
|
// eslint-disable-next-line vue/require-default-prop
|
formCreateInject?: any;
|
}
|
|
// 显示的 URL（优先使用 url prop，其次使用 value 或 modelValue）
|
const displayUrl = computed(
|
() => props.url || props.value || props.modelValue || '',
|
);
|
|
// 是否显示预览
|
const showPreview = computed(() => {
|
return displayUrl.value && isUrl(displayUrl.value);
|
});
|
</script>
|
|
<template>
|
<div class="iframe-component">
|
<!-- iframe 预览 -->
|
<div v-if="showPreview" class="iframe-preview">
|
<iframe
|
:src="displayUrl"
|
:width="width"
|
:height="height"
|
:frameborder="frameborder"
|
:allowfullscreen="allowfullscreen"
|
:loading="loading"
|
:sandbox="sandbox || undefined"
|
class="iframe-content"
|
></iframe>
|
</div>
|
|
<!-- 无 URL 或无效 URL 提示 -->
|
<div v-else class="iframe-placeholder">
|
<a-empty description="请在右侧属性面板配置 URL 地址" />
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.iframe-component {
|
width: 100%;
|
}
|
|
.iframe-preview {
|
overflow: hidden;
|
border: 1px solid #d9d9d9;
|
border-radius: 4px;
|
}
|
|
.iframe-content {
|
display: block;
|
border: none;
|
}
|
|
.iframe-placeholder {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
min-height: 200px;
|
background-color: #fafafa;
|
border: 1px dashed #d9d9d9;
|
border-radius: 4px;
|
}
|
</style>
|
