简介
@dhis2/d2-ui-mentions-wrapper 是 DHIS2 组织推出的一个 npm 包，旨在为前端开发人员提供一种方便的方法来实现「对话框」组件中的「提及」功能。它可以轻松地添加「@」符号，并在用户输入时自动匹配建议列表。
安装
使用 npm 安装：
npm install @dhis2/d2-ui-mentions-wrapper
或者使用 yarn 安装：
yarn add @dhis2/d2-ui-mentions-wrapper
使用
使用 MentionsInput 组件来添加「提及」功能。使用 MentionsList 组件添加建议列表。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - -------------- ------- - ---- --------------------------------
------ -----------------------------------------------
----- ---------------- - -- -- -
----- ------- --------- - -------------
----- ------------- - ------- --------- -- -
-------------------
--
------ -
-------------- ------------- -------------------------
--------
-----------
-------
- --- -- -------- ----- -------- --
- --- -- -------- ----- ------- --
- --- -- -------- ---------- ----- --
- --- -- -------- ------- --------- --
--
------------------------------ -- --------------------------------
--
----------------
--
--详解
MentionsInput
MentionsInput 组件是必要的，可以使用它作为 Mention 建议列表的容器。它可以接受一些 props：
value: string - 必需，组件的值。onChange: function(value: string) - 必需，每次输入内容更改时的回调。
Mention
Mention 组件是建议列表的实际内容。它接受以下 props：
trigger: string - 必需，触发建议列表的字符。data: array of objects - 必需，要在建议列表中显示的数据。renderSuggestion: function(item: object) - 必需，用于渲染建议列表项的函数。
总结
@dhis2/d2-ui-mentions-wrapper 是一个非常有用的 npm 包，它可以帮助我们轻松地实现「提及」功能，从而实现更流畅的对话体验。我们可以在自己的项目中使用它，并根据需要进行定制化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/116279