如何通过Vue实现@人的功能

本文采用vue，同时增加鼠标点击事件和一些页面小优化

基本结构

新建一个sandBox.vue文件编写功能的基本结构

如果添加了点击事件，节点和光标位置获取，需要在【键盘抬起事件】中获取，并保存到data

 // 键盘抬起事件
    handkeKeyUp () {
      if (this.showAt()) {
        const node = this.getRangeNode() // 获取节点
        const endIndex = this.getCursorIndex() // 获取光标位置
        this.node = node 
        this.endIndex = endIndex 
        this.position = this.getRangeRect()
        this.queryString = this.getAtUser() || ''
        this.showDialog = true
      } else {
        this.showDialog = false
      }
    },

新建一个组件，编辑弹窗选项 

以上就是如何通过Vue实现@人的功能的详细内容，更多关于Vue @人功能的资料请关注脚本之家其它相关文章！