Returns Calendar
通过日历、月份汇总和可选日期内容比较每日正负收益。
适用场景
- 当界面需要以下行为时使用 Returns Calendar：通过日历、月份汇总和可选日期内容比较每日正负收益。
安装
选择安装方式，用法示例将同步更新导入路径。
$ bunx --bun shadcn-vue@2.8.2 add https://orvui.efu.me/r/returns-calendar.json
首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。
示例
预览
JFMAMJJASONDYear’21’22’23’24’25
| Year | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Year total |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2021 | 1.1 | 4 | -4.2 | 5.5 | 6.9 | 5.4 | 5.2 | -2.9 | -2.3 | -1.9 | -3.9 | 1.6 | 14.455433902885728 |
| 2022 | 3.4 | -3.3 | -4.5 | -0.4 | -3.4 | -3 | -1.4 | -1.1 | -7 | 3.8 | 0.3 | 2.4 | -13.83855342080964 |
| 2023 | 4.9 | 2.4 | 0.7 | -1.9 | 0 | 5.3 | 6.2 | 4.3 | 4.6 | 5.1 | -2.6 | -0.6 | 31.731871232682263 |
| 2024 | -3.2 | -2.2 | -2.3 | -2.3 | 4.1 | -2.2 | 3.2 | -3.3 | -3.7 | 4 | -0.8 | 3.5 | -5.591576924853204 |
| 2025 | 4.4 | -0.8 | 3.8 | -1.8 | -3.1 | -2.3 | -3 | 4.6 | -1.7 | -0.7 | -4.8 | -2.8 | -8.409853996695437 |
packages/vue/src/charts/returns-calendar/demo.vue
<script setup lang="ts">
import { ReturnsCalendar } from "@/components/orvui/charts/returns-calendar";
const years = [2021, 2022, 2023, 2024, 2025];
let seed = 2021;
function sample() {
seed = (seed * 1103515245 + 12345) & 0x7fffffff;
return seed / 0x7fffffff;
}
const returns = years.map((_, index) =>
Array.from(
{ length: 12 },
() =>
Math.round(((index === 1 ? -1.6 : 0.9) + (sample() - 0.5) * 12) * 10) /
10,
),
);
</script>
<template><ReturnsCalendar :years="years" :returns="returns" /></template>
packages/vue/src/charts/returns-calendar/src/ReturnsCalendar.vue
状态与事件
需要由表单、路由或父组件管理时，绑定下列状态并接收对应更新。v-model 是属性与 update 事件的简写；值的类型应与 API 一致。
| 组件 | Vue 绑定 | 更新事件 |
|---|---|---|
ReturnsCalendar | v-model:selectionnull | ReturnsCalendarSelection | update:selection |
可选受控属性未传入时，按组件文档的默认行为工作；不要用固定的 false 或空值代替未传入。异步请求和持久化在应用中处理，再把结果传回组件。
API 参考
ReturnsCalendar
years?number[]Row labels, one per row of `returns`.
[]returns?number[][]`returns[year][month]` in percent, twelve months per row.
[]className?string—selection?null | ReturnsCalendarSelection—defaultSelection?null | ReturnsCalendarSelectionnullonSelectionChange?(selection: ReturnsCalendarSelection | null) => void—事件
update:selection—@update:selectionselectionChange—@selectionChange插槽
default() => VNodeChild#defaultReturnsCalendarGrid
插槽
default() => VNodeChild#defaultReturnsCalendarTooltip
插槽
default—作用域参数: label, value, note
#default无障碍
为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。
常见问题
- 如何配置 Returns Calendar？
- 通过带作用域的默认插槽定制日期内容，并读取日期与收益数值。
- 如何连接到应用状态？
- 监听 update:selection、selectionChange，将组件连接到应用状态。
- 可以在服务端渲染吗？
- 可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。
更新于
来源与许可 ↗MIT · 0.1.1