hi-mention

Mention 提及

用于在输入框中提及用户或角色。

安装

npm install hi-mention --save

引入

import Mention from "hi-mention";

VUE 使用示例

查看 demo 示例

<template>
  <div class="editor-content"></div>
</template>

<script lang="ts" setup>
  import Mention from "hi-mention";
  import "hi-mention/index.css";
  import { onMounted } from "vue";

  onMounted(() => {
    new Mention(".editor-content", {
      users: [
        { name: "张三", id: 1 },
        { name: "李四", id: 2 },
        { name: "王五", id: 3 },
        { name: "赵六", id: 4 },
        { name: "钱七", id: 5 },
        { name: "孙八", id: 6 },
        { name: "周九", id: 7 },
        { name: "吴十", id: 8 },
      ],
    })
      .on("focus", (e) => {
        console.log("focus", e);
      })
      .on("blur", (e) => {
        console.log("blur", e);
      })
      .on("change", (d) => {
        console.log("change", d?.html);
        msg.value = d?.html || "";
      });
  });
</script>

<style>
  .editor-content {
    width: 500px;
    height: 200px;
    border: 1px solid #ccc;
    padding: 5px 10px;
  }
</style>

参数

参数	说明	类型	默认值
trigger	触发字符	string	@
media	媒体类型（PC 和 H5 的用户列表展示有差异）	PC/H5	PC
placeholder	占位符	string	请输入
placeholderColor	占位符颜色	string	#aaa
usersWdith	用户列表宽度（media=PC时有效）	string	200px
usersHeight	用户列表最大高度	string	200px
users	用户列表	Array<User>	[]
idKey	User对象id字段(该字段支持@搜索)	string	id
nameKey	User对象name字段(该字段支持@搜索)	string	name
pingyinKey	User对象pingyin字段(该字段支持@搜索)	string	pingyin
avatarKey	User对象avatar字段	string	avatar

API

方法	说明	类型	备注
on	监听事件	(key:EventType,fn:(data?:any)=>void)=>this	-
updateUsers	更新用户列表	(users:Array<User>)=>this	-
updateMedia	更新媒体类型	(media:"PC"/"H5")=>this	-
clear	清空输入框	()=>this	-
insertText	在光标位置插入文本内容	(text:string)=>this	-
insertHtml	在光标位置插入 HTML 内容	(html:Element)=>this	-
focus	获取焦点、将光标移动到输入框末尾	()=>this	-
getData	获取输入框内容	()=>{html:string,text:string}	-
getMentions	获取输入框内提及的用户对象列表	()=>Array<User>	-

User 类型

• 以下字段为推荐字段，若字段不存在，请使用idKey、nameKey、pingyinKey、avatarKey字段进行配置

字段名	必须	说明	类型
id	否	键（该字段支持@查询）	string
name	否	名字（该字段支持@查询）	string
pingyin	否	拼音（该字段支持@查询）	string
avatar	否	头像	string
element	否	用户列表中展示的元素，若不提供该字段，则使用默认样式	Element