V1.0.0
Skip to content

WMention 组件 ​

提及组件,基于 WinDesignNext Mention 封装,输入 @ 触发提及列表,选中后插入提及内容,适用于评论、协作备注等场景。

与 WAutocomplete 的区别:WMention 专为 @ 提及设计,支持多触发字符与整体删除;WAutocomplete 为通用自动补全。

基础用法 ​

API ​

属性类型默认值说明
componentstringWMention组件类型(必填)
modelValueDataBindingValue—输入文本,支持 path 双向绑定
optionsarray—静态提及候选项
dataSourcestring—从 dataModel 加载候选项
propsobject—字段映射 { value, label, disabled }
prefixstring | array@触发字符
wholebooleanfalse选中后整体删除提及
placeholderstring—占位文本
loadingbooleanfalse候选项加载中
actionAction—输入/选中事件

path 支持说明 ​

属性path 支持说明
modelValue✅输入文本双向绑定
dataSource✅(路径字符串)提及候选项数组路径

modelValue 数据绑定 ​

json
{ "modelValue": { "path": "/comment" } }

dataSource 动态候选项 ​

json
{
  "component": "WMention",
  "dataSource": "/doctors",
  "modelValue": { "path": "/comment" }
}

候选项格式:

json
[
  { "value": "zhangsan", "label": "张医生" },
  { "value": "lisi", "label": "李医生" }
]

action 定义 ​

json
{
  "action": {
    "event": {
      "name": "onCommentChange",
      "type": "select",
      "context": [{ "key": "comment", "value": { "path": "/comment" } }]
    }
  }
}
  • 输入过程中触发 input 事件
  • 选中提及项时触发 select 事件

注意事项 ​

  • 默认触发字符为 @,可通过 prefix 自定义
  • 不支持 filterOption、checkIsWhole 等函数形式
  • 远程搜索请通过 Agent 更新 dataSource 数据并设置 loading