2024-12-27 Vue3_新增成員用 Modal 視窗

發表於 閱讀次數：
2024-12-27 Vue3_新增成員用 Modal 視窗

2024-12-27 Vue3_新增成員用 Modal 視窗

新增成員用 Modal 視窗

實作 「新增成員用 Modal 視窗」 的方式 ✅
這樣畫面會更乾淨，互動也更清楚。

🧩 目標：

點下「➕ 新增成員」→ 彈出一個對話視窗 → 輸入名字 → 按「確定」→ 加入成員 → 關閉 modal

✅ 第一步：畫面結構調整（加入 modal）

請將你的 SplitBill.vue 改成這樣：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<template>
  <div class="app-container">
    <!-- 上方: 標題 -->
    <div class="header">
      <h1>旅行分帳應用程式</h1>
    </div>

    <!-- 中間: 成員清單 -->
    <div class="member-list">
      <h2>分帳成員</h2>
      <ul>
        <li v-for="(member, index) in members" :key="index">
          {{ member.name }} <span class="owe">應付 $0</span>
        </li>
      </ul>
    </div>

    <!-- 下方: 新增成員按鈕 -->
    <div class="bottom-section">
      <button class="btn" @click="showModal = true">➕ 新增成員</button>
    </div>

    <!-- Modal 視窗 -->
    <div class="modal-backdrop" v-if="showModal">
      <div class="modal">
        <h3>新增成員</h3>
        <input v-model="newMemberName" placeholder="請輸入成員姓名" />
        <div class="modal-buttons">
          <button class="btn confirm" @click="addMember">確定</button>
          <button class="btn cancel" @click="showModal = false">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const members = ref([])
const newMemberName = ref('')
const showModal = ref(false)

function addMember() {
  if (newMemberName.value.trim() !== '') {
    members.value.push({ name: newMemberName.value.trim() })
    newMemberName.value = ''
    showModal.value = false
  }
}
</script>

<style scoped>
/* 原有樣式保持不變 */
.app-container {
  max-width: 500px;
  margin: auto;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
}

.header {
  font-size: 1.5em;
  font-weight: 600;
  color: #5e3a4a;
  text-align: center;
  padding: 10px;
  background-color: #f8e6e6;
  border-bottom: 2px solid #d16a7b;
}

.member-list {
  flex-grow: 1;
  padding: 10px;
  overflow-y: auto;
  border: 1px solid red;
}

.bottom-section {
  padding: 10px;
  text-align: center;
  background-color: #f8e6e6;
  border-top: 2px solid #d16a7b;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  margin-bottom: 5px;
  background-color: #f8f8f8;
  border-radius: 5px;
}

.owe {
  color: red;
}

.receive {
  color: green;
}

.btn {
  background-color: #d16a7b;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.btn:hover {
  background-color: #b85967;
}

/* modal 相關樣式 */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  min-width: 300px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.modal input {
  width: 80%;
  padding: 8px;
  margin: 10px 0;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.modal-buttons {
  display: flex;
  justify-content: space-between;
}

.btn.confirm {
  background-color: #4caf50;
}

.btn.cancel {
  background-color: #f44336;
}
</style>

🧪 測試流程：

  1. 點「➕ 新增成員」
  2. modal 視窗會彈出，輸入姓名
  3. 按「確定」會新增成員，modal 關閉
  4. 按「取消」則不新增並關閉

✅ 完成這步之後，我們就可以進行下一步：
👉 加入 儲存到 localStorage 的功能，讓你重新整理頁面，資料也還在！

你想現在就進下一步嗎？還是先玩一下新增功能 😄