vue 阳历农历切换选择组件

E往无前呀

已于 2023-07-27 09:06:18 修改

阅读量1k

点赞数 1

分类专栏：组件文章标签： javascript 开发语言 vue.js uni-app

于 2023-06-20 17:47:17 首次发布

本文链接：https://blog.csdn.net/qq_62787048/article/details/131311829

版权

组件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了名为timeChoose的组件，该组件用于时间选择，包括显示与隐藏的控制（showCalendar和isHour属性）、确认（@confirm回调）和取消操作(@cancel)。在@confirm回调中，可以选择年、月、日和时辰，并提供了示例代码展示如何获取和处理这些信息。安装组件需通过npminstallyunshui-calendar命令进行。

摘要由CSDN通过智能技术生成

1.效果如下

2.先介绍组件，组件引入不多说直接上组件

<timeChoose 
:showCalendar="isShowTime" 
@confirm="selectDate" 
:isHour="true"
 @cancel="isShowTime = false">
</timeChoose>

组件上包含两个事件和两个参数

2.1 showCalendar控制组件的显示与隐藏 isHour 是否显示时间后面的时辰 @confirm点击确认回调拿到时间 @cancel关闭组件

2.2 @confirm 事件回调

chooseYear返回年，chooseMonth返回月，chooseDay返回日，chooseHour返回时辰（这里返回时间可以自行在原组件上进行修改）type返回日历还是农历

    async selectDate(e) {
      this.subDate = e
      this.date = e.chooseYear.text + e.chooseMonth.text + e.chooseDay.text + e.chooseHour.text
      console.log(e, '组件')
      this.isShowTime = false
    },