41 lines
746 B
Vue
41 lines
746 B
Vue
|
<script setup>
|
||
|
|
import { ref, watch } from 'vue'
|
||
|
|
|
||
|
|
const type = ref();
|
||
|
|
const card = ref();
|
||
|
|
defineProps(['title', 'description', 'type'])
|
||
|
|
|
||
|
|
watch(type, (prev, current) => {
|
||
|
|
card.style.toggleClass('type-a', current.match(/a/i))
|
||
|
|
card.style.toggleClass('type-b', current.match(/b/i))
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<section ref="card" class="card">
|
||
|
|
<footer>{{ type }}</footer>
|
||
|
|
<header><h1>{{ title }}</h1></header>
|
||
|
|
<main>{{ description }}</main>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.card {
|
||
|
|
background-color: lightgrey;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.card.type-a {
|
||
|
|
background-color: red;
|
||
|
|
}
|
||
|
|
.card.type-b {
|
||
|
|
background-color: orange;
|
||
|
|
}
|
||
|
|
.card footer {
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
.card h1 {
|
||
|
|
size: 1em;
|
||
|
|
}
|
||
|
|
</style>
|