vue实现At人文本输入框示例详解

<!--main.vue!-->
<template>
  <div>
    <Editor v-model="value"/>
  </div>
</template>

<!--editor.vue!-->
<template>
  <div>
    <div
      class="editor"
      contenteditable="true"
      @input="input"
    />
  </div>
</template>
<script>
export default {
  computed: {
    editor() {
      return this.$refs.editor || {}
    }
  },
  methods: {
    input(e) {
      this.$emit('input', this.getEditorhtml())
    },
    getEditorHtml() {
      return this.editor.innerHTML || ''
    }
  }
}
</script>
<style lang="less" scoped>
.editor{
  overflow-y: auto;
  background: #F4F6FB;
  border-radius: 4px;
  border: 1px solid transparent;
  min-height: 40px;
  max-height:200px;
  padding: 14px 9px;
  line-height: 20px;
  &:empty{
    &::before{
      content:'输入你想对他/她说的话，然后@她！';
      color: #999;
    }
  }
  &:focus{
    outline: none;
    border-color: #3656C6;
    border-radius: 4px;
  }
}
</style>

input(e) {
  if (e.data === '@') {
    // 弹出用户选择框
    this.$refs.UserList.show()
    // 失去焦点，退出手机的软体键盘
    this.editor.blur()
  }
  this.$emit('input', this.getEditorHtml())
},

userItemClick(item) {
  const dom = this.createAtDom(item)
  this.$refs.editor.innerHTML = this.$refs.editor.innerHTML + dom.outerHTML
  this.$refs.UserList.close()
},
createAtDom(item) {
  const dom = document.createElement('span')
  dom.classList.add('active-text')
  // 这里的contenteditable属性设置为false，删除时可以整块删除
  dom.setAttribute('contenteditable', 'false')
  // 将id存储在dom元素的标签上，便于后续数据处理
  dom.setAttribute('data-id', item.id)
  dom.innerHTML = `&nbsp@${item.name}&nbsp`
  return dom
},

//改造input函数
input(e) { 
  if (e.data === '@') {
    // 保存焦点位置
    this.saveIndex()
    // 弹出用户选择框 
    this.$refs.UserList.show() 
    // 失去焦点，退出手机的软体键盘
    this.editor.blur() 
  }
  this.$emit('input', this.getEditorHtml()) 
},
// 添加saveIndex方法
async saveIndex() {
  // 获取selection对象
  const selection = getSelection()
  // 保存当前焦点的位置
  this.selectionIndex = selection.anchorOffset
},

// 改造userItemClick函数
userItemClick(item) {
  const dom = this.createAtDom(item)
  this.aDDData(item)
  this.$refs.UserList.close()
},
// 添加dom节点到指定位置
addData(item){
  const html = this.editor.innerHTML
  const leftInnerHtml = html.substring(0, this.selectionIndex - 1)
  const dom = this.createAtDom(item)
  const rightInnerHtml = html.substring(this.selectionIndex, html.length)
  this.editor.innerHTML = leftInnerHtml + dom.outerHTML + rightInnerHtml
}

// 改造一下saveIndex
async saveIndex() {
  const selection = getSelection()
  this.selectionIndex = selection.anchorOffset
  const nodeList = this.editor.childNodes
  // 保存当前编辑的dom节点
  for (const [index, value] of nodeList.entries()) {
    // 这里第二个参数要配置成true，没配置有其他的一些小bug，这里不展开讲，详细可以看文档
    if (selection.containsNode(value, true)) {
      this.dom = value
      this.domIndex = index
    }
  }
},

// 改造一下addData方法
addData(item) {
  const html = this.dom.textContent
  const leftText = html.substring(0, this.selectionIndex - 1)
  const dom = this.createAtDom(item)
  const rightText = html.substring(this.selectionIndex, html.length)
  this.dom.textContent = leftText + dom.outerHTML + rightText
},

addData(item) {
  const text = document.createDocumentFragment()
  const span = document.createElement('span')
  const html = this.dom.textContent
  // 左边的节点
  const textLeft = document.createTextNode(html.substring(0, this.selectionIndex - 1) + '')
  // 这里如果textLeft是个空的文本节点，会导致@用户无法删除，这里添加一个判断，如果是空，则插入一个空的span节点
  text.appendChild(textLeft.textContent ? textLeft : span)
  // 加入@人的节点
  text.appendChild(this.createAtDom(item))
  // 右边的节点
  const textRight = document.createTextNode(html.substring(this.selectionIndex, html.length))
  textRight.textContent && text.appendChild(textRight)
  this.editor.insertBefore(text, this.dom)
  this.editor.removeChild(this.dom)
},