Vue实现PC端@功能

https://segmentfault.com/a/1190000005797788

思路：

1、当想要@某人时，获取@所在的位置。让@用户选项框设为可见，并把选项框放到@的位置。
2、选择选项框里的某个人，并把选中的内容填入到输入框内容里面
3、提交数据给后台时，提取@的某人的信息给后台。

操作

1、先上html代码

<div class="dialog-input">
<el-input v-focus type="textarea" id="inputText" contenteditable="true" v-model="fabuText"></el-input>//输入框
// @选项框
<div id="selectuser" class="selectbox" style="display:none;">
<ul id="selectlist">
<li class="li" v-for="item in friendList" :key="item.userId">{{ item.nickName }}</li>
</ul>
</div>
// 暂存输入框内容的片段，借此寻找@的位置
<div id="pre_text"><el-input type="textarea" v-model="fabuText" ></el-input></div>
</div>

1、将选项框定位到@光标处，选择选项框里的某个人，并把选中的内容填入到输入框内容里面
我的@功能是通过点击图标实现，所以给图标绑定一个点击事件

 AtSomebody (){
var textapp = document.getElementById('inputText')
this.fabuText = this.fabuText + '@'
this.cursor = textapp.selectionStart;//获取光标所在输入框内的位置，出来看看就知道了
pre_text.innerHTML = textapp.value.substring(0,this.cursor);//注意这个id为pre_text的元素要与你的输入框宽度高度字的大小一致，并把它绝对定位到页面的左上角。把输入框内容复制给它
pre_text.innerHTML += '<span id="proxy" style="display:inline-block; width: 100px;"></span>';//加上一个span标签是为了下面获取span标签的位置
var span = document.getElementById('proxy');
var spanX = span.getBoundingClientRect().left + 30
var spanY = span.getBoundingClientRect().top + 120;//这里的spanx，spany的位置其实就是@符号在相对输入框的位置，后面加上30和120是我的输入框相对页面左上角的距离。两者距离相加就是@所在的位置
//console.log('spanx',spanX,spanY)
selectuser.style.left = spanX + 'px';
selectuser.style.top = spanY + 'px';
selectuser.style.display = 'block';//让选项框设置为可见
var li = document.getElementsByClassName("li")
const that = this
for (let i = 0; i < li.length; i++) { //循环找出你选择的人
li[i].onclick = function () {
that.fabuText = that.fabuText + this.innerHTML + 'xa0' //在选择的label后面加一个空格，方便下面找出你@了谁
textapp.focus()
selectuser.style.display = 'none';//让选项框不可见
}
}
},

2、提取@的人

handleMsg() {
var arrAt = this.fabuText.match(/@{1}([u4e00-u9fa5]|w)+s{1}/g); 以@开头空格结尾的选出来放进数组
// console.log(arrAt)
if(arrAt) {
var at = []
for (var i = 0; i < arrAt.length; i++) {
var username = arrAt[i].replace('@', '').trim();//取@开头空格结尾的中间的文本，也就是@的那个人的昵称
//onsole.log(username.length)
const that = this
at.push(
that.friendList.filter(function (obj) {
if(obj.nickName == username) {
that.tellGuyer.push(obj.userId) //取出与下拉框里面相等的信息，我这里是userId，就好了
}
return obj.nickName == username
})
)
}
// console.log(this.tellGuyer)
}
},

最后

以上就是优美蓝天为你收集整理的Vue实现PC端@功能的全部内容，希望文章能够帮你解决Vue实现PC端@功能所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。