本文主要是介绍vue 阳历农历切换选择组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
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 = ethis.date = e.chooseYear.text + e.chooseMonth.text + e.chooseDay.text + e.chooseHour.textconsole.log(e, '组件')this.isShowTime = false},
3.组件目录
3.1 npm install yunshui-calendar进行安装
这篇关于vue 阳历农历切换选择组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!