UNPKG

@aurouscia/vue-lunar-date-select

Version:

vue3公历农历联动日期选择器

108 lines (96 loc) 3.08 kB
# vue3公农双历日期选择器 由6个select标签组成的日期选择器组件,需要自定义样式和布局 第一组3个为公历年月日,第二组3个为农历年月日 两组select标签会互相联动,选择其中一个,另一个会自动选择对应的日期 例如: | 年 | 月 | 日 | | --- | --- | --- | | 2025 年 | 5 月 | 22 日 | | 2025 乙巳年 | 四月 | 廿五 | *(实际使用时并没有表头)* ## 安装 ```sh npm install @aurouscia/vue-lunar-date-select ``` ## 使用 ```vue <template> <div class="myContainer"> <LunarDateSelect :range-from="[2000, 1, 1]" :range-to="'tomorrow'" :init="[2025, 6, 1]" @changed="changedHandler" ></LunarDateSelect> </div> </template> ``` ### Props - `range-from` 必填,日期选择器的最小可选公历日期 - `range-to` 必填,日期选择器的最大可选公历日期 - `init` 可选,初始化选中的公历日期,默认为当前日期 以上三个属性可为: - 公历日期数组(长度为3),例如:`[2025, 6, 1]` - 描述相对时间的三种字符串: - `'today'`:当前日期 - `'tomorrow'`:明天 - `'yesterday'`:昨天 - 相对于当前日期的天数偏移量,例如:`-1`表示昨天,`1`表示明天 - `Date`对象 - `tyme4ts``SolarDay`对象 初始化**不会**触发`@changed`emit,但: 如果`init`超出`range-from``range-to`的范围,初始化时会被自动调整到最接近的日期**同时触发emit**输出矫正后的值 ### Emits - `@changed` 可选,日期选择器值改变时触发的事件,返回值为当前选中的公历日期数组(长度为3),例如:`[2025, 6, 1]` ### Expose - `initByProps()` 调用后,使用当前的`Props`值重新初始化整个选择器(覆盖当前值)**若改变了当前值,会触发emit** - `getEmitData()` 获取当前值,与`@changed`获取的相同 ### 自定义样式 本组件不提供任何样式,需自定义样式布局请在外面套上容器,并编写**非scoped**`style`标签,例如: ```css .myContainer{ display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .myContainer>div{ display: flex; flex-wrap: wrap; } .myContainer select{ font-size: 18px; min-width: 80px; } ``` 其中`.myContainer`表示两组选择器外的容器 `.myContainer>div`表示每一组选择器本身的容器 `.myContainer select`表示每一个select标签 ```vue <template> <div class="myContainer"> <LunarDateSelect></LunarDateSelect> </div> </template> ``` 将会变成: ```html <div class="myContainer"> <div> <select></select> <select></select> <select></select> </div> <div> <select></select> <select></select> <select></select> </div> </div> ``` ## 依赖项 使用`tyme4ts`进行可选日期获取和公农历转换计算 ## 反馈与建议 欢迎在gitee上提issue,我会及时更新 ## 许可证 MIT