EtDocumentTabs · 多文档标签条
多文档标签:脏标记双通道、关闭确认、溢出列表,契约与 EtTabStrip 同源。
一季度
二季度
备注
更多0
API
Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| modelValue | String | '' | 激活文档的 id |
| documents | Array | () => [] | 文档表:{ id, title, dirty?, closable? }(closable 缺省视为可关闭) |
| overflowLabel | String | '更多' | 窄屏溢出入口文案 |
| confirmClose | Boolean | false | 关闭前弹确认(仅在同时给了 confirmText 时生效) |
| confirmText | String | '' | 关闭确认文案(EbPopconfirm 的 title) |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
| update:modelValue | doc.id | v-model(modelValue)的写入 |
| change | doc.id | 激活文档切换;载荷 = 文档 id |
| close | doc.id | 文档被关闭(关闭钮 / 键盘 Delete);载荷 = 被关闭文档的 id——脏标记下的确认归产品 |
| context | doc.id, event | 文档被右键;载荷 = (文档 id, 原生 MouseEvent),菜单内容由产品给 |
键盘 · 可访问名 · 密度
| 键盘 | 自定义按键(见下) |
|---|---|
| 可访问名 | aria-hiddenaria-labelaria-selectedrole=tablistrole=tabrole=img |
| 密度 | --et-chrome-tabstrip-height--et-chrome-tabstrip-underline-height--et-density-base-font--et-density-caption-font--et-density-line-height--et-toolbtn-fg |
行为
- 脏标记双通道:CSS 圆点(不吃行高)+
role="img"aria-label="未保存";读屏名补「未保存」。 - 关闭默认不弹确认(关闭是产品语义,组件不预判);
confirmClose+confirmText双条件才用EbPopconfirm包一层。 - 溢出:复用 tab-strip 的
planOverflow纯函数;全部条目常驻 DOM(溢出的只收起、不卸载)。 - 键盘:左右 / Home / End 漫游;关闭钮
tabindex="-1",Delete 关闭由条级 keydown 处理。 - 点条目内的关闭钮 / 脏圆点不触发选中。
- 度量令牌与
EtTabStrip逐项共用(同槽位视觉一致)。
令牌与门禁
--et-icon-xs(关闭钮 14 档)。- G4:关闭钮与脏标记都有可访问名。
- 内存:ResizeObserver 卸载时 disconnect。