4dkankan_bim/src/components/calendar/index.vue

<template>
    <div class="calendar">
        <span class="prev" @click="emits('prev', props.name)" v-show="controls"><i class="iconfont icon-arrows_left"></i></span>
        <span class="cale" @click="onPickDate()">{{ value.format('YYYY-mm-dd') }}<i class="iconfont icon-date"></i></span>
        <span class="next" @click="emits('next', props.name)" v-show="controls"><i class="iconfont icon-arrows_right"></i></span>
        <div class="calendar-list" v-if="showCalendar" @click="showCalendar = false">
            <div @click.stop>
                <datepicker language="zh" :inline="true" :value="value" :highlighted="highlighted" @selected="onSelected"></datepicker>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, defineProps } from 'vue'
import Datepicker from '@/components/datepicker/Datepicker'
const props = defineProps({
    name: String,
    value: Date,
    controls:Boolean,
    highlighted: Object,
})
const emits = defineEmits(['prev', 'selected', 'next', 'pick'])
const showCalendar = ref(false)
const onPickDate = () => {
    if(props.count<2){
        return
    }
    showCalendar.value = !showCalendar.value
    if (showCalendar.value) {
        emits('pick', props.name)
    }
}
const onSelected =(payload)=>{
    emits('selected', { name: props.name, payload })
    showCalendar.value = false
}
</script>
<style lang="scss" scoped>
.calendar {
    height: 50px;
    background: rgba(27, 27, 28, 0.8);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 47px 47px 47px 47px;
    border: 1px solid #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 16px;
    padding: 0 16px;
    span {
        cursor: pointer;
    }
    .cale {
        i {
            margin-left: 4px;
            font-size: 15px;
        }
    }
    .prev {
        margin-right: 10px;
    }
    .next {
        margin-left: 10px;
    }
}
.calendar-list {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    > div {
        position: relative;
        margin-bottom: 80px;
    }
}
</style>