jQuery插件atwho.js实现@提示框过程中碰到的问题

场景：

demo主要使用技术: **vue, elementUI, jQuery, atwho.js**

---

最终效果：

用户点击分享按钮, 弹出如下的分享对话框, 接着用户在多行文本输入框textarea中输入@时, 会在@下方出现提示框, 可以使用键盘上下方向键或鼠标选择提示框中的选项

关键代码:

renderAt() {
   let _this = this;
   $(function () {
     let atConfig = {
       at: "@",
       data: [..._this.follows],
     };
     $("#inputor").atwho(atConfig);
   });
 },

问题描述：

文本框内输入了@, 但是@下方没有如愿出现提示框(提示框内的数据是从后台获取的, 非本地模拟数据), 偶尔修改vue文件中的js代码, 发现有提示框了 -_-|||, 但是刷新页面后, 又不行了(补充, demo使用**vue-cli**创建).

---

排查过程：

先是怀疑后台数据没有获取到, 但是断点打印数据是正常的, 排除.
然后怀疑提示框的渲染时间不够, 在关键代码中使用定时器, 5s后执行, 结果还是一样不行, 也排除.
接着参考使用范例, 新建一个html页面测试, 可以正常使用.

最后排查页面结构时, 发现获取到数据后, 对话框内容没有并没有渲染出来(原本设计是, 从后台获取到数据后, 立即执行关键代码), 直到用户点击分享按钮, 分享对话框弹出时, 对话框内容才会渲染出来. 而多行文本输入框属于对话框内容, 于是代码执行到$("#inputor").atwho(atConfig);这里时, 因为对话框内容没有渲染, $("#inputor")实际上获取不到任何内容, $("#inputor").atwho(atConfig)也就不会执行(这里jQuery不报错)

---

解决：

在分享对话框弹出后, 再执行关键代码(确保获取到textarea)

总结：

菜是原罪, 花两分钟就能解决的问题, 最后几经波折, 废了半天劲才搞定, 最后附上At.js的官方文档