@aurouscia/vue-lunar-date-select
Version:
vue3公历农历联动日期选择器
108 lines (96 loc) • 3.08 kB
Markdown
# 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