npm package: @hbis-uni/hbis-datestrip
Description: HBIS UNI dateStrip component
Latest version: 1.0.5

# hbis-dateStrip 组件

用于展示一周的日历信息，支持多种切换方式和选中样式的 UniApp 组件。

## 功能特性

- ✅ 展示一周的日期信息
- ✅ 支持三种选中样式：背景高亮、圆点高亮、圆角高亮
- ✅ 支持日期范围限制
- ✅ 支持禁用过去/未来日期
- ✅ 支持横向滚动，当日期范围超过7天时
- ✅ 支持自定义颜色和背景色
- ✅ 支持自定义可见天数
- ✅ 支持星期和日期一起滚动，完全对齐
- ✅ 日期数字宽度占满父组件
- ✅ 支持自定义插槽
- ✅ 兼容 UniApp 所有平台
- ✅ Vue 3 + TypeScript 开发
- ✅ 支持按需引入

## 安装

### 方式一：通过主组件库安装

```bash
pnpm add @hbis-uni/components
```

### 方式二：单独安装

```bash
pnpm add @hbis-uni/hbis-dateStrip
```

## 使用

### 基本使用

```vue
<template>
  <hbis-dateStrip
    v-model="selectedDate"
    @dateClick="handleDateClick"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { hbisDateStrip } from '@hbis-uni/components';

const selectedDate = ref(new Date());

const handleDateClick = (date) => {
  console.log('点击日期:', date);
};
</script>
```

### 不同高亮类型

```vue
<template>
  <hbis-dateStrip
    v-model="selectedDate"
    highlightType="round"
  />
</template>
```

### 日期范围限制

```vue
<template>
  <hbis-dateStrip
    v-model="selectedDate"
    :startDate="startDate"
    :endDate="endDate"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const selectedDate = ref(new Date());
const startDate = ref(new Date('2025-11-01'));
const endDate = ref(new Date('2025-12-31'));
</script>
```

### 禁用过去/未来日期

```vue
<template>
  <hbis-dateStrip
    v-model="selectedDate"
    disablePast
  />
</template>
```

### 横向滚动示例

```vue
<template>
  <hbis-dateStrip
    v-model="selectedDate"
    :scrollable="true"
    :startDate="new Date('2025-11-01')"
    :endDate="new Date('2025-12-31')"
    @dateClick="handleDateClick"
  />
</template>
```

### 自定义颜色和背景色示例

```vue
<template>
  <hbis-dateStrip
    v-model="selectedDate"
    :selectedColor="'#ffffff'"
    :normalColor="'#666666'"
    :selectedBgColor="'#ff4d4f'"
    :normalBgColor="'transparent'"
    highlightType="bg"
    @dateClick="handleDateClick"
  />
</template>
```

### 自定义插槽

```vue
<template>
  <hbis-dateStrip
    v-model="selectedDate"
  >
    <div class="custom-content">
      <button @click="highlightType = 'bg'">背景高亮</button>
      <button @click="highlightType = 'dot'">圆点高亮</button>
      <button @click="highlightType = 'round'">圆角高亮</button>
    </div>
  </hbis-dateStrip>
</template>
```

## API

### 属性

| 属性名 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| modelValue | Date \| Date[] | `new Date()` | 选中日期，可以是单个日期或日期数组 |
| highlightType | `'bg'` \| `'dot'` \| `'round'` | `'bg'` | 选中样式类型：bg(背景色高亮), dot(数字背景色高亮), round(数字背景色圆角高亮) |
| startDate | Date | `new Date()` | 可选日期范围开始 |
| endDate | Date | `当前日期+30天` | 可选日期范围结束 |
| disablePast | boolean | `false` | 是否禁用过去的日期 |
| disableFuture | boolean | `false` | 是否禁用未来的日期 |
| showToday | boolean | `true` | 是否显示今天标记 |
| scrollable | boolean | `false` | 是否支持横向滑动日期 |
| visibleDays | number | `7` | 可见的天数（默认7天） |
| selectedColor | string | `'#ffffff'` | 选中状态的文字颜色 |
| normalColor | string | `'#666666'` | 正常状态的文字颜色 |
| selectedBgColor | string | `'#1890ff'` | 选中状态的背景颜色 |
| normalBgColor | string | `'transparent'` | 正常状态的背景颜色 |

### 事件

| 事件名 | 参数 | 说明 |
| --- | --- | --- |
| update:modelValue | Date \| Date[] | 选中日期变化事件 |
| dateClick | DateItem | 日期点击事件，返回点击的日期对象 |

### DateItem 类型

```typescript
interface DateItem {
  date: Date;           // 完整日期对象
  dateString: string;   // 格式化的日期字符串（YYYY-MM-DD）
  day: number;          // 日期（1-31）
  month: number;        // 月份（1-12）
  year: number;         // 年份
  isWeekend: boolean;   // 是否是周末
  weekday: number;      // 星期几（0-6，0表示周日）
}
```

