AIzhushou-screen/src/components/datePicker/datePicker.vue

<!--
 * @Author: 张宁 18339727226@163.com
 * @Date: 2024-05-27 14:46:17
 * @LastEditors: 张宁 18339727226@163.com
 * @LastEditTime: 2024-05-29 15:37:58
 * @FilePath: \welcome-system-screen\src\components\datePicker\datePicker.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div ref="datePickerRef" class="datePicker">
        <el-config-provider :locale="zhCn">
            <!-- Dropdown button -->
            <button @click="toggleDropdown" style="width: 100%;">
                切换日期
            </button>
            <!-- Dropdown menu -->
            <div v-if="isOpen" class="datePicker-menu">
                <div class="picker-title">
                    <div class="tabs">
                        <div class="title-item" v-for="(tab, index) in tabs" :key="index"
                            :class="{ active: activeTab === index }" @click="changeTab(index)">
                            {{ tab.content?tab.content:'' }}{{ tab.title }}
                        </div>
                    </div>
                    <div class="confirm-box" @click="confirmDate">确定</div>
                </div>
                <div class="picker-content" v-show="activeTab === 0">
                    <yearPane v-model:curYear="myYear" />
                </div>
                <div class="picker-content" v-show="activeTab === 1">
                    <monthPane v-model:curMonth="myMonth" />

                </div>
                <div class="picker-content" v-show="activeTab === 2">
                    <DayPane :curYear="myYear" :curMonth="myMonth" v-model:curDay="myDay" />
                </div>

            </div>
        </el-config-provider>
    </div>
</template>

<script lang="ts" setup name="datePicker">
import { ref, onMounted, onUnmounted, nextTick } from "vue";
import { ElConfigProvider } from 'element-plus'

import zhCn from 'element-plus/es/locale/lang/zh-cn'

// Reactive variables
const isOpen = ref(false); // Dropdown open/close state
const datePickerRef = ref(null); // Reference to datePicker element
const { proxy } = getCurrentInstance();
// Toggle datePicker open/close state
const toggleDropdown = () => {
    isOpen.value = !isOpen.value;
};
const myYear = ref();
const myMonth = ref();
const myDay = ref();

// tabs 切换
const activeTab = ref(0);
const tabs = computed(()=>{
    return [
        { title: '年', content: myYear.value },
        { title: '月', content: myMonth.value },
        { title: '日', content: myDay.value },
    ];
})
const changeTab = (index: number) => {
    activeTab.value = index;
};


// Select an option from the datePicker
const confirmDate = () => {
    isOpen.value = false; // Close the datePicker
    // 将选择的值传递给父组件
    let dates = `${myYear.value}-${myMonth.value}-${myDay.value}`
    console.log(dates);
    proxy.$emit("getOption",dates);
};

// Close datePicker when clicking outside
const closeDropdown = (event: any) => {
    // 单独针对dataPane中的组件进行处理
    if (event.target.className === 'content-border' || event.target.className === 'date-number') {
        return
    }
    if (!datePickerRef.value.contains(event.target)) {
        isOpen.value = false;
    }
};

// Lifecycle hook: mounted
onMounted(() => {
    nextTick(() => {
        document.addEventListener("click", closeDropdown); // Listen for click events outside datePicker
    });
});

// Lifecycle hook: unmounted
onUnmounted(() => {
    document.removeEventListener("click", closeDropdown); // Remove event listener when component is unmounted
});

</script>

<style lang="scss" scoped>
.datePicker {
    position: relative;
    display: inline-block;
}

.datePicker button {
    background: none;
    color: inherit;
    padding: 0;
    border: none;
    // cursor: pointer;
    font-size: inherit;
    font-weight: inherit;
}

.datePicker-menu {
    width: 580px;
    height: 660px;
    position: absolute;
    // left: -50%;
    transform: translate(-530px, 20px);
    // background-color: #f9f9f9;
    background: rgba(0, 0, 0, 0.8);
    min-width: 580px;
    max-height: 660px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    z-index: 1;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    border: 5px double #34354a;
    border-radius: 20px;
    cursor: default;

    // padding: 10px;
    .picker-title {
        line-height: 70px;
        height: 70px;
        border-bottom: 3px solid #272b40;
        display: flex;
        justify-content: space-between;
        align-items: center;

        // width: 580px;
        .tabs {
            display: flex;

            div {
                display: inline-block;
                cursor: pointer;
                width: 100px;
            }

            .active {
                border-bottom: 3px solid #0254eb;
            }
        }

        .confirm-box {
            width: 100px;
            height: 50px;
            line-height: 50px;
            background: #0254eb;
            border-radius: 20px;
            margin-right: 20px;
            cursor: pointer;
        }
    }
}




/* 设置滚动条的宽度 */
::-webkit-scrollbar {
    display: none;
}
</style>