提交点击效果

1

src/components/layout/index.module.less

@@ -326,3 +326,15 @@
     }
   }
 }
+.setTimeImage {
+  cursor: pointer;
+  img {
+    width: 792px;
+  }
+}
+.beatImage {
+  cursor: pointer;
+  img {
+    width: 698px;
+  }
+}

src/components/layout/index.tsx

@@ -2,12 +2,15 @@ import { Transition, defineComponent, onMounted, ref } from 'vue';
 import LayoutSilder from './layoutSilder';
 import LayoutTop from './layoutTop';
 import styles from './index.module.less';
-import { NModal, NPopover } from 'naive-ui';
+import { NImage, NModal, NPopover } from 'naive-ui';
 import Moveable from 'moveable';
 import toolbox from './images/toolbox.png';
 import setTimeIcon from './images/setTimeIcon.png';
 import beatIcon from './images/beatIcon.png';
 import toneIcon from './images/toneIcon.png';
+import beatImage from './images/beatImage.png';
+import toneImage from './images/toneImage.png';
+import setTimeImage from './images/setTimeImage.png';
 export default defineComponent({
   name: 'layoutView',
   setup() {
@@ -122,7 +125,15 @@ export default defineComponent({
       initMoveable();
     });
     const startShowModal = (val: 'setTimeIcon' | 'beatIcon' | 'toneIcon') => {
-      if (val == 'setTimeIcon') console.log(val);
+      if (val == 'setTimeIcon') {
+        showModalTime.value = true;
+      }
+      if (val == 'beatIcon') {
+        showModalBeat.value = true;
+      }
+      if (val == 'toneIcon') {
+        showModalTone.value = true;
+      }
     };
     return () => (
       <div class={[styles.wrap, 'wrap']}>
@@ -180,9 +191,39 @@ export default defineComponent({
           </div>
         </NPopover>
 
-        <NModal v-model:show={showModalBeat.value}></NModal>
-        <NModal v-model:show={showModalTone.value}></NModal>
-        <NModal v-model:show={showModalTime.value}></NModal>
+        <NModal v-model:show={showModalBeat.value}>
+          <div
+            onClick={() => {
+              showModalBeat.value = false;
+            }}>
+            <NImage
+              src={beatImage}
+              previewDisabled
+              class={styles.beatImage}></NImage>
+          </div>
+        </NModal>
+        <NModal v-model:show={showModalTone.value}>
+          <div
+            onClick={() => {
+              showModalTone.value = false;
+            }}>
+            <NImage
+              src={toneImage}
+              previewDisabled
+              class={styles.beatImage}></NImage>
+          </div>
+        </NModal>
+        <NModal v-model:show={showModalTime.value}>
+          <div
+            onClick={() => {
+              showModalTime.value = false;
+            }}>
+            <NImage
+              src={setTimeImage}
+              previewDisabled
+              class={styles.setTimeImage}></NImage>
+          </div>
+        </NModal>
       </div>
     );
   }