50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import nijiImg from '@/assets/images/niji.png'
|
|
import mjImg from '@/assets/images/mj.png'
|
|
interface Option {
|
|
title: string
|
|
image: string
|
|
v: string
|
|
}
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'select', v: string): void
|
|
}>()
|
|
|
|
const options: Option[] = [
|
|
{ title: 'Midjourney', image: mjImg, v: 'MJ' },
|
|
{ title: 'Niji', image: nijiImg, v: 'NIJI' },
|
|
]
|
|
|
|
const selected = ref<number | null>(0)
|
|
|
|
const selectOption = (index: number) => {
|
|
selected.value = index
|
|
emit('select', options[index].v)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex space-x-4">
|
|
<div
|
|
v-for="(option, index) in options"
|
|
:key="index"
|
|
class="relative cursor-pointer transition-all duration-300 ease-in-out rounded-lg border-2 p-4 w-32 h-12"
|
|
:class="[
|
|
selected === index ? 'border-blue-500' : 'border-gray-300',
|
|
]"
|
|
@click="selectOption(index)"
|
|
>
|
|
<div
|
|
class="absolute inset-0 bg-cover bg-center transition-opacity duration-300 ease-in-out rounded"
|
|
:style="{ backgroundImage: `url(${option.image})` }"
|
|
:class="[selected === index ? 'opacity-100' : 'opacity-50']"
|
|
/>
|
|
<div class="relative z-10 text-white font-bold flex justify-center">
|
|
{{ option.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|