feat: iframe组件增加内容裁剪

JackySoft · Oct 13, 2024 · 321c516 · 321c516
1 parent 1806a94
commit 321c516
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 10 deletions.
diff --git a/packages/editor/src/components/StyleConfig/StyleConfig.tsx b/packages/editor/src/components/StyleConfig/StyleConfig.tsx
@@ -287,6 +287,30 @@ const StyleConfig = () => {
           </Flex>
         </Form.Item>
       )}
+      <Form.Item key={'overflow'} name={['scopeStyle', 'overflow']} label={'overflow'}>
+        <Select
+          placeholder={'请选择'}
+          options={[
+            {
+              label: '默认',
+              value: 'auto',
+            },
+            {
+              label: '可见',
+              value: 'visible',
+            },
+            {
+              label: '超出隐藏',
+              value: 'hidden',
+            },
+            {
+              label: '超出滚动',
+              value: 'scroll',
+            },
+          ]}
+          suffixIcon={<CaretDownOutlined />}
+        />
+      </Form.Item>
       <TitleStyle>边框</TitleStyle>
       <Form.Item name={['scopeStyle', 'borderRadius']} label={'圆角'}>
         <InputPx placeholder="eg：5" />

diff --git a/packages/editor/src/packages/IFrame/IFrame.tsx b/packages/editor/src/packages/IFrame/IFrame.tsx
@@ -1,5 +1,5 @@
 import { ComponentType } from '@/packages/types';
-import { useState, useImperativeHandle, forwardRef } from 'react';
+import { useState, useImperativeHandle, forwardRef, useMemo } from 'react';
 
 /**
  *
@@ -20,6 +20,26 @@ const IFrame = ({ id, type, config }: ComponentType, ref: any) => {
       },
     };
   });
-  return visible && <iframe style={config.style} {...config.props} data-id={id} data-type={type}></iframe>;
+  // 裁剪后，重新计算高度
+  const height = useMemo(() => {
+    const { top } = config.props.clip;
+    let height = '100%';
+    const px = (num: string) => Number(num.replace('px', ''));
+    const topPx = px(top);
+    if (topPx != 0) {
+      height = `calc(100% + ${-topPx}px)`;
+    }
+    return height;
+  }, [config.props.clip]);
+  return (
+    visible && (
+      <div className="" style={config.style} data-id={id} data-type={type}>
+        <iframe
+          style={{ position: 'absolute', top: config.props.clip.top, left: 0, width: '100%', height, border: 'none' }}
+          {...config.props}
+        ></iframe>
+      </div>
+    )
+  );
 };
 export default forwardRef(IFrame);
diff --git a/packages/editor/src/packages/IFrame/Schema.ts b/packages/editor/src/packages/IFrame/Schema.ts
@@ -20,14 +20,29 @@ export default {
       label: '显示标题',
       name: 'title',
     },
+    {
+      type: 'Title',
+      label: '内容裁剪',
+      key: 'clip',
+    },
+    {
+      type: 'InputPx',
+      label: '顶部裁剪',
+      name: ['clip', 'top'],
+    },
   ],
   config: {
     // 组件默认属性值
     props: {
       src: 'https://juejin.cn/',
       title: 'IFrame组件',
+      clip: {
+        top: '0px',
+      },
     },
     style: {
+      position: 'relative',
+      overflow: 'hidden',
       border: '5px solid #7d33ff',
       width: '100%',
       height: '600px',
@@ -37,12 +52,7 @@ export default {
     source: '',
   },
   // 组件事件
-  events: [
-    {
-      value: 'handleClick',
-      name: '点击事件',
-    },
-  ],
+  events: [],
   // 组件接口
   api: {},
 };
diff --git a/packages/materials/IFrame/IFrame.tsx b/packages/materials/IFrame/IFrame.tsx
@@ -1,5 +1,5 @@
 import { ComponentType } from '../types';
-import { useState, useImperativeHandle, forwardRef } from 'react';
+import { useState, useImperativeHandle, forwardRef, useMemo } from 'react';
 
 /**
  *
@@ -20,6 +20,26 @@ const IFrame = ({ config }: ComponentType, ref: any) => {
       },
     };
   });
-  return visible && <iframe style={config.style} {...config.props}></iframe>;
+  // 裁剪后，重新计算高度
+  const height = useMemo(() => {
+    const { top } = config.props.clip;
+    let height = '100%';
+    const px = (num: string) => Number(num.replace('px', ''));
+    const topPx = px(top);
+    if (topPx != 0) {
+      height = `calc(100% + ${-topPx}px)`;
+    }
+    return height;
+  }, [config.props.clip]);
+  return (
+    visible && (
+      <div style={config.style}>
+        <iframe
+          style={{ position: 'absolute', top: config.props.clip.top, left: 0, width: '100%', height, border: 'none' }}
+          {...config.props}
+        ></iframe>
+      </div>
+    )
+  );
 };
 export default forwardRef(IFrame);