Question

我是Vue和Vuetify的新手，我增加了标题/工具栏大小，现在我想让内容适应新的大小，我在toolbars section

代码看起来像这样，对默认模板没有太多修改，只是样式含义，我将height属性添加到120，增加尺寸的更好方法将不胜感激！

<template>
  <v-app class="main">
    <v-navigation-drawer
      class="side header"
      persistent
      flat
      :clipped="clipped"
      v-model="drawer"
      enable-resize-watcher
      fixed
      app
    >
      <v-list class="side">
        <v-list-tile
          value="true"
          v-for="(item, i) in items"
          :key="i"
        >
          <v-list-tile-action>
            <v-icon v-html="item.icon"></v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title v-text="item.title"></v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar
      class="header"
      app
      flat
      :prominent="prominent"
      :clipped-left="clipped"
      height=120
    >
      <v-toolbar-side-icon large @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title v-text ="title"></v-toolbar-title>
      <v-toolbar-title v-text="slogan"></v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon @click.stop="rightDrawer = !rightDrawer">
        <v-icon>menu</v-icon>
      </v-btn>
    </v-toolbar>
    <v-content>
      <router-view/>
    </v-content>
    <v-navigation-drawer
      temporary
      :right="right"
      v-model="rightDrawer"
      fixed
      app
    >
      <v-list>
        <v-list-tile @click="right = !right">
          <v-list-tile-action>
            <v-icon>compare_arrows</v-icon>
          </v-list-tile-action>
          <v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-footer height="200px">
    </v-footer>
  </v-app>
</template>

<script>
export default {
  data () {
    return {
      prominent: true,
      clipped: true,
      flat: true,
      drawer: false,
      fixed: false,
      items: [{
        icon: 'bubble_chart',
        title: 'Inspire'
      }],
      right: true,
      rightDrawer: false,
      title: 'something',
      slogan: 'something more'
    }
  },
  name: 'App'
}
</script>

Answer 1

<强>解决！

最后只需将<v-toolbar>及其内容替换为：

<v-btn icon @click.stop="drawer = !drawer">
 <v-icon>menu</v-icon>
</v-btn>

然后我们可以使用size属性。

增加v-toolbar-side-icon Vuetify组件

1 个答案: