我目前正在使用 vuetify 1.5.16，当我使用 npm 升级到 2.0 时。
该应用程序将不再工作。您可以从下面找到代码，它是一个基本的抽屉内容工具栏布局，现在无法呈现。我查看了官方文档，没有找到任何升级指南或弃用警告。
new Vue({
el: '#app',
data: () => ({
drawer: {
// sets the open status of the drawer
open: true,
// sets if the drawer is shown above (false) or below (true) the toolbar
clipped: false,
// sets if the drawer is CSS positioned as 'fixed'
fixed: false,
// sets if the drawer remains visible all the time (true) or not (false)
permanent: true,
// sets the drawer to the mini variant, showing only icons, of itself (true)
// or showing the full drawer (false)
mini: true
},
toolbar: {
//
fixed: true,
// sets if the toolbar contents is leaving space for drawer (false) or not (true)
clippedLeft: false
},
footer: {
// sets the CSS position of the footer
fixed: true,
// sets if the footer is full width (true) or gives space to the drawer (false)
clippedLeft: true
}
}),
props: {
source: String
},
methods: {
// changes the drawer to permanent
makeDrawerPermanent () {
this.drawer.permanent = true
// set the clipped state of the drawer and toolbar
this.drawer.clipped = false
this.toolbar.clippedLeft = false
},
// toggles the drawer variant (mini/full)
toggleMiniDrawer () {
this.drawer.mini = !this.drawer.mini
},
// toggles the drawer type (permanent vs temporary) or shows/hides the drawer
toggleDrawer () {
if (this.drawer.permanent) {
this.drawer.permanent = !this.drawer.permanent
// set the clipped state of the drawer and toolbar
this.drawer.clipped = true
this.toolbar.clippedLeft = true
} else {
// normal drawer
this.drawer.open = !this.drawer.open
}
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire" dark>
<v-navigation-drawer
:clipped="drawer.clipped"
:fixed="drawer.fixed"
:permanent="drawer.permanent"
:mini-variant="drawer.mini"
v-model="drawer.open"
app
>
<v-list>
<v-list-tile
v-if="!drawer.permanent"
@click="makeDrawerPermanent">
<v-list-tile-action><v-icon>chevron_right</v-icon></v-list-tile-action>
<v-list-tile-content><v-list-tile-title>Static Drawer</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="toggleMiniDrawer">
<v-list-tile-action><v-icon>aspect_ratio</v-icon></v-list-tile-action>
<v-list-tile-content><v-list-tile-title>Mini Drawer</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-divider></v-divider>
<v-list-tile @click="">
<v-list-tile-action><v-icon>dashboard</v-icon></v-list-tile-action>
<v-list-tile-content><v-list-tile-title>Dashboard</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar
app
:fixed="toolbar.fixed"
:clipped-left="toolbar.clippedLeft"
>
<v-toolbar-side-icon
@click.stop="toggleDrawer"
></v-toolbar-side-icon>
<v-toolbar-title>Vuetify Drawer Example</v-toolbar-title>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
<v-layout justify-center align-center>
<v-flex shrink>
<h2>Vuetify Drawer example</h2>
<p>Showing how to set the navigation drawer into different positions and styles</p>
<p>This took me a hour to comprehend properly, so this pen may save others some time</p>
<p>As always, if you can do it better, then please fork it and let me know</p>
<v-tooltip right>
<v-btn
icon
large
:href="source"
target="_blank"
slot="activator"
>
<v-icon large>code</v-icon>
</v-btn>
<span>Source</span>
</v-tooltip>
</v-flex>
</v-layout>
</v-container>
</v-content>
<v-footer app :fixed="footer.fixed" :clipped-left="footer.clippedLeft">
<span class="caption mx-3">© 2018, MIT LICENSE - Free to use and learn from</span>
</v-footer>
</v-app>
</div>