further work on MonthPicker
This commit is contained in:
11
src/App.vue
11
src/App.vue
@@ -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;
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user