at.js 使用指南
简介
at.js 是一个 JavaScript 库，用于在文本输入中实现自动提及功能，它支持 @username 格式的提及，并能与多种前端框架和库集成，如 React、Vue、Angular 等，本文将详细介绍如何使用 at.js，包括其安装、配置、使用方法以及常见问题解答。
安装
通过 npm 安装
npm install @at-js/core
通过 yarn 安装
yarn add @at-js/core
基本配置
在使用 at.js 之前，需要进行一些基本的配置，以下是一个基本的示例：
import { Mention } from '@at-js/core';
const mention = new Mention({
id: 'mention', // 输入框的 ID
source: [{ id: 'user', name: '用户' }], // 数据源
searchKey: 'name', // 搜索关键字
onSelect: (item) => {
console.log('选中的项目:', item);
}
});
使用方法
初始化
需要创建一个Mention 实例，并传入必要的配置参数。
import { Mention } from '@at-js/core';
const mention = new Mention({
id: 'mention', // 输入框的 ID
source: [{ id: 'user1', name: 'Alice' }, { id: 'user2', name: 'Bob' }], // 数据源
searchKey: 'name', // 搜索关键字
onSelect: (item) => {
console.log('选中的项目:', item);
}
});
绑定输入框
将Mention 实例绑定到指定的输入框。
<input type="text" id="mention" />
触发自动完成
当用户在输入框中输入@ 符号时，at.js 会自动显示一个下拉列表，供用户选择。
mention.start();
自定义样式
可以通过 CSS 自定义下拉列表的样式。
.at-js-list {
border: 1px solid #ccc;
max-height: 200px;
overflow-y: auto;
}
.at-js-list-item {
padding: 5px 10px;
cursor: pointer;
}
.at-js-list-item:hover {
background-color: #f0f0f0;
}
动态更新数据源
可以通过调用updateSource 方法动态更新数据源。
mention.updateSource([{ id: 'user3', name: 'Charlie' }]);
高级配置
多数据源
可以配置多个数据源，并根据不同的前缀触发相应的数据源。
const mention = new Mention({
id: 'mention',
source: [
{ prefix: '@', data: [{ id: 'user1', name: 'Alice' }, { id: 'user2', name: 'Bob' }] },
{ prefix: '#', data: [{ id: 'tag1', name: 'Tag1' }, { id: 'tag2', name: 'Tag2' }] }
],
searchKey: 'name',
onSelect: (item) => {
console.log('选中的项目:', item);
}
});
自定义过滤器
可以通过filter 选项自定义过滤逻辑。
const mention = new Mention({
id: 'mention',
source: [{ id: 'user1', name: 'Alice' }, { id: 'user2', name: 'Bob' }],
searchKey: 'name',
filter: (query, item) => item.name.toLowerCase().includes(query.toLowerCase()),
onSelect: (item) => {
console.log('选中的项目:', item);
}
});
自定义模板
可以通过template 选项自定义下拉列表项的模板。
const mention = new Mention({
id: 'mention',
source: [{ id: 'user1', name: 'Alice' }, { id: 'user2', name: 'Bob' }],
searchKey: 'name',
template: (item) =><div>${item.name}</div>,
onSelect: (item) => {
console.log('选中的项目:', item);
}
});
常见问题与解答
问题1：如何更改下拉列表的宽度？
解答：可以通过 CSS 设置下拉列表的宽度。
.at-js-list {
width: 300px; /* 设置下拉列表的宽度 */
}
问题2：如何禁用自动完成功能？
解答：可以通过设置autocomplete 选项为false 来禁用自动完成功能。
const mention = new Mention({
id: 'mention',
source: [{ id: 'user1', name: 'Alice' }, { id: 'user2', name: 'Bob' }],
searchKey: 'name',
autocomplete: false, // 禁用自动完成功能
onSelect: (item) => {
console.log('选中的项目:', item);
}
});
以上内容就是解答有关“at.js 使用”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/652601.html
微信扫一扫 