将多个图标附加到 Vuetify.js 中的输入答案

【问题标题】：Appending multiple icons to inputs in Vuetify.js将多个图标附加到 Vuetify.js 中的输入
【发布时间】：2018-11-13 21:25:40
【问题描述】：

我知道如何使用append-icon 属性在输入末尾附加一个图标，如下所示：

new Vue({
  el: '#app'
})

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.3.8/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.3.8/dist/vuetify.min.js"></script>

<div id="app">
  <v-text-field
            label="Answer (optional)"
            append-icon="fas fa-times"
            @click:append="$emit('remove-answer')"
    ></v-text-field>
</div>

但是有没有办法像在 Bootstrap 中那样附加多个图标或按钮？

我想添加一些具有不同操作的图标，但到目前为止我还没有找到解决方案...

【问题讨论】：

标签： vue.js input append vuetify.js

【解决方案1】：

您可以使用插槽append 或append-outer，您可以在其中添加任何您想要的内容。

v-text-field label="Answer (optional)">
  <template slot="append">
    <v-icon>clear</v-icon>
    <v-icon>search</v-icon>
  </template>
</v-text-field>

Codepen

【讨论】：

太棒了！正是我想要的。感谢您的快速回答！
只是好奇。你怎么知道v-text-field 有一个append 槽？当我查看API here 时，它似乎只有一个label 插槽。
@Psidom 我在社区中比较活跃，所以我知道很多插槽没有记录，因为开发人员非常忙；）
知道了。这也是我的猜测。很荣幸看到社区有人在这里发帖：-

【解决方案2】：

想要在文本字段中添加单个图标的人

只需添加 append-icon 属性

<v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
></v-text-field>

想要添加多个图标的人

在文本字段中添加模板标签

<template slot="append">
    <v-icon>mdi-find</v-icon>
    <v-icon>mdi-key</v-icon>
   
  </template>

【讨论】：