原本今天預計製作發牌和卡牌自動翻面的效果,希望兩個都能有動畫效果,
但現實的能力讓我想先說說今天的開發方式
Card.vue
內的樣板,在裡面分成兩個div區塊,Card.vue
內撰寫 @click 去改變卡片的狀態background-size: cover;
@click
會觸發emit
將點到的卡牌數字回傳至上層進行更新// Card.vue
<template>
<div class="card " @click="emit('poker-flip', value)" :class="backCardClass">
<div class="card-front" :class="numberClass">{{ content }}</div>
<div class="card-back"></div>
</div>
</template>
// Card.vue
const emit = defineEmits(["poker-flip"]);
在上層的元件要接會使用剛剛定義在defineEmits的名稱 @poker-flip
// GameBoard.vue 其他都略
<Card v-for="card in boardCards" key="card.value" :value="card.value" :isOpen="card.isOpen"
@poker-flip="toggleFlip" />
可能因為練習過ReactJS官網的的關係,知道狀態提升(Lifting State Up)的概念,所以目前所有卡牌資料依然是先放在上層的GameBoard.vue裡面,toggleFlip
是我撰寫
// GameBoard.vue
function toggleFlip(num) {
// 找到對應的開牌狀態且翻轉
const targetIdx = boardCards.value.findIndex((item) => item.value === num)
boardCards.value[targetIdx].isOpen = !boardCards.value[targetIdx].isOpen;
}
今天也有犯一點蠢,發現開牌的狀態一直傳不下去,但toggleFlip函數又有拿到對應的數字和改變的狀態,
原來是GameBoard.vue中寫的<Card />
元件沒寫屬性:isOpen
導致程式沒報錯,但有執行異常的情況...
Transition
寫法但奈何悟性不足今天無法應用在上面
Vue3的Transition的寫法也是ChatGPT跟我說的,雖然是錯的居多(範例給我
<transition>
但第一字母其實應該大寫才對XD),但身為前端菜逼八也是先把它當成關鍵字搜尋引擎使用
參考資料