feat: clip modal self-adaption(#174)

imzbf · Nov 16, 2022 · 842edd9 · 842edd9
1 parent 460aa40
commit 842edd9
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git a/MdEditor/components/Modal/index.tsx b/MdEditor/components/Modal/index.tsx
@@ -48,6 +48,9 @@ const modalProps = () => ({
   onAdjust: {
     type: Function as PropType<(val: boolean) => void>,
     default: () => () => {}
+  },
+  class: {
+    type: String as PropType<string>
   }
 });
 
@@ -155,7 +158,10 @@ export default defineComponent({
       const slotTitle = getSlot({ props, ctx }, 'title');
 
       return (
-        <div style={{ display: modalVisible.value ? 'block' : 'none' }}>
+        <div
+          class={[props.class]}
+          style={{ display: modalVisible.value ? 'block' : 'none' }}
+        >
           <div class={`${prefix}-modal-mask`} onClick={props.onClose} />
           <div
             class={modalClass.value}

diff --git a/MdEditor/layouts/Modals/Clip.tsx b/MdEditor/layouts/Modals/Clip.tsx
@@ -142,6 +142,7 @@ export default defineComponent({
 
     return () => (
       <Modal
+        class={`${prefix}-modal-clip`}
         title={ult.value.clipModalTips?.title}
         visible={props.visible}
         onClose={props.onCancel}

diff --git a/MdEditor/layouts/Modals/style.less b/MdEditor/layouts/Modals/style.less
@@ -56,3 +56,29 @@
     }
   }
 }
+
+@media (max-width: 688px) {
+  .@{prefix}-modal-clip {
+    .@{prefix}-modal {
+      max-width: calc(100% - 20px);
+      max-height: calc(100% - 20px);
+      margin: 10px;
+      left: 0 !important;
+    }
+
+    .@{prefix}-clip {
+      flex-direction: column;
+
+      &-main,
+      &-preview {
+        width: 100%;
+        height: 0;
+        flex: 1;
+      }
+
+      &-main {
+        margin-bottom: 1em;
+      }
+    }
+  }
+}