Vue实现输入框@功能的示例代码

<template>
  <div class="at-pop-index">
    <div v-for="(item, index) in listData" :key="index" class="at-pop-item" @click.stop="clickItem(item)">{{item.name}}</div>
  </div>
</template>
<script>
export default {
  props: {
    // 传入需要被@的成员数组
    listData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    clickItem(item) {
      this.$emit('onSelect', item); // 调用父组件处理成员选择的方法，并回传当前选择项
    }
  }
}
</script>

// 核心代码
...
// 选择成员时插入数据，并关闭弹窗
onSelect(item) {
    console.log('onSelect', item);
    this.$refs.inputBox.insertContent(`${item.name} `); // 有空格
    this.isShowAt = false;
},
// 输入框输入时回调函数
inputFunc(data, event) {
    console.log('inputFunc', data, event);
    if (event.data === '@') {
        this.isShowAt = true; // 显示弹窗
        this.$nextTick(() => {
        let dom = document.getElementsByClassName('at-pop-index')[0]; // 获取成员列表弹窗，需要放在nextTick中
        // 设置位置
        dom.style.position = 'fixed';
        dom.style.left = Math.floor(data.left + 10) + 'px';
        dom.style.top = Math.floor(data.top) + 'px';
        dom.style.zIndex = 9999;
        })
    } else {
        this.isShowAt = false;
    }
},
...

let range = window.getSelection().getRangeAt(0); // 获取当前光标
let position = range.getBoundingClientRect(); // 获取当前光标的位置

// DivEditable.vue
// 失焦
inputBlur(event) {
    this.selection = this.saveSelection();
    this.$emit('blurFunc', event);
},
// 失焦时保存光标
saveSelection() {
    if (!window.getSelection) {
        return null;
    }
    let sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        return sel.getRangeAt(0);
    }
},

// DivEditable.vue
// 恢复光标
restoreSelection(range) {
    if (range) {
        let sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
},
// 插入数据
insertContent(value) {
    // this.$refs.editor.focus();
    let range, node;
    this.restoreSelection(this.selection); // 还原失焦前的光标位置
    range = window.getSelection().getRangeAt(0);
    range.collapse(false); // 光标移动到最后
​
    node = range.createContextualFragment(value);
    let child = node.lastChild;
    console.log('lastChild', child);
    range.insertNode(node);
    // 将光标的起始位置设置在当前插入的元素后面
    if (child) {
        range.setEndAfter(child);
        range.setStartAfter(child);
    }
​
    let sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    this.$emit('input', this.$refs.editor.innerHTML);
},

// InputBox.vue
blurFunc(event) {
    // 失焦时延时关闭弹窗，避免还未拿到数据
    if (this.isShowAt) {
        setTimeout(() => {
            this.isShowAt = false;
        }, 500);
    }
},