画廊-瀑布流实现

src/App.vue

@@ -4,15 +4,51 @@
       <router-view></router-view>
     </PerfectScrollbar>
   </div>
+
+  <d-modal class="!w-80" v-model="modal.visible" :title="modal.title">
+    {{ modal.content }}
+    <div class="mt-10 w-full flex justify-between">
+      <d-button @click="modal.handdleCancel" variant="text"
+        class="w-[49%] hover:bg-[#8a6684] hover:!text-white">取消</d-button>
+      <span class="text-[20px]"> | </span>
+      <d-button @click="modal.handdleSubmit" variant="text" class="w-[49%] hover:bg-[#5c866a] hover:!text-white"
+        color="primary">确定</d-button>
+    </div>
+  </d-modal>
 </template>
 
 <script setup lang="ts">
 // 空白项目入口
+const modal = reactive<any>({
+  visible: false,
+  title: "",
+  content: "",
+  handdleCancel: () => { modal.visible = false },
+  handdleSubmit: () => { },
+})
+
+function comemodal(mv: any) {
+  modal.visible = true
+  modal.title = mv.title
+  modal.content = mv.content
+  if (mv.handdleCancel) modal.handdleCancel = mv.handdleCancel
+  modal.handdleSubmit = () => {
+    mv.handdleSubmit()
+    modal.visible = false
+  }
+}
+
+window.$modal = comemodal
+
+onMounted(() => {
+
+})
 </script>
 
 <style scoped lang="less">
 .ps {
   width: 100vw;
   height: 100vh;
+  padding-inline-start: 0;
 }
 </style>