gaoluyang
2026-06-24 c0cb161bb52ce0fbdce5c66ec391d107c75e2452
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import { buildUUID } from '..\..\..\packages\utils\src';
 
import {
  localeProps,
  makeRequiredRule,
} from '#/components/form-create/helpers';
 
/** iframe 组件规则 */
export function useIframeRule() {
  const label = '网页 iframe';
  const name = 'IframeComponent';
 
  return {
    icon: 'icon-link',
    label,
    name,
    rule() {
      return {
        type: name,
        field: buildUUID(),
        title: label,
        info: '',
        $required: false,
        modelField: 'value', // Ant Design Vue 组件使用 value;web-ele 自定义组件使用默认 modelValue
      };
    },
    props(_: any, { t }: any) {
      return localeProps(t, `${name}.props`, [
        makeRequiredRule(),
        {
          type: 'input',
          field: 'url',
          title: 'URL 地址',
          value: '',
          info: '请输入完整的 HTTP 或 HTTPS 地址',
        },
        {
          type: 'input',
          field: 'height',
          title: 'iframe 高度',
          value: '500px',
          info: '支持 px、%、vh 等单位',
        },
        {
          type: 'input',
          field: 'width',
          title: 'iframe 宽度',
          value: '100%',
          info: '支持 px、%、vw 等单位',
        },
        {
          type: 'select',
          field: 'loading',
          title: '加载方式',
          value: 'lazy',
          options: [
            { label: '懒加载', value: 'lazy' },
            { label: '立即加载', value: 'eager' },
          ],
        },
        {
          type: 'switch',
          field: 'allowfullscreen',
          title: '允许全屏',
          value: true,
        },
        {
          type: 'input',
          field: 'sandbox',
          title: 'sandbox 属性',
          value: '',
          info: '安全沙箱限制,如:allow-scripts allow-same-origin',
        },
      ]);
    },
  };
}