Skip to content

命令面板

@astryxdesign/core v0.7.1 · CommandPalette

属性 ​

名称类型默认值说明
isOpenboolean-面板是否打开。
searchSourceSearchSource-命令从哪来。空查询会调用 bootstrap。
isInlinebooleanfalse画在页面流里,而不是模态对话框。
labelstring命令面板对话框的无障碍名称。
widthnumber | string640对话框宽度。数字按像素。
maxHeightnumber | string480对话框最大高度。数字按像素。
emptySearchTextstring没有结果查询没有命中时显示的文字。
emptyBootstrapTextstring输入以搜索数据源还没有可列内容时显示的文字。
valuestring-选择模式下的选中 id。用 v-model:value 绑定。

事件 ​

名称参数说明
openChangeboolean下一次的打开状态。Escape 和选中一行都会关闭面板。
update:valuestring刚选中的那一行的 id。
valueChangestring同一次选中,用原版的回调名字,方便从 React 迁过来的代码。

插槽 ​

名称参数说明
input-替换 CommandPaletteInput。
item{ item, isSelected }行内容。isSelected 是选择模式的匹配,不是键盘高亮。
footer-替换默认提示行。替换内容还要保留页脚外观时,放一个 CommandPaletteFooter。

CommandPaletteInput ​

名称类型默认值说明
placeholderstring搜索…占位文字,也是没有单独标签时的无障碍名称。
labelstring-组合框的无障碍名称。不传时用 placeholder。
hasAutoFocusbooleantrue面板打开时聚焦输入框。内联面板会跳过。
valuestring-搜索词,用 v-model:value 绑定。不传时读写外层 CommandPalette 的搜索词。
名称说明
valueChange下一个搜索词。只在绑定了 value 时触发,否则输入框直接写到面板里。

endContent 插槽(也可以写成 end)是转圈图标后面的内容。

CommandPaletteList ​

label 是列表框的名称,默认是「命令」。

CommandPaletteGroup ​

heading 是分组标题,也是这一组的无障碍名称。

CommandPaletteItem ​

value 是命令 id。isDisabled 会挡住选择。isHighlighted 和 isSelected 会盖掉从面板读到的状态,单独展示某一行时用得上。鼠标点击激活时发出 select,参数是这一行的值。默认插槽是行内容。

CommandPaletteEmpty ​

默认插槽是空状态文字。

CommandPaletteFooter ​

默认插槽替换「移动 / 选择 / 关闭」这组提示,页脚外观保留。