怎样通过Vue实现@人的功能

本篇文章为大家展示了怎样通过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实现@人的功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注行业资讯频道。