Vuetify - 文本字段输入右侧的前置按钮

Question

我正在寻找使用 Vuetify 在文本字段右侧呈现按钮的最佳实践（已附）

我似乎无法在主 site 上找到它。

<v-row class="text-center d-flex justify-center" v-if="downloadOption == 'HTML'">
    <v-text-field dense outlined v-model="imageLink" label="Image Link" required></v-text-field>

    <v-btn large class="ma-1" outlined color="indigo"> Copy </v-btn>

    <v-text-field dense outlined v-model="html" label="HTML" required></v-text-field>

    <v-btn large class="ma-1" outlined color="indigo"> Copy </v-btn>
</v-row>

你对如何做到这一点有什么建议吗？

Answer 1

尝试在 v-text-field 组件中使用 append 插槽：

 <v-text-field dense v-model="html" label="HTML" required  >
     <template #append>
       <v-btn class="mb-1" outlined color="indigo"> Copy </v-btn>
     </template>             
 </v-text-field>

Answer 2

尝试这个:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

.v-btn {
  height: 39px !important;
}

<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-row>
          <v-col cols="8" sm="6" class="pr-1">
            <v-text-field dense outlined v-model="html" label="HTML" required></v-text-field>
          </v-col>
          <v-col cols="4" sm="6" class="pl-0">
            <v-btn large outlined color="indigo"> Copy </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>