提及 Mention

用于在输入中提及某人或某事，常用于发布、聊天或评论功能。

基本使用

用于在输入中提及某人或某事，常用于发布、聊天或评论功能。

---

代码事例

<template>
  <fk-space direction="vertical" size="large" style="width: 100%">
    <fk-mention v-model="value" :data="['Aaaa', 'Bytedesign', 'Bytenumner']" placeholder="enter something" />
    <fk-mention v-model="text" :data="['Aaaa', 'Bytedesign', 'Bytenumner']" type="textarea" placeholder="enter something" />
  </fk-space>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const value = ref('');
    const text = ref('');

    return {
      value,
      text
    }
  }
}
</script>

自定义触发字符

指定 prefix 来自定义触发字符。默认为 @，可以自定义为任意字符。

---

代码事例

<template>
  <fk-space direction="vertical" size="large" style="width: 100%">
    <fk-mention :data="['Aaaa', 'Bytedesign', 'Bytenumner']" placeholder="input @" />
    <fk-mention :data="['Aaaa', 'Bytedesign', 'Bytenumner']" prefix="#" placeholder="input #" />
    <fk-mention :data="['Aaaa', 'Bytedesign', 'Bytenumner']" prefix="$" placeholder="input $" />
  </fk-space>
</template>

API

<mention> Props

参数名	描述	类型	默认值	版本
model-value (v-model)	绑定值	string	-
default-value	默认值（非受控状态）	string	''
data	用于自动补全的数据	(string | number | SelectOptionData | SelectOptionGroup)[]	[]
prefix	触发自动补全的关键字	string | string[]	'@'
split	选中项的前后分隔符	string	' '
type	输入框或文本域	'input' | 'textarea'	'input'
disabled	是否禁用	boolean	false
allow-clear	是否允许清空输入框	boolean	false	1.0.0

<mention> Events

事件名	描述	参数	版本
change	值发生改变时触发	value: string
search	动态搜索时触发，2.47.0 版本增加 prefix 参数	value: string prefix: string
select	选择下拉选项时触发	value: string | number | Record<string, any> | undefined
clear	用户点击清除按钮时触发	-	1.0.0
focus	文本框获取焦点时触发	ev: FocusEvent	1.0.0
blur	文本框失去焦点时触发	ev: FocusEvent	1.0.0

<mention> Methods

方法名	描述	参数	返回值	版本
focus	使输入框获取焦点	-	-	1.0.0
blur	使输入框失去焦点	-	-	1.0.0

<mention> Slots

插槽名	描述	参数	版本
option	选项内容	data: OptionInfo	1.0.0