命令面板
@astryxdesign/core v0.7.1 · CommandPalette
属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
isOpen | boolean | - | 面板是否打开。 |
searchSource | SearchSource | - | 命令从哪来。空查询会调用 bootstrap。 |
isInline | boolean | false | 画在页面流里,而不是模态对话框。 |
label | string | 命令面板 | 对话框的无障碍名称。 |
width | number | string | 640 | 对话框宽度。数字按像素。 |
maxHeight | number | string | 480 | 对话框最大高度。数字按像素。 |
emptySearchText | string | 没有结果 | 查询没有命中时显示的文字。 |
emptyBootstrapText | string | 输入以搜索 | 数据源还没有可列内容时显示的文字。 |
value | string | - | 选择模式下的选中 id。用 v-model:value 绑定。 |
事件
| 名称 | 参数 | 说明 |
|---|---|---|
openChange | boolean | 下一次的打开状态。Escape 和选中一行都会关闭面板。 |
update:value | string | 刚选中的那一行的 id。 |
valueChange | string | 同一次选中,用原版的回调名字,方便从 React 迁过来的代码。 |
插槽
| 名称 | 参数 | 说明 |
|---|---|---|
input | - | 替换 CommandPaletteInput。 |
item | { item, isSelected } | 行内容。isSelected 是选择模式的匹配,不是键盘高亮。 |
footer | - | 替换默认提示行。替换内容还要保留页脚外观时,放一个 CommandPaletteFooter。 |
CommandPaletteInput
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
placeholder | string | 搜索… | 占位文字,也是没有单独标签时的无障碍名称。 |
label | string | - | 组合框的无障碍名称。不传时用 placeholder。 |
hasAutoFocus | boolean | true | 面板打开时聚焦输入框。内联面板会跳过。 |
value | string | - | 搜索词,用 v-model:value 绑定。不传时读写外层 CommandPalette 的搜索词。 |
| 名称 | 说明 |
|---|---|
valueChange | 下一个搜索词。只在绑定了 value 时触发,否则输入框直接写到面板里。 |
endContent 插槽(也可以写成 end)是转圈图标后面的内容。
CommandPaletteList
label 是列表框的名称,默认是「命令」。
CommandPaletteGroup
heading 是分组标题,也是这一组的无障碍名称。
CommandPaletteItem
value 是命令 id。isDisabled 会挡住选择。isHighlighted 和 isSelected 会盖掉从面板读到的状态,单独展示某一行时用得上。鼠标点击激活时发出 select,参数是这一行的值。默认插槽是行内容。
CommandPaletteEmpty
默认插槽是空状态文字。
CommandPaletteFooter
默认插槽替换「移动 / 选择 / 关闭」这组提示,页脚外观保留。