Question

我试图在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="you@email.com">
          <template slot="append">
            <v-btn>Hellloooo!!!</v-btn>
          </template>
        </v-text-field>
      </v-layout>
    </v-container>
  </v-app>
</div>

Answer 1

您可以使用append-outer插槽：

<v-text-field solo placeholder="you@email.com">
    <template slot="append-outer">
        <v-btn>Hellloooo!!!</v-btn>
    </template>
</v-text-field>

检查广告位标签以查看所有选项：https://vuetifyjs.com/en/components/text-fields/#api

如何使用Vuetify文字栏位插槽？

1 个答案: