vue实现@人员功能(atSomeone)

@人员功能，at人员功能

因为项目需要，产品要实现@人员功能，网上找了一大堆没有好用的，只能自己写了

准备工作

1. npm install wangeditor (最好是^4.7.15这个版本，怕下载错的话直接在package.json中写上"wangeditor": "^4.7.15"然后在运行 npm i)
2. npm install caret-pos
3. browser.js（自己写的，如果不需要判断浏览器则不需要，代码我贴在下面了）

重要代码分析

这里的enterEv方法是重点，主要用来监听@字符，然后弹出渲染窗口，该方法下调用了一个 getPosition() 方法，只要用来获取光标位置，设置渲染弹窗的渲染位置，详细看代码中的getPosition()
//根据输入@的位置定位下拉框的位置
this.getPosition()

关键的创建容器是使用wangeditor来初始化的，文档看这里

接下来就是代码了

首先创建一个单独的vue文件，抽离组件，文件位置看个人习惯

<template>
  <div class="at-someone-content">
    <div ref="editor" class="editor" :id="id" @keydown="enterEv($event)"></div>
    <div
      v-show="showFlag"
      class="at-someone"
      :style="{
        left: left + 'px',
        top: top + 'px',
        visibility: showFlag
      }"
    >
      <div class="at-someone-box" ref="atSomeoneBox">
        <a-input
          ref="searchInput"
          class="search-input"
          placeholder="请输入姓名"
          v-model.trim="searchKeyword"
          @input="handlerSearchInput"
          @blur="searchBlue"
        />
        <a-spin :loading="userLoading">
          <ul v-if="userList.length" class="mention-option-ul">
            <li
              v-for="(item, index) in userList"
              :key="index"
              class="mention-option-li"
              @click="selectPerson(item)"
            >
              <span class="mention-option-img-cont">
                <img v-if="item.avatar" class="mention-option-img" :src="item.avatar">
                <span v-else class="mention-option-img-name">{
  { item.name[0] }}</span>
              </span>
              <span class="mention-option-name">{
  { item.name }}</span>
              <span cla