vue.js - Vuetify：如何将头像或图标添加到导航抽屉的底部

Question

我正在尝试使用 Vuetify 创建一个侧边栏，其中顶部会有一些常用操作，而用户头像将在底部。

我正在使用v-navigation-drawer，到目前为止我已经想出了这个：

<template>
    <v-navigation-drawer 
        app 
        permanent
        mini-variant="true"
        class="cyan lighten-3"
    >
        <v-list>
            <!-- Timeline action -->
            <v-list-tile> 
                <v-list-tile-action>
                    <v-btn
                        flat
                        exact
                        icon 
                        color="white"
                    >     
                        <v-icon>timeline</v-icon>
                    </v-btn>              
                </v-list-tile-action>
            </v-list-tile>
            <!-- Sms action -->
            <v-list-tile> 
                <v-list-tile-action>
                    <v-btn
                        flat
                        exact
                        icon 
                        color="white"
                    >     
                        <v-icon>sms</v-icon>
                    </v-btn>              
                </v-list-tile-action>
            </v-list-tile>
            <!-- Calendar action -->
            <v-list-tile> 
                <v-list-tile-action>
                    <v-btn
                        flat
                        exact
                        icon 
                        color="white"
                    >     
                        <v-icon>calendar_today</v-icon>
                    </v-btn>              
                </v-list-tile-action>
            </v-list-tile>
            <!-- Settings Action -->
            <v-list-tile> 
                <v-list-tile-action>
                    <v-btn
                        flat
                        exact
                        icon
                        color="white"
                    >     
                        <v-icon>settings</v-icon>
                    </v-btn>              
                </v-list-tile-action>
            </v-list-tile>
        </v-list>
        <v-divider></v-divider>
        <!--This should be the avatar but I used a btn for demo purposes-->
        <v-btn
            flat
            exact
            icon
            bottom
            color="red"
        >     
            <v-icon>timeline</v-icon>
        </v-btn>              

    </v-navigation-drawer>
</template>
<!-- <script> and <style> follow after this-->

因此，您可以在我v-list使用 av-divider并将图标（或头像）放置在下面之后看到。

问题是我无法将它一直移动到v-navigation-drawer. 我尝试使用v-flex周围v-list和最终v-btn但无济于事。

我在这里想念什么？

标签： vue.jsflexboxvuetify.js

Answer 1

您可以在导航抽屉组件中使用插槽，如下所示：

<template v-slot:append>
    <div class="pa-2">
       <v-btn block>Logout</v-btn>
    </div>
 </template>