Question

我知道如何使用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中那样附加多个图标或按钮？

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

Answer 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

Answer 2

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

只需添加 append-icon 属性

def num_primorial(n):
prime_count = 1
product = 2
i = 3
while prime_count < n:
    is_prime = True
    for j in range(3, i, 2):
        if i % j == 0:
            is_prime = False
            break
    if is_prime:
        product *= i
        prime_count += 1
    i+=2
return product

想要添加多个图标的人

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

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

在Vuetify.js中为输入添加多个图标

2 个答案: