提示词标签 PromptChip

chip 是 Prompt 编辑器里的内联片段：输入触发字符并选中候选后插入，以单行标签的形式展示，同时仍是输入内容的一部分。modelValue 用 chip 的 label 拼出纯文本，content 则保留文本与 chip 的片段数组。

基础使用

chipConfig 的 trigger 指定唤起候选列表的字符，options 给出候选（也可以混入分组）。选中后，触发字符与已输入的关键词会被替换成一个 chip，插入与移除分别触发 chipAdd 与 chipRemove。

chipType 决定 chip 的类型，可以是固定字符串，也可以是按选项计算的函数；类型会拼成 px-prompt-chip__<type> 类，在输入内容以纯文本保存时不受影响。

Type @ or / to insert a chip

Last added: -

Last removed: -

隐藏源代码

插入与删除

除输入触发字符外，也可以用 ref 上的 insertChip 与 removeChip 手动操作：前者在光标处插入一个 chip，后者按 id 移除。输入触发字符时，trigger 事件会给出当前字符、关键词、面板是否展开以及触发位置。

下面的例子用两个按钮插入与移除 chip，并通过 chipAdd 与 chipRemove 维护自己的列表。

Use the buttons to insert a chip

0 chip(s)

隐藏源代码

自定义样式

chip 的节点由编辑器在输入过程中创建，结构不能替换，外观通过类型类定制：直接用 px-prompt-chip__<type> 改背景、颜色、圆角。chip 处在 contenteditable 中，不要在其中放按钮、输入框这类可聚焦元素。

Type @ to insert a member or a source

隐藏源代码

API

PromptChip

属性	类型	可选	默认值	描述	版本
id	number | string | symbol	否		PromptChip 的唯一标识。	0.2.1
type	string	是		PromptChip 的类型。	0.2.1
label	string	否		PromptChip 展示的文本。	0.2.1
value	string	是		PromptChip 携带的文本值。	0.2.1
data	Record<string, any>	是		PromptChip 携带的自定义数据。	0.2.1

PromptChipConfig

属性	类型	可选	默认值	描述	版本
trigger	string | string[]	是		唤起候选列表的触发字符。	0.2.1
options	(string | PromptOption | PromptGroupOption)[]	是		候选列表的数据。	0.2.1
filter	(query: string, options: (string | PromptOption | PromptGroupOption)[]) => (string | PromptOption | PromptGroupOption)[]	是		候选列表的自定义过滤函数。	0.2.1
dropdownProps	Omit<PopupProps, 'visible' | 'content'> & EmitEvent<PopupEvents>	是		候选列表弹出层的属性与事件。	0.2.1

PromptTriggerPayload

属性	类型	可选	默认值	描述	版本
char	string	否		触发提及的字符。	0.2.1
query	string	否		触发字符之后已输入的关键词。	0.2.1
active	boolean	否		候选列表是否展开。	0.2.1
rect	DOMRect | undefined	是		触发字符所在位置的区域。	0.2.1

事件

以下事件由 Prompt 抛出，参数与 chip 相关，详见 提示词输入。

事件	参数	描述	版本
chipAdd	chip: PromptChip	chip 插入时触发。	0.2.1
chipRemove	chip: PromptChip	chip 移除时触发。	0.2.1
trigger	payload: PromptTriggerPayload	输入提及触发字符时触发。	0.2.1

方法

以下方法通过 ref 调用，属于 Prompt，详见 提示词输入。

属性	类型	可选	默认值	描述	版本
setCaret	(position: PromptCaretPosition) => void	否		将光标移动到指定位置：start、end 或字符偏移；setContent 之后调用需先 await nextTick()。	0.2.1
insertChip	(chip: PromptChip) => void	否		在光标处插入 chip。	0.2.1
removeChip	(id: number | string | symbol) => void	否		移除指定 id 的 chip。	0.2.1

PromptCaretPosition

export type PromptCaretPosition = 'start' | 'end' | number

PromptOption

export interface PromptOption extends Omit<OptionListOption, 'value'> {
	chipType?: string | ((option: PromptOption) => string)
}

PromptGroupOption

export interface PromptGroupOption {
	label: string
	key: string | number | symbol
	children: (PromptOption | string)[]
	type: typeof GROUP_OPTION_TYPE
}

OptionListOption, OptionListOption

export interface OptionListOption<T = any> extends Option<T> {
	disabled?: boolean
	key?: string | number | symbol
}

export interface OptionListGroupOption extends GroupOption {
	label: string
	key: string | number | symbol
	children: (OptionListOption | string)[]
}

Option, GroupOption

export interface Option<T = any> {
	value: T
	label: string
}

export interface GroupOption<T = any> {
	children: (Option<T> | string)[]
	type: 'group'
}