javascript - 在vuetify中使用datepicker创建可扩展的应用栏(creating an expandable app bar with datepicker in vuetify)

Question

I am trying to create an expandable app bar in Vuetify, which shows a datepicker within the app bar when the app bar is expanded.

(我正在尝试在Vuetify中创建一个可扩展的应用程序栏，当该应用程序栏展开时，该栏会在应用程序栏中显示一个日期选择器。)

When the app bar is expanded, the datepicker is shown as an overlay instead of expanding the app bar.

(展开应用程序栏时，日期选择器将显示为覆盖图，而不是展开应用程序栏。)

How do I make the app bar expand to contain the datepicker instead of showing the datepicker on top of the app bar.

(如何使应用程序栏扩展为包含日期选择器，而不是在应用程序栏顶部显示日期选择器。)

I have created a codepen as an example: https://codepen.io/thomasabcd/pen/eYmOoVQ

(我创建了一个Codepen作为示例： https ://codepen.io/thomasabcd/pen/eYmOoVQ)

<div id="app">
  <v-app id="inspire">
    <div>
      <v-app-bar dark>

        <v-toolbar-title>Page title</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon @click="extended=!extended">
          <v-icon>mdi-calendar</v-icon>
        </v-btn>

        <template v-slot:extension v-if="extended">
          <v-date-picker full-width />
        </template>
      </v-app-bar>
    </div>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data(){
    return{
      extended: false
    }
  }
})

  ask by ThomasD translate from so

Answer 1

等待大神答复