### 插槽

| 插槽名 | 说明 |
| --- | --- |
| default | 自定义内容插槽，用于在组件底部添加自定义内容 |

## 样式说明

### 高亮类型

1. **背景高亮 (bg)**：选中日期的整个背景高亮
2. **圆点高亮 (dot)**：选中日期的数字背景高亮，显示为矩形
3. **圆角高亮 (round)**：选中日期的数字背景高亮，显示为圆形

### 样式类名

| 类名 | 说明 |
| --- | --- |
| hbis-date-strip | 组件根容器类 |
| hbis-date-strip__weekdays | 星期行容器类 |
| hbis-date-strip__weekday | 单个星期类 |
| hbis-date-strip__weekday--weekend | 周末星期类 |
| hbis-date-strip__dates | 日期行容器类 |
| hbis-date-strip__date | 单个日期类 |
| hbis-date-strip__date--selected | 选中日期类 |
| hbis-date-strip__date--today | 今天日期类 |
| hbis-date-strip__date--disabled | 禁用日期类 |
| hbis-date-strip__date--weekend | 周末日期类 |
| hbis-date-strip__date-number | 日期数字类 |
| hbis-date-strip__custom | 自定义内容容器类 |

## 兼容性

| 平台 | 兼容性 |
| --- | --- |
| H5 | ✅ 支持 |
| App (iOS) | ✅ 支持 |
| App (Android) | ✅ 支持 |
| 微信小程序 | ✅ 支持 |
| 支付宝小程序 | ✅ 支持 |
| 百度小程序 | ✅ 支持 |
| 字节跳动小程序 | ✅ 支持 |
| QQ小程序 | ✅ 支持 |

## 开发说明

### 组件结构

```
hbis-dateStrip/
├── src/
│   └── hbis-dateStrip.vue   # 组件源码
├── index.ts                  # 组件入口
├── package.json              # 包配置
└── README.md                 # 组件文档
```

### 开发环境

- Vue 3 + TypeScript
- Vite
- UniApp

### 构建命令

```bash
# 构建整个组件库
pnpm run build
```

## 示例

### 完整示例

```vue
<template>
  <div class="container">
    <hbis-dateStrip
      v-model="selectedDate"
      :highlightType="highlightType"
      :startDate="startDate"
      :endDate="endDate"
      :disablePast="disablePast"
      :disableFuture="disableFuture"
      @dateClick="handleDateClick"
    >
      <div class="custom-controls">
        <button @click="highlightType = 'bg'">背景高亮</button>
        <button @click="highlightType = 'dot'">圆点高亮</button>
        <button @click="highlightType = 'round'">圆角高亮</button>
        <button @click="toggleDisablePast">
          {{ disablePast ? '启用过去日期' : '禁用过去日期' }}
        </button>
      </div>
    </hbis-dateStrip>
    
    <div class="result">
      <strong>选中日期：</strong>{{ selectedDate.toLocaleDateString() }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { hbisDateStrip } from '@hbis-uni/components';

const selectedDate = ref(new Date());
const highlightType = ref<'bg' | 'dot' | 'round'>('bg');
const startDate = ref(new Date('2025-11-01'));
const endDate = ref(new Date('2025-12-31'));
const disablePast = ref(false);
const disableFuture = ref(false);

const handleDateClick = (date) => {
  console.log('点击日期:', date);
};

const toggleDisablePast = () => {
  disablePast.value = !disablePast.value;
};
</script>

<style>
.container {
  padding: 20px;
}

.custom-controls {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

button {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.result {
  margin-top: 20px;
  padding: 10px;
  background-color: #f0f5ff;
  border-radius: 4px;
}
</style>
```

## 注意事项

1. 组件默认显示当前周的日期
2. 确保在使用前正确引入组件样式
3. 支持单个日期和日期范围选择
4. 在 UniApp 中使用时，确保使用 `view` 标签而非 `div` 标签
5. 组件宽度默认占满父容器

## 更新日志

### v1.0.8

- ✅ 支持横向滚动，当日期范围超过7天时
- ✅ 支持自定义颜色和背景色
- ✅ 支持自定义可见天数
- ✅ 优化了星期和日期的对齐方式，确保一起滚动
- ✅ 修复了日期数字宽度问题，现在占满父组件
- ✅ 优化了滚动容器样式
- ✅ 完善了文档

### v1.0.0

- ✅ 初始版本发布
- ✅ 支持一周日期展示
- ✅ 支持三种选中样式
- ✅ 支持日期范围限制
- ✅ 支持禁用过去/未来日期
- ✅ 支持自定义插槽

## 许可证

ISC

## 贡献

欢迎提交 Issue 和 Pull Request！

## 联系方式

如果有任何问题或建议，欢迎通过以下方式联系：

- GitHub: [your-github](https://github.com/your-github)
- Email: [your-email@example.com](mailto:your-email@example.com)

---

**HBIS UNI Components Library**

*打造高质量的 UniApp 组件库*