調整modal內容和顯示

Author: alyciaciou

src/components/Modal.vue

@@ -1,24 +1,37 @@
 <template>
-    <div v-if="isVisible" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
-        <div class="bg-white rounded-lg p-6 w-1/3">
-            <button @click="closeModal" class="text-red-500">關閉</button>
-            <p class="mt-4">這是彈出式 Modal 的內容</p>
+    <div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
+        <div class="bg-white rounded-lg p-6 w-1/3 relative">
+            <button @click="$emit('closeModal')" class="text-red-500 absolute top-2 right-3 font-bold p-2">x</button>
+            <form @submit.prevent="handleSubmit">
+                <div class="mb-4">
+                    <label for="name" class="block text-gray-700">姓名</label>
+                    <input type="text" id="name" v-model="name" class="border rounded w-full py-2 px-3" required />
+                </div>
+                <div class="mb-4">
+                    <label for="email" class="block text-gray-700">電子郵件</label>
+                    <input type="email" id="email" v-model="email" class="border rounded w-full py-2 px-3" required />
+                </div>
+                <button type="submit" class="bg-blue-500 text-white rounded py-2 px-4 absolute bottom-2 right-4">送出</button>
+            </form>
         </div>
     </div>
 </template>
 
-<script setup>
-import { ref } from 'vue'
-
-const isVisible = ref(false)
-
-const openModal = () => {
-    isVisible.value = true
-}
-
-const closeModal = () => {
-    isVisible.value = false
-}
-
-
+<script>
+export default {
+    data() {
+        return {
+            name: '',
+            email: ''
+        };
+    },
+    methods: {
+        handleSubmit() {
+            // 處理表單提交
+            console.log('姓名:', this.name);
+            console.log('電子郵件:', this.email);
+            this.$emit('closeModal'); // 提交後關閉 Modal
+        }
+    }
+};
 </script>

src/components/Table.vue

@@ -3,7 +3,7 @@
     <el-table v-if="tableHeader.length !== 0" :data="tableData" class="bg-white rounded-lg shadow text-lg">
         <el-table-column v-for="(col, index) in tableHeader" :prop="col" :label="col" :key="index"/>
         <el-table-column prop="edit" label="edit">
-            <el-button @click="$emit('getFormData', name)" type="primary" class="bg-gray-500 hover:bg-gray-600 border-gray-500 hover:border-gray-600">
+            <el-button @click="$emit('getFormData', name); $emit('openModal')" type="primary" class="bg-gray-500 hover:bg-gray-600 border-gray-500 hover:border-gray-600">
                   <el-icon><Edit /></el-icon>
             </el-button>
         </el-table-column>
@@ -24,5 +24,5 @@
             default: () => []
         }
     })
-    defineEmits(['getFormData'])
+    defineEmits(['getFormData', 'openModal'])
 </script>

src/views/HomeView.vue

@@ -8,10 +8,10 @@
             <el-button type="primary" class="bg-gray-500 hover:bg-gray-600 border-gray-500 hover:border-gray-600">新增</el-button>
           </el-header>
 
-          <Table :tableData="tableData" :tableHeader="tableHeader" @getFormData="getFormData"/>
+          <Table :tableData="tableData" :tableHeader="tableHeader" @getFormData="getFormData" @openModal="openModal"/>
 
         </el-container>
-        <Modal/>
+        <Modal class="z-50" v-if="isVisible" @closeModal="closeModal"/>
       </el-container>
     </main>
 </template>
@@ -29,8 +29,6 @@
 
   const router = useRouter()
 
-  
-
   const sidebarOpen = ref(true)
   const toggleSidebar = async () => {
     sidebarOpen.value = !sidebarOpen.value
@@ -65,6 +63,14 @@
     }
   }
 
+  const isVisible = ref(false)
+  const openModal = () => {
+    isVisible.value = true
+  }
+  const closeModal = () => {
+    isVisible.value = false
+  }
+
   const getFormData = async () => {
     console.log('hello')
   }