this.$vuetify.goTo(0)不工作在vuetify的v导航抽屉内

Question

这是我的代码：

<template>
   ....
   <v-navigation-drawer app absolute width="340" permanent>

    ....
     <v-btn fab dark fixed bottom left color="primary" @click="$vuetify.goTo(0)">
        <v-icon>keyboard_arrow_up</v-icon>
     </v-btn>
    ...
   <v-navigation-drawer>

<template>

当我单击代码中所示的按钮时，它应该滚动到抽屉的顶部。但事实并非如此有人能帮我吗？

Answer 1

您需要应用container，这是用于滚动的options之一。如果你不提供这个，vuetify将不知道把它放在您的导航抽屉。

在你的导航抽屉里添加一个参考资料：

<v-navigation-drawer app absolute width="340" permanent ref="myNavDrawer">

您可以在脚本中分配元素，以便我们可以在goTo中引用它

mounted() {
  this.navDrawerContent = 
   this.$refs['myNavDrawer'].$el.querySelector('div.v-navigation-drawer__content');
}

然后在按钮中，像刚才那样传递0，但是添加container

<v-btn ... @click="$vuetify.goTo(0, { container: navDrawerContent } )">

A CODEPEN 供您参考。