You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.5 KiB
63 lines
1.5 KiB
<template>
|
|
<view class="x-calendar">
|
|
<view class="grid">
|
|
{{all.length}}
|
|
<view class="grid-item" v-for="(day, index) in all" :key="index">
|
|
<view class="grid-item-box">
|
|
<view class="grid-item-content">
|
|
<Provider contextKey="x-calendar--item" :value="day">1
|
|
<Consumer contextKey="x-calendar--item">
|
|
<template v-slot="data">
|
|
{{data["label"]}}
|
|
</template>
|
|
</Consumer>
|
|
<!-- <slot><text class="grid-item-text">{{ day.label }}</text></slot> -->
|
|
</Provider>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { format, generateDate } from "./util.uts"
|
|
import { useContext } from "./context.uts"
|
|
import Consumer from "@/hooks/createContext/Consumer.uvue"
|
|
import Provider from "@/hooks/createContext/Provider.uvue"
|
|
|
|
const props = withDefaults(defineProps<{
|
|
current ?: string
|
|
}>(), {
|
|
current: format(new Date())
|
|
})
|
|
|
|
interface TItem { label : string; value : Date; }
|
|
|
|
const currentDate = computed(() => {
|
|
return new Date(props.current)
|
|
})
|
|
|
|
const all = computed<any[]>(() => {
|
|
const Fn = (v : Date) : any => ({
|
|
label: v.getDate() + "",
|
|
value: v
|
|
} as any)
|
|
return generateDate<any>(format(currentDate.value), Fn as (v: Date)=>any)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.grid {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
|
|
.grid-item {
|
|
width: calc(100% / 6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|