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

本文采用vue，同时增加鼠标点击事件和一些页面小优化
【如何通过Vue实现@人的功能】
文章图片

文章图片

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

.content {font-family: sans-serif; h1{text-align: center; }}.editor {margin: 0 auto; width: 600px; height: 150px; background: #fff; border: 1px solid blue; border-radius: 5px; text-align: left; padding: 10px; overflow: auto; line-height: 30px; &:focus {outline: none; }}

如果添加了点击事件，节点和光标位置获取，需要在【键盘抬起事件】中获取，并保存到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}},

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

.wrapper {width: 238px; border: 1px solid #e4e7ed; border-radius: 4px; background-color: #fff; box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); box-sizing: border-box; padding: 6px 0; }.empty{font-size: 14px; padding: 0 20px; color: #999; }.item {font-size: 14px; padding: 0 20px; line-height: 34px; cursor: pointer; color: #606266; &.active {background: #f5f7fa; color: blue; .id {color: blue; }}&:first-child {border-radius: 5px 5px 0 0; }&:last-child {border-radius: 0 0 5px 5px; }.id {font-size: 12px; color: rgb(83, 81, 81); }}

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