如何使用 Vuetify 文本字段插槽？

Posted 2023-02-16

【中文标题】如何使用 Vuetify 文本字段插槽？

【英文标题】：How to use Vuetify text field slot?

【发布时间】：2020-08-27 18:02:32

【问题描述】：

我正在尝试在 vuetify 文本字段之外附加一个按钮，并且我正在尝试使用 append 插槽，但不知道该怎么做。如果有人可以帮助我，我一定会很感激。

请检查这个简单的demo。

或者作为替代这个演示如下：-

new Vue(
  el: "#app",
  data() 
    return ;
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout>
        <v-text-field solo placeholder="[e-mail]">
          <template slot="append">
            <v-btn>Hellloooo!!!</v-btn>
          </template>
        </v-text-field>
      </v-layout>
    </v-container>
  </v-app>
</div>

【问题讨论】：

我不确定我理解你想要什么。是否要删除文本字段外带有文本“Hellloooo”的按钮？

【参考方案1】：

你可以使用append-outer插槽：

<v-text-field solo placeholder="[e-mail]">
    <template slot="append-outer">
        <v-btn>Hellloooo!!!</v-btn>
    </template>
</v-text-field>

检查槽选项卡以查看所有选项：https://vuetifyjs.com/en/components/text-fields/#api