2025-03-31- 加一個「按鈕即時展示區」
在「新增按鈕」按鈕上方加一個「按鈕即時展示區」，即時展示目前你設定好的按鈕樣式（但還沒新增到列表的按鈕），讓你能即時預覽。
修改重點：
- 在控制面板裡，新增一區塊展示當前設定的按鈕（用同樣的
<MyButton>）
- 位置放在「新增按鈕」按鈕的上方
- 用標題文字區分
修改後的程式碼（只改 template 和新增少量 CSS）
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
| <template>
<div class="layout">
<!-- 左邊控制面板 -->
<div class="control-panel">
<h3>按鈕設定</h3>
<!-- 即時預覽區 -->
<div class="preview-area">
<h4>按鈕即時展示區</h4>
<MyButton
:label="label"
:color="color"
:textColor="textColor"
:fontSize="fontSize"
:round="round"
:square="square"
@click="handleClick({ label })"
/>
</div>
<label>
按鈕文字：
<input v-model="label" />
</label>
<label>
背景顏色：
<input type="color" v-model="color" />
</label>
<label>
文字顏色：
<input type="color" v-model="textColor" />
</label>
<label>
字體大小：
<input type="range" min="10" max="40" v-model.number="fontSize" />
<span>{{ fontSize }}px</span>
</label>
<label>
圓角樣式：
<input type="checkbox" v-model="round" @change="onRoundChange" />
</label>
<label>
方形樣式：
<input type="checkbox" v-model="square" @change="onSquareChange" />
</label>
<button class="add-button" @click="handleAddButton">➕ 新增按鈕</button>
</div>
<!-- 右邊按鈕區 -->
<div class="button-display">
<h3>按鈕展示區</h3>
<div v-if="lastClicked" class="message">{{ lastClicked }}</div>
<div class="MyButton-wrapper">
<div
v-for="btn in buttons"
:key="btn.id"
class="button-container"
>
<MyButton
:label="btn.label"
:color="btn.color"
:textColor="btn.textColor"
:fontSize="btn.fontSize"
:round="btn.round"
:square="btn.square"
@click="() => handleClick(btn)"
/>
<button class="delete-btn" @click="deleteButton(btn.id)">×</button>
</div>
</div>
</div>
</div>
</template>
<style scoped>
/* 新增即時預覽區樣式 */
.preview-area {
margin-bottom: 1rem;
padding: 1rem;
border: 1.5px solid #bbb;
border-radius: 10px;
background-color: #fff;
text-align: center;
}
.preview-area h4 {
margin-bottom: 0.75rem;
color: #555;
}
</style>
|