vue文本输入框怎么写,vue 输入提示
本文主要介绍如何使用Vue实现输入框@功能。文章中的样例代码讲解的很详细，对我们学习Vue很有帮助。有兴趣的可以学习一下。
目录
前言成员列表创建使用输入框获取光标的坐标，保存光标插入文本的运行结果汇总。
前言
前面的文章分别介绍了如何实现聊天输入框的双向绑定，发送回车键，粘贴文字和图片等。为了改进输入框，本文重点介绍了如何实现聊天框的@功能。
文章评论：
Vue实现contenteditable元素双向绑定的方法详解
Vue实现了进入输入框发送粘贴文字和图片的功能。
首先，你需要理清思路：
成员列表组件需要根据光标的位置进行调整。点击成员项时，回调成员信息，获取光标位置坐标(x值，y值)。当输入框不在焦点上时，记录光标。成员列表回调时，将成员信息插入光标位置。在此之前，需要恢复之前的光标，将光标移动到新的位置。既然有了想法，就可以一步一步去实现。
成员列表
创建
实现成员列表的方法相对简单。其实就是一个列表，简单的v-for循环就可以完成。单击时，当前选定的成员项将被回调到父组件。
添加新的AtPop.vue文件：
模板
at-pop-index
div v-for=(item，index)in list data :key= index class= at-pop-item @ click . stop= click item(item) { { item . name } }/div
/div
/模板
脚本
导出默认值{
道具：{
//传入需要@的成员数组
列表数据：{
类型：数组，
默认值：()=[]
}
},
方法：{
单击项目(项目){
这个。$emit(onSelect ，item)；//调用父组件的方法处理成员选择，返回当前选择。
}
}
}
/脚本
使用
在父组件中，注册并使用成员列表组件。我们需要在用户输入@时弹出成员列表，所以需要监控用户的输入，然后在用户选择成员后关闭。关键是获取光标位置，这个位置是由输入框获取的，只需要在父组件中使用。
//核心代码
.
//选择成员时插入数据，关闭弹出窗口
onSelect(项目){
console.log(onSelect ，item)；
这个。$ refs . inputbox . insert content(` $ { item . name } `)；//有空格
this.isShowAt=false
},
//输入框输入时回调函数。
inputFunc(数据，事件){
console.log(inputFunc ，data，event)；
if (event.data===@) {
this.isShowAt=true//显示弹出窗口
这个。$nextTick(()={
设DOM=document . getelementsbyclassname( at-pop-index )[0]；//获取成员列表弹出窗口，需要放在nextTick中
//设置位置
DOM . style . position= fixed ；
DOM . style . left=math . floor(data . left 10) px ；
DOM . style . top=math . floor(data . top) px ；
DOM . style . zindex=9999；
})
}否则{
this.isShowAt=false
}
},
.
输入框
输入框是这个函数的核心，需要处理光标位置的获取，并将值插入光标位置。
当输入框被聚焦时，我们会看到光标闪烁。如果我们想得到光标位置以便插入数据，我们需要选择对象的帮助。选择指示用户选择的文本范围或插入数据的当前位置。由于获得了选择范围，所以当前选择范围的索引=0是当前光标位置。我们想要达到的效果是成员列表随光标移动，所以需要获取光标的坐标值。
获取光标的坐标
let range=window.getSelection()。getRangeAt(0)；//获取当前光标
let position=range . getboundingclientrect()；//获取当前光标的位置
getBoundingClient()方法返回一个包含矩形区域坐标值的DOMRect矩形对象。获得的坐标值被回调到父组件，并显示成员列表。
当我们在输入框中输入@时，页面上会出现成员列表，此时输入框仍然是焦点。但是，如果我们单击成员列表中的一个条目，输入框此时会失去焦点，尽管我们可以获得所选的成员并插入它。如果只是简单的字符串加法，在下一次输入时光标会默认定位在开头；或者我们需要在中间插入选中的成员，就会发现没有地方可以插入。因此，我们需要在失焦时保存当前光标，在插入时恢复光标。
保存光标
//DivEditable.vue
//焦点不在
inputBlur(事件){
this . selection=this . save selection()；
这个。$emit(blurFunc ，event)；
},
//焦点不在时保存光标
saveSelection() {
如果(！window.getSelection) {
返回null
}
let sel=window . get selection()；
if(sel . getrangeat sel . range count){
return sel . getrangeat(0)；
}
},
游标是临时存储的，所以我们需要把插入的成员封装成一个方法，这个方法可以调用到父组件，这样父组件在获得成员信息后就可以直接调用了。接下来，您需要使用上面保存的光标位置：
插入文本
//DivEditable.vue
//恢复光标
恢复重新选择(范围){
if(范围){
let sel=window . get selection()；
sel . removeallranges()；
sel.addRange(范围)；
}
},
//插入数据
插入内容(值){
//这个。$ refs . editor . focus()；
让范围，节点；
this . restore selection(this . selection)；//恢复失去焦点前的光标位置
range=window.getSelection()。getRangeAt(0)；
range . collapse(false)；//光标移动到末尾
node=range . createcontextualfragment(value)；
let child=node . last child；
console.log(lastChild ，child)；
range.insertNode(节点)；
//在当前插入的元素后面设置光标的起始位置
if(子级){
range.setEndAfter(子级)；
range . setstartafter(child)；
}
let sel=window . get selection()；
sel . removeallranges()；
sel.addRange(范围)；
这个。$emit(input ，this。$ refs . editor . innerhtml)；
},
其实这里已经基本实现了@功能，但是还有一个问题。当输入框失焦时，父组件的blurFunc方法被回调，导致成员列表被关闭，但数据还没有获取。处理这类问题有两种方法：
使用setTimeout设置计时器，推迟关闭成员列表的操作，将检索逻辑修改为异步操作，等到获得数据后再关闭成员列表。很简单，使用setTimeout。
//InputBox.vue
模糊函数(事件){
//焦点不在时，延迟关闭弹出窗口，以免还没有得到数据。
如果(this.isShowAt) {
setTimeout(()={
this.isShowAt=false
}, 500);
}
},
运行结果
在输入框中输入@,在光标位置附近弹出成员列表。
选择成员后，将成员信息插入输入框。
总结
介绍了输入框@功能的实现方法，简单易用。
主要利用选择和范围对象的相关方法，完成光标处理和输入插入。
本文实现的@函数不能整体删除。目前有两种思路：把@xxx转换成图片，插入输入框。作者简单的写了一个demo来验证，但是效率不高，会出现卡顿；另一种方式是监听退格键，在删除时判断被删除的对象是否包含在有意义的@xxx中。如果是，则整体删除，如果不是，则默认删除。这个方法作者没有尝试过，比较难。
至此，输入框的功能基本完善。需要看到可移动项目地址的完整代码。
以上是Vue的输入框@函数的样例代码的详细内容。更多关于Vue的输入框@功能，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。