Olá pessoal, fiz o seguinte codigo para implementar o botao play/pause:
<template>
<button class="button" @click="onClickar" :disabled="botaoDisabled">
<span class="icon">
<i :class="iconName"></i>
</span>
<span>{{texto}}</span>
</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props:{
onClickar: {
type: Function,
required: true
},
botaoDisabled: {
type: Boolean,
default: false
},
iconName: {
type: String
},
texto: {
type: String,
default: ''
}
}
})
</script>
O uso do botão ficou assim:
<BtnTemporizador
:onClickar="iniciar"
texto="Start"
icon-name="fas fa-play"
:botao-disabled="cronometroRodando" />
<BtnTemporizador
:onClickar="finalizar"
texto="Stop!"
icon-name="fas fa-stop"
:botao-disabled="!cronometroRodando" />
É certo criar o onClicar como type Function? o codigo funciona, mas o VS code está apontando como erro "Type 'Function' is not assignable to type '(payload: MouseEvent) => void'. Type 'Function' provides no match for the signature '(payload: MouseEvent): void'.ts(2322)"