85 lines
4.1 KiB
JSON
85 lines
4.1 KiB
JSON
{
|
||
"slug": "chartpanel",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 图表面板容器，头部带刷新与导出、可折叠按钮，折叠是内部状态，默认插槽放图表。",
|
||
"usage": [
|
||
"`defineProps` 收 title / collapsible / collapsed，`defineEmits` 收 refresh 与 export；工具栏按钮直接在模板里写 `@click=\"emit('refresh')\"`，事件不带参数。",
|
||
"折叠状态是内部副本 `isCollapsed = ref(props.collapsed)`：collapsed 只作初始值，点折叠按钮不会同步回父级，也没有 update:collapsed 事件。",
|
||
"collapsible 为真才由 `v-if` 渲染那个带 ▾ 的折叠按钮，为假时头部只剩刷新与导出两个按钮。",
|
||
"折叠只给根元素加 `is-collapsed` 类，面板 DOM 不卸载，插槽里的图表实例不会被销毁重建。",
|
||
"默认插槽有兜底文案「图表区域」，不传内容时渲染这行字，图表本体由使用方放进插槽。"
|
||
],
|
||
"bestPractices": [
|
||
"刷新与导出是纯通知，组件不传任何载荷，父级拿不到被操作的是哪个面板，同页多面板要靠闭包或 ref 自行区分。",
|
||
"collapsed 若需要外部可编程控制，本端做不到（没有对应双向绑定事件），只能改实现或用 key 强制重建。",
|
||
"折叠是 CSS 类切换，正文隐藏方式由样式决定；若样式只做高度过渡，内部图表尺寸不会自动重算。",
|
||
"工具栏按钮文案「刷新」「导出」写死在实现里，无法通过 props 改写。"
|
||
],
|
||
"a11y": [
|
||
"折叠按钮只有 ▾ 字符，没有 `aria-expanded` 与 aria-label，读屏器无法得知当前展开状态和按钮用途。",
|
||
"刷新与导出是原生 `<button>` 键盘可达，但同样只有文本没有额外语义，操作结果需要业务侧另行播报。",
|
||
"折叠仅靠类名控制视觉，若内容只是被 CSS 隐藏而非移除，读屏器可能仍能读到被折叠的内容，需同步 aria-hidden。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 3 端的 API 载体是 3 个 props（title / collapsible / collapsed）、refresh 与 export 两个事件及 1 个默认插槽。",
|
||
"table": [
|
||
{
|
||
"name": "collapsed",
|
||
"type": "Boolean",
|
||
"desc": "是否折叠（frameworks/ChartPanel.vue3.vue:2）"
|
||
},
|
||
{
|
||
"name": "collapsible",
|
||
"type": "Boolean",
|
||
"desc": "是否可折叠（frameworks/ChartPanel.vue3.vue:8）"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "String",
|
||
"desc": "标题（契约：标题栏带展开/折叠、刷新、导出按钮）（frameworks/ChartPanel.vue3.vue:4）"
|
||
},
|
||
{
|
||
"name": "export",
|
||
"type": "(val: any) => void",
|
||
"desc": "点击导出按钮时触发（frameworks/ChartPanel.vue3.vue:7）"
|
||
},
|
||
{
|
||
"name": "refresh",
|
||
"type": "(val: any) => void",
|
||
"desc": "刷新时触发（frameworks/ChartPanel.vue3.vue:6）"
|
||
},
|
||
{
|
||
"name": "default",
|
||
"type": "插槽",
|
||
"desc": "默认插槽（组件文本或主体内容）（frameworks/ChartPanel.vue3.vue:18）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ChartPanel.vue3.vue",
|
||
"kind": "Vue 3",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/ChartPanel.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"chartpanel-ex-1",
|
||
"chartpanel-ex-2",
|
||
"chartpanel-ex-3"
|
||
],
|
||
"notes": [
|
||
"props 与 emits 的声明见 frameworks/ChartPanel.vue3.vue:17-22。",
|
||
"折叠状态是 props.collapsed 的内部副本，见 frameworks/ChartPanel.vue3.vue:23，没有 update:collapsed 事件。",
|
||
"刷新与导出按钮直接派发无参事件，见 frameworks/ChartPanel.vue3.vue:6-7。",
|
||
"折叠按钮的存在条件 collapsible 见 frameworks/ChartPanel.vue3.vue:8，根元素类 is-collapsed 见第 2 行。",
|
||
"该端无插槽具名项：frameworks/ChartPanel.vue3.vue 只使用默认插槽，无 name 属性。"
|
||
]
|
||
}
|