28 lines
884 B
Vue
28 lines
884 B
Vue
<template>
|
|
<select v-model="selectedSuit" @change="handleChange"
|
|
class="px-4 py-2 m-4 text-black font-bold h-12 border-none text-center hover:text-black bg-esyellow transition-colors border border-esyellow-dark rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-esyellow-dark focus:border-esyellow-dark cursor-pointer appearance-none">
|
|
<option value="">♠♣♦♥</option>
|
|
<option v-for="suit in suits" :key="suit.value" :value="suit.value">
|
|
{{ suit.label }}
|
|
</option>
|
|
</select>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const emit = defineEmits(['change'])
|
|
|
|
const suits = [
|
|
{ value: '♥', label: '♥' },
|
|
{ value: '♦', label: '♦' },
|
|
{ value: '♣', label: '♣' },
|
|
{ value: '♠', label: '♠' }
|
|
]
|
|
|
|
const selectedSuit = ref('')
|
|
|
|
const handleChange = () => {
|
|
emit('change', selectedSuit.value)
|
|
}
|
|
</script> |