<template><view><!-- u-calendar 组件 --><u-calendar :show="showCalendar" @close="showCalendar = false"><!-- 👇 tooltip 插槽：替换日历顶部内容 --><template #tooltip><!-- 这里写你自定义的顶部内容 --><view class="custom-tooltip"><text class="icon">📅</text><text>这是我自定义的日历顶部</text><button size="mini" @click="handleCustomClick">自定义按钮</button></view></template></u-calendar><!-- 触发显示日历的按钮 --><button @click="showCalendar = true">打开日历</button></view>
</template><script>
export default {data() {return {showCalendar: false}},methods: {handleCustomClick() {console.log('自定义按钮被点击');// 可写你的逻辑，比如弹提示、调接口等}}
}
</script><style scoped>
.custom-tooltip {display: flex;align-items: center;justify-content: center;padding: 10px;background-color: #f5f5f5;
}
.icon {margin-right: 5px;
}
</style>
