代码拉取完成,页面将自动刷新
div模拟富文本编辑框,借助 tributejs 实现,里面有可交互的 @ 提及功能。
Demo地址:https://zhangxinxu.gitee.io/okr-at-mention/
<link rel="stylesheet" href="./src/atMention.css">
<div id="container"></div>
<script type="module">
import atWakaka from './src/atWakaka.js';
atWakaka('container', {
url: './cgi/data.json'
});
</script>
语法为:
atWakaka(container, options, optionsTribute);
其中:
{
url: '',
// 按下回车键后,如果希望阻止默认的回车换行
// 并做一些事情,这个参数就可以用到
pressEnter: null,
// 鼠标经过的提示元素,默认本组件会自己创建
// 也可以可以自己指定具体的元素
popOver: 'auto',
// 鼠标经过和移出 @ 元素的处理
// event 是事件对象
// data 是 @元素 对应的请求数据
// popover 是浮层元素
onMouseOver: function (event, data, popover) {},
onMouseOut: function (event, data, popover) {}
}
如果 @ 下拉列表样式不满意,或者请求的数据结构和自己这边的不符合,均是使用 optionsTribute 可选参数进行处理。
请求数据处理使用 values 参数(Function 类型),列表模板和选择后的样式使用参数 menuItemTemplate 和 selectTemplate,详见 https://github.com/zurb/tribute 中的参数设置。
或者参见 atWakaka.js 中的使用示意,对其进行一一替换即可。
原生 JS 开发,兼容各大框架,但是不兼容 IE 浏览器。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。