Vuetify Search Textfield in APpbar，背景褪色，点击展开答案

【问题标题】：Vuetify Search Textfield in APpbar with faded background and expanding on clickVuetify Search Textfield in APpbar，背景褪色，点击展开
【发布时间】：2020-09-05 13:12:48
【问题描述】：

vuetify 是否可以在应用栏上添加一个褪色的文本字段，该文本字段具有褪色背景并在点击时展开。

这是我在材料 ui react 上找到的一个示例：

到目前为止，我尝试过这个，但它根本不起作用（看起来很奇怪）

    <v-app-bar :clipped-left="clipped" fixed app class="app-bar-gradient" dark>
      <v-col cols="12" sm="6">
          <v-text-field
            outlined
            label="Prepend inner"
            prepend-inner-icon="mdi-magnify"
          ></v-text-field>
      </v-col>
    </v-app>

【问题讨论】：

标签： javascript vue.js material-design vuetify.js

【解决方案1】：

<template>
<v-container>
    <v-row>
      <v-col>
        <div>
          <v-app-bar>
            <v-toolbar-title class="my-5"></v-toolbar-title>

            <v-spacer></v-spacer>

            <template v-slot:extension>
              <v-container>
                <v-row justify="end">
                  <v-col cols="3">
                    <v-text-field
                      name="name"
                      label=""
                      id="id"
                      outlined
                    ></v-text-field>
                  </v-col>
                  <v-col cols="3">
                    <v-text-field
                      name="name"
                      label=""
                      id="id"
                      outlined
                    ></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
            </template>
          </v-app-bar>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>
<style scoped>
.my-5 {
  margin-top: 3em;
}
</style>

【讨论】：