37 lines
1.1 KiB
Vue
37 lines
1.1 KiB
Vue
<template>
|
|
<select v-model="selectedRank" @change="handleChange"
|
|
class="px-4 py-2 m-4 font-bold h-12 border-none text-center bg-esyellow transition-colors border border-esyellow-dark rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-estyellow-dark focus:border-estyellow-dark cursor-pointer appearance-none">
|
|
<option value="">rank</option>
|
|
<option v-for="rank in ranks" :key="rank.value" :value="rank.value">
|
|
{{ rank.label }}
|
|
</option>
|
|
</select>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const emit = defineEmits(['change'])
|
|
|
|
const ranks = [
|
|
{ value: 'A', label: 'Ace' },
|
|
{ value: '2', label: '2' },
|
|
{ value: '3', label: '3' },
|
|
{ value: '4', label: '4' },
|
|
{ value: '5', label: '5' },
|
|
{ value: '6', label: '6' },
|
|
{ value: '7', label: '7' },
|
|
{ value: '8', label: '8' },
|
|
{ value: '9', label: '9' },
|
|
{ value: '10', label: '10' },
|
|
{ value: 'J', label: 'Jack' },
|
|
{ value: 'Q', label: 'Queen' },
|
|
{ value: 'K', label: 'King' }
|
|
]
|
|
|
|
const selectedRank = ref('')
|
|
|
|
const handleChange = () => {
|
|
emit('change', selectedRank.value)
|
|
}
|
|
</script> |