at-james

类似飞书OKR输入框的AT提及功能

介绍

div模拟富文本编辑框，借助 tributejs 实现，里面有可交互的 @ 提及功能。

使用说明

1. 引入 src 目录中的 JS 和 CSS
2. 按照语法进行参数设置和处理

<link rel="stylesheet" href="./src/atMention.css">

<div id="container"></div>

<script type="module">
    import atJames from './src/atJames.js';
    atJames('container', {
        url: './cgi/data.json'
    });
</script>

语法和参数

语法为：

atJames(container, options, optionsTribute);

其中：

container 可输入的编辑框容器元素，可以是 DOM 元素本身，也可以是元素的 id 字符串。 options 可选参数，下面有注释说明。 optionsTribute 可选参数。参见 https://github.com/zurb/tribute 中的参数设置。

关于options可选参数

{
    url: '',
    // 按下回车键后，如果希望阻止默认的回车换行
    // 并做一些事情，这个参数就可以用到
    pressEnter: null,
    // 鼠标经过的提示元素，默认本组件会自己创建
    // 也可以可以自己指定具体的元素
    popOver: 'auto',
    // 鼠标经过和移出 @ 元素的处理
    // event 是事件对象
    // data 是 @元素 对应的请求数据
    // popover 是浮层元素
    onMouseOver: function (event, data, popover) {},
    onMouseOut: function (event, data, popover) {}
}

关于 optionsTribute 可选参数

如果 @ 下拉列表样式不满意，或者请求的数据结构和自己这边的不符合，均是使用 optionsTribute 可选参数进行处理。

请求数据处理使用 values 参数（Function 类型），列表模板和选择后的样式使用参数 menuItemTemplate 和 selectTemplate，详见 https://github.com/zurb/tribute 中的参数设置。

或者参见 atJames.js 中的使用示意，对其进行一一替换即可。

其他

原生 JS 开发，兼容各大框架，但是不兼容 IE 浏览器。

tsc 是 TypeScript Compiler（TypeScript 编译器）的命令行工具。它的主要作用是将 TypeScript 代码（.ts 和 .tsx 文件）编译成 JavaScript 代码（.js 和 .jsx 文件）。这是将 TypeScript 代码转换为浏览器或Node.js环境能够理解和执行的JavaScript代码的必要步骤。 在运行 tsc 之前，你需要在项目的根目录下有一个 tsconfig.json 文件，该文件包含了TypeScript编译器的配置选项，比如编译目标（ES5、ES6等）、模块系统（CommonJS、ES6等）、是否生成声明文件（.d.ts）等。 "build": "tsc && rollup -c rollup.config.ts",

index.html 为本地调试demo,可本地调试查看开发状态