如何将标签/插槽添加到输入字段 Vue

Posted 2023-02-23

【中文标题】如何将标签/插槽添加到输入字段 Vue

【英文标题】：How to add tags/slots to input field Vue

【发布时间】：2020-11-08 23:22:18

【问题描述】：

在 Vue 中，我有一个基本的输入文本字段，用户可以在其中输入内容。我想根据用户类型创建可移动插槽。我有一个按钮，用户可以在其中单击“添加插槽”，然后输入他们想要的内容。查看图片1。

我想要用户在该字段中输入的位置。无论他们输入什么，都会像第二个一样成为一个插槽 图片。

**我搜索了文档和 Vue 文档，它们的示例太复杂了。我想要一个简单的示例来显示模板 div/input + 自动完成和实际检索值的脚本。 ** 感谢您的帮助。

我希望 UI 像第二张图片

【参考方案1】：

您可以为该按钮设置一个单击侦听器，并在单击时获取用户编写的任何内容，并将其存储在某个数据结构（可能是数组）中。 然后，遍历该数组并为每个数组创建插槽。 为每个 slot 设置一个 onclick 事件，并在点击时从数组中删除索引。

<template>
<div>
    <input type="text border" v-model="text">
    <button @click="addSlot">Add Slot</button>
    <div>
       <div class="chip" v-for="(slot, idx) in slots" :key="idx">
           slot
           <i class="close material-icons" @click="removeSlot(idx)">close</i>
       </div>
  </div>
</div>
</template>

<script>
export default 
    data: () => (
        text: '',
        slots: []
    ),
    methods: 
        addSlot() 
            this.slots.push(this.text)
            this.text = ''
        ,
        removeSlot(idx) 
            this.slots.splice(idx, 1)
        ,
    

</script>

【讨论】：

先生，这不是我要问的，我想在 Vue 中执行此操作，但要像我提供的图片一样显示 UI。请再看看我的问题。谢谢

我更新了答案。添加了 removeSlot 方法和按钮。我不能帮助你的CSS。您所说的插槽称为筹码。如果您使用任何 css 库，请在此处搜索“chips”。或者看这里：：w3schools.com/howto/howto_css_contact_chips.asp

感谢您的指导，我想我该如何 v-chip 我的输入？

我没听懂你的最后一个问题。

例如这是我的输入文本字段。 Slots