Javascript 将输入文本转换为按钮

我一直在尝试复制此功能：

以及：

我正在使用JS和Vue构建我的web应用程序。我真的很感激任何关于如何继续我所造成的混乱的建议。到目前为止，我已经设法在可编辑的

div

末尾添加了一个按钮元素，但这不是我正在寻找的解决方案，我也无法找到更好的方法来复制我以前的示例

这个想法是通过按下另一个按钮而不是打字来添加相同类型的气泡按钮。气泡按钮的位置很重要，因为它将引用已经存在的名称数组，这些名称将由电子邮件文本体中的

nodemailer

发出

insertCandidate（区域ID）{
var txtarea=document.getElementById（areaId）；
var scrollPos=txtarea.scrollTop；
var caretPos=txtarea.selectionStart；
var btn=document.createElement（'button'）；
btn.innerText='候选名称'；
类名称='candBtn'；
btn.id=“candBtn”
btn.setAttribute（“v-on:click”、“alert（'tere'）”）；
txtarea.appendChild（btn）；
log（txtarea.innerHTML）
this.btnHidden=true
var front=（txtarea.value）.substring（0，caretPos）；
var back=（txtarea.value）.substring（txtarea.selectionEnd，txtarea.value.length）；
txtarea.value=正面+btn+背面；
caretPos=caretPos+btn.length；
txtarea.selectionStart=caretPos；
txtarea.selectionEnd=caretPos；
txtarea.focus（）；
txtarea.scrollpop=scrollPos；
},

{{rejectText}}
候选人姓名

我不太确定您想要什么，但我尝试一下：

newvue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据：{
孤岛加载：false，
项目：[]，
型号：空，
搜索：空，
},
方法：{
闭合芯片（项目）{
this.model=this.model.filter（e=>e！==item.symbol）
}
},
观察：{
模型（val）{
如果（val！=null）this.tab=0
否则，this.tab=null
},
搜索（val）{
//项目已加载
如果（this.items.length>0）返回
this.isLoading=true
//延迟加载输入项
取（'https://api.coinmarketcap.com/v2/listings/')
.then（res=>res.json（））
。然后（res=>{
this.items=res.data
})
.catch（错误=>{
console.log（错误）
})
.最后（（）=>（this.isLoading=false））
},
}
})

搜索你的最爱
加密货币
mdi硬币
{{item.name.charAt（0）}
mdi硬币

你应该试试这个，我已经检查过了，仍然不是我想要的全部功能，或者我只是无法在我的情况下使用它。vue标记输入模块创建了一个不同的输入字段，其中只能使用标记，但是，我需要在常规输入字段上使用标记。为什么不使用此选项：？？那么，您想在单击按钮（或其他项目）时插入一个新按钮？