101 lines
2.8 KiB
Markdown
101 lines
2.8 KiB
Markdown
|
# jia-weekPicker 周选择器组件
|
|||
|
|
|
|||
|
|
一个用于选择指定年月中某一周的 uni-app 组件。支持设置可选日期范围、自定义主题色等功能。
|
|||
|
|
|
|||
|
|
## 特性
|
|||
|
|
|
|||
|
|
- 按周选择日期
|
|||
|
|
- 支持自定义可选日期范围
|
|||
|
|
- 自定义主题色
|
|||
|
|
- 流畅的切换动画
|
|||
|
|
- 周一作为每周的第一天
|
|||
|
|
- 支持自定义标题和按钮文本
|
|||
|
|
|
|||
|
|
## 安装方法
|
|||
|
|
|
|||
|
|
在 uni-app 插件市场中搜索 `jia-weekPicker` 并导入到项目中。
|
|||
|
|
|
|||
|
|
## 基础用法
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<button @click="openPicker">打开周选择器</button>
|
|||
|
|
<jia-weekPicker
|
|||
|
|
ref="weekPicker"
|
|||
|
|
:value="selectedDate"
|
|||
|
|
@change="handleWeekChange"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
selectedDate: "2024-03-18", // 默认选中日期
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
openPicker() {
|
|||
|
|
this.$refs.weekPicker.open();
|
|||
|
|
},
|
|||
|
|
handleWeekChange(week) {
|
|||
|
|
console.log("选中的周:", week);
|
|||
|
|
// week 结构如下：
|
|||
|
|
// {
|
|||
|
|
// startDate: '2024-03-18', // 周开始日期
|
|||
|
|
// endDate: '2024-03-24', // 周结束日期
|
|||
|
|
// timestamp: 1711209600000, // 结束日期的时间戳
|
|||
|
|
// weekNumber: 3 // 当月第几周
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## API
|
|||
|
|
|
|||
|
|
### Props
|
|||
|
|
|
|||
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|||
|
|
| ----------- | ------ | ----------------- | ----------------------------------- |
|
|||
|
|
| value | String | 当前日期 | 选中周的初始值，格式为 'YYYY-MM-DD' |
|
|||
|
|
| minDate | String | 当前日期前 6 个月 | 可选的最小日期，格式为 'YYYY-MM-DD' |
|
|||
|
|
| maxDate | String | 当前日期 | 可选的最大日期，格式为 'YYYY-MM-DD' |
|
|||
|
|
| themeColor | String | '#14af6f' | 主题颜色 |
|
|||
|
|
| title | String | '请选择周期' | 选择器标题 |
|
|||
|
|
| confirmText | String | '确定' | 确认按钮文本 |
|
|||
|
|
| cancelText | String | '取消' | 取消按钮文本 |
|
|||
|
|
|
|||
|
|
### Events
|
|||
|
|
|
|||
|
|
| 事件名 | 说明 | 回调参数 |
|
|||
|
|
| ------ | -------------- | --------------------------------------------------- |
|
|||
|
|
| change | 选择周期后触发 | week: { startDate, endDate, timestamp, weekNumber } |
|
|||
|
|
|
|||
|
|
### Methods
|
|||
|
|
|
|||
|
|
| 方法名 | 说明 | 参数 |
|
|||
|
|
| ------ | ------------ | ---- |
|
|||
|
|
| open | 打开周选择器 | - |
|
|||
|
|
|
|||
|
|
### week 对象结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
startDate: String, // 周开始日期，格式：YYYY-MM-DD
|
|||
|
|
endDate: String, // 周结束日期，格式：YYYY-MM-DD
|
|||
|
|
timestamp: Number, // 结束日期的时间戳
|
|||
|
|
weekNumber: Number // 当月第几周
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. 日期格式必须为 'YYYY-MM-DD'
|
|||
|
|
2. minDate 不能大于 maxDate
|
|||
|
|
3. 每周默认以周一为开始日
|
|||
|
|
4. 组件需要通过 ref 调用 open 方法来显示
|