Переглянути джерело

feat: 新增iframe 展示功能

lanceJiang 1 рік тому
батько
коміт
2cedf57300

+ 4 - 0
src/components/packages/formEditor/components/FormTypes/Iframe/mobile.vue

@@ -0,0 +1,4 @@
+<script lang="ts">
+import Component from './pc.vue'
+export default Component
+</script>

+ 41 - 0
src/components/packages/formEditor/components/FormTypes/Iframe/pc.vue

@@ -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>

+ 2 - 1
src/components/packages/formEditor/locale/en.js

@@ -194,7 +194,8 @@ export default {
 			addSignature: 'Add signature',
 			useSignature: 'Use signature',
 			uploading: 'uploading...',
-			uploadFailed: 'Fail to upload'
+			uploadFailed: 'Fail to upload',
+			iframePlaceholder: 'Inline frame, showing URL page'
 		},
 		selection: {
 			insertLeft: 'Insert column left',

+ 2 - 1
src/components/packages/formEditor/locale/zh-cn.js

@@ -194,7 +194,8 @@ export default {
 			addSignature: '添加签名',
 			useSignature: '使用签名',
 			uploading: '上传中...',
-			uploadFailed: '上传失败'
+			uploadFailed: '上传失败',
+			iframePlaceholder: '内联框架,显示URL页面'
 		},
 		selection: {
 			insertLeft: '左插入列',

+ 2 - 1
src/components/packages/utils/field.js

@@ -1,6 +1,7 @@
 import _ from 'lodash-es'
 import { nanoid } from './nanoid'
-const fieldsRe = /^(input|textarea|number|radio|checkbox|select|time|date|rate|switch|slider|html|cascader|uploadfile|signature|region|subform)$/
+// 正则匹配type(itemType 类型)
+const fieldsRe = /^(input|textarea|number|radio|checkbox|select|time|date|rate|switch|slider|html|cascader|uploadfile|signature|region|subform|iframe)$/
 const deepTraversal = (node, fn) => {
 	fn(node)
 	const nodes = node.type === 'subform' ? node.list[0] : node.list || node.rows || node.columns || node.children || []