further work on MonthPicker

This commit is contained in:
Sockenklaus
2021-10-03 12:36:12 +02:00
parent 1ed7cdada8
commit e304767f32
2 changed files with 6 additions and 23 deletions

View File

@@ -1,11 +1,4 @@
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>
<template> <template>
<img alt="Vue logo" src="./assets/logo.png" />
<v-app> <v-app>
<v-main> <v-main>
<div class="container"> <div class="container">
@@ -15,6 +8,10 @@ import HelloWorld from './components/HelloWorld.vue'
</v-app> </v-app>
</template> </template>
<script setup lang="ts">
</script>
<style> <style>
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;

View File

@@ -26,7 +26,7 @@
<table class="table table-bordered mt-2"> <table class="table table-bordered mt-2">
<tbody> <tbody>
<tr v-for="n in 3"> <tr v-for="n in 3">
<td v-for="m in 4" @click="selectedMonth = m+4*n-5" :class="{selected: selectedMonth===(m+4*n-5)}"> <td v-for="m in 4" @click="selectedMonth = m+4*n-5" :class="{ 'table-active': selectedMonth === (m+4*n-5)}">
{{months[m+4*n-5]}} {{months[m+4*n-5]}}
</td> </td>
</tr> </tr>
@@ -39,7 +39,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, watch, Ref, ComputedRef } from 'vue' import { ref, watch, Ref } from 'vue'
const props = defineProps<{ const props = defineProps<{
selectedMonth: number, selectedMonth: number,
@@ -57,20 +57,6 @@
'Sept', 'Okt', 'Nov', 'Dez' 'Sept', 'Okt', 'Nov', 'Dez'
] ]
/**
* -4 -3 -2
* -1 0 +1
* +2 +3 +4
*/
const years : ComputedRef<number[]> = computed(() => {
let arr : number[] = []
for (let i = 0; i < 9; i++) {
arr.push(selectedYear.value - 4 + i)
}
return arr
})
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'getYear', year: number): number (e: 'getYear', year: number): number
(e: 'getMonth', month: number): number (e: 'getMonth', month: number): number