<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: {
    // 傳入需要被@的成員數(shù)組
    listData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    clickItem(item) {
      this.$emit('onSelect', item); // 調(diào)用父組件處理成員選擇的方法，并回傳當(dāng)前選擇項(xiàng)
    }
  }
}
</script>

// 核心代碼
...
// 選擇成員時(shí)插入數(shù)據(jù)，并關(guān)閉彈窗
onSelect(item) {
    console.log('onSelect', item);
    this.$refs.inputBox.insertContent(`${item.name} `); // 有空格
    this.isShowAt = false;
},
// 輸入框輸入時(shí)回調(diào)函數(shù)
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中
        // 設(shè)置位置
        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); // 獲取當(dāng)前光標(biāo)
let position = range.getBoundingClientRect(); // 獲取當(dāng)前光標(biāo)的位置

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

// DivEditable.vue
// 恢復(fù)光標(biāo)
restoreSelection(range) {
    if (range) {
        let sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
},
// 插入數(shù)據(jù)
insertContent(value) {
    // this.$refs.editor.focus();
    let range, node;
    this.restoreSelection(this.selection); // 還原失焦前的光標(biāo)位置
    range = window.getSelection().getRangeAt(0);
    range.collapse(false); // 光標(biāo)移動(dòng)到最后
?
    node = range.createContextualFragment(value);
    let child = node.lastChild;
    console.log('lastChild', child);
    range.insertNode(node);
    // 將光標(biāo)的起始位置設(shè)置在當(dāng)前插入的元素后面
    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) {
    // 失焦時(shí)延時(shí)關(guān)閉彈窗，避免還未拿到數(shù)據(jù)
    if (this.isShowAt) {
        setTimeout(() => {
            this.isShowAt = false;
        }, 500);
    }
},