Vue——@功能PC端实现总结

一：前言

近期需要接到一个需求，需要在输入框中实现@通知用户的功能，这个功能现在也有很多应用都有，像我们常用的QQ空间，微博这些，开始看到这个需求，心里一阵惊恐，没做过啊~~

二：思路

我们大体的思路就是：当监听到用户输入@的时候我们弹出人员选择器，这时候我们需要记住现在光标所在的位置，当用户选择人员完毕之后，我们创建一个span标签在插入到我们刚刚记录光标的位置，并且把我们输入的@删除，将光标放在这个节点的最后。

三：需求拆解

按住shift + @ 的时候，弹出人员选择器

人员选择器要跟随光标的位置出现

选择时 @的用户标签插入当前的光标位置中

生成@的用户标签的规则是：高亮、携带用户ID、一键删除信息、不可以编辑。

文本框要随内容自适应高度

用户点击生成的标签或移动键盘方向键也不能聚焦进@的标签，光标需自定移到当前标签最后

输入@后连续输入的非空内容作为搜索关键词

四：准备工作

普通文本输入框实现不了这个功能，这里利用了wangEditor的富文本编辑器功能作为基础载体，

wangeditor的官方文档：www.wangeditor.com/doc/

1：wangeditor安装：

 npm i wangeditor --save 

2：使用

 <div ref="editor"
           id="editor"
           @keyup='enterEvUp($event)'
           @keydown="enterEv($event)">
           </div> 

引入

import E from 'wangeditor' 

3：初始化编辑器

这里通过各种属性来设置编辑器的基础功能

 // 初始换编辑器
    initEditor() {
      const { placeholder, content } = this
      const editor = new E(this.$refs.editor)
      editor.config.placeholder = placeholder
      editor.config.menus = [] // 显示菜单按钮
      editor.config.showFullScreen = false // 不显示全屏按钮
      editor.config.pasteIgnoreImg = true // 如果复制的内容有图片又有文字，则只粘贴文字，不粘贴图片。
      editor.config.height = '100'
      editor.config.zIndex = 2 // 编辑器 z-index 默认为 10000
      editor.config.focus = false // 取消自动 focus
      editor.config.onchange = html => {
        this.onchange(html)
      }
      // 事件绑定
      editor.txt.eventHooks.clickEvents.push(this.clickEvents) // 点击事件
      editor.txt.eventHooks.pasteEvents.push(this.pasteEvents) // 粘贴事件
      editor.create()
      editor.txt.html(content) // 设置编辑器内容
      this.editor = editor
      // 销毁编辑器
      this.$once('hook:beforeDestroy', () => {
        this.editor.destroy()
        this.editor = null
      })
    }, 

五：@功能的实现

@基础功能实现

编辑器基本环境好了后我们正式开始实现@功能，首先我们监听键盘事件：按住shift + @ 的时候，弹出人员选择框，这里监听的触发的时候需要注意的点是不同输入模式下，键盘上@符号的keyCode数字不一样，在英文模式下keyCode的值是50，而中文输入法下标点符号keyCode都是一样的：229，这里需要注意。

 // keydown触发事件(按下键盘时候触发)
    enterEv(e) {
      const { keyCode, code } = e
      
      // 英文code是 50， 判断是否按住shift + @键
      // 中文输入法下标点符号keyCode都是一样的：229，推荐使用event.code或event.key作为@的判断。
       const isCode =
        ((keyCode === 229 && e.key === '@') ||
          (keyCode === 229 && e.code === 'Digit2') ||
          keyCode === 50) &&