BIN-UI-DESIGN日历组件 Calendar
基础用法
简单的日历组件用于装饰页面
2024 年 9 月
- 一
- 二
- 三
- 四
- 五
- 六
- 日
- 26
- 27
- 28
- 29
- 30
- 31
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 1
- 2
- 3
- 4
- 5
- 6
<template>
<b-calendar></b-calendar>
</template><template>
<b-calendar></b-calendar>
</template>mini显示
简单的日历组件用于装饰页面
2024 年 9 月
- 一
- 二
- 三
- 四
- 五
- 六
- 日
- 26
- 27
- 28
- 29
- 30
- 31
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 1
- 2
- 3
- 4
- 5
- 6
2024 年 9 月
- 一
- 二
- 三
- 四
- 五
- 六
- 日
- 26
- 27
- 28
- 29
- 30
- 31
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 1
- 2
- 3
- 4
- 5
- 6
<template>
<div flex>
<div style="width: 300px">
<b-calendar mini></b-calendar>
</div>
<div style="width: 300px">
<b-calendar
mini
:body-style="{ border: 'none' }"
:day-style="{ border: 'none', borderRadius: '4px' }"
></b-calendar>
</div>
</div>
</template><template>
<div flex>
<div style="width: 300px">
<b-calendar mini></b-calendar>
</div>
<div style="width: 300px">
<b-calendar
mini
:body-style="{ border: 'none' }"
:day-style="{ border: 'none', borderRadius: '4px' }"
></b-calendar>
</div>
</div>
</template>Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| grid-height | 日期高度，不填默认 80 | String | — | 80px |
| text-align | 日期对其方式 | String | left center right | left |
| mini | 迷你模式 | Boolean | l— | — |
| body-style | 日期表body样式 | Object | — | — |
| day-style | 每天样式 | Object | — | — |
Events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| prev | 上个月按钮事件 | — |
| next | 下个月按钮事件 | — |
| today | 今天按钮事件 | — |
| selected | 选中某一天事件 | day |