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

Question

我正在寻找最佳实践 vuetify 渲染方式：

button on the right of a text-field (attached)

我好像在主页面上找不到它 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 outlined v-model="html" label="HTML" required  >
     <template #append>
       <v-btn  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>

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

Vuetify - Prepend button on the right of a text-field input

css

vue.js

vue-component

vuejs2

vuetify.js

你们有关于如何做到这一点的任何提示吗？