I'm currently trying to figure out how to trigger a button when either clicked with the mouse or when a key is pressed. I'm having trouble understanding how components communicate with each other. How can I call the pressDown() function in the KeyButton component from its parent component, or is there a more efficient way to implement this functionality?
Below is my approach:
Container of the Button
<template>
<key-button :message="'Msg'" :callback="pressKey" ></key-button>
</template>
<script setup>
import KeyButton from "./KeyButton.vue";
import {ref,onMounted} from "vue";
onMounted(()=>{
addEventListener('keypress',(e)=>{
//trigger button
});
})
const pressKey = () => {
//execute when the button is clicked
}
</script>
KeyButton Component
<template>
<button class="button" :class="{'animate': active}" v-on="{mousedown:pressDown,animationend:triggerAnim}">{{props.message}}</button>
</template>
<script setup>
import {ref,defineProps} from 'vue';
const props = defineProps({
message: String,
callback: Function
})
const active = ref(false);
//Function to trigger button
const pressDown = ()=>{
props.callback();
triggerAnim();
}
const triggerAnim = ()=>{
active.value = !active.value;
}
</script>
<style scoped>
button{
display: flex;
height: 5rem;
width: 5rem;
justify-content: center;
align-items: center;
font-size: 2rem;
color: white;
border-color: deepskyblue;
border-width: 0.15rem;
border-radius: 50%;
background-color: lightskyblue;
margin-bottom: 1rem;
margin-left: 2rem;
outline: none !important;
}
.animate{
animation: zoom 0.2s;
}
@keyframes zoom {
0%{
transform: scale(1);
}
10%{
transform: scale(0.9);
}
100%{
transform: scale(1);
}
}
</style>