38 lines
862 B
Vue
38 lines
862 B
Vue
<template>
|
|
<div class="settings">
|
|
<div class="time">
|
|
<p>Kies het aantal seconden:</p>
|
|
<span class="time-choice" v-on:click="setTime(15)">15</span>
|
|
<span class="time-choice" v-on:click="setTime(30)">30</span>
|
|
<span class="time-choice" v-on:click="setTime(45)">45</span>
|
|
<span class="time-choice" v-on:click="setTime(60)">60</span>
|
|
<span class="time-choice" v-on:click="setTime(75)">75</span>
|
|
<span class="time-choice" v-on:click="setTime(90)">90</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Settings",
|
|
props: {
|
|
time: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
methods: {
|
|
setTime(number) {
|
|
this.$emit('set-time', number);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.time-choice {
|
|
font-size: 32px;
|
|
display: inline-block;
|
|
padding: 25px;
|
|
}
|
|
</style> |