vue.js - $vuetify.goTo 在 v-dialog 全屏模式下不起作用

Question

我一直在尝试使用 vuetify1.5 将返回到顶部按钮放在 v-dialog 中，并且我使用了以下 vuetify 的内置方法 $vuetify.goTo(0) 但它似乎不知道我是如何解决的这个问题 。

或者使用 vuetify 在 v-dialog 全屏中放置返回顶部按钮的任何其他替代方式。

例如 ：-

<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            color="primary"
            dark
            v-bind="attrs"
            v-on="on"
          >
            Open Dialog
          </v-btn>
        </template>
        <v-card>
         
          <v-toolbar dark color="primary">
            <v-btn icon dark @click="dialog = false">
              <v-icon>mdi-close</v-icon>
            </v-btn>
            <v-toolbar-title>Settings</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-toolbar-items>
              <v-btn dark text @click="dialog = false">Save</v-btn>
            </v-toolbar-items>
          </v-toolbar>
          <v-list three-line subheader>
            <v-subheader>User Controls</v-subheader>
            <v-list-item>
              <v-list-item-content>
                <v-list-item-title>Content filtering</v-list-item-title>
                <v-list-item-subtitle>Set the content filtering level to restrict apps that can be downloaded</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>
                <v-list-item-title>Password</v-list-item-title>
                <v-list-item-subtitle>Require password for purchase or use password to restrict purchase</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </v-list>
          <v-divider></v-divider>
          <v-list three-line subheader>
            <v-subheader>General</v-subheader>
            <v-list-item>
              <v-list-item-action>
                <v-checkbox v-model="notifications"></v-checkbox>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title>Notifications</v-list-item-title>
                <v-list-item-subtitle>Notify me about updates to apps or games that I downloaded</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-action>
                <v-checkbox v-model="sound"></v-checkbox>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title>Sound</v-list-item-title>
                <v-list-item-subtitle>Auto-update apps at any time. Data charges may apply</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-action>
                <v-checkbox v-model="widgets"></v-checkbox>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title>Auto-add widgets</v-list-item-title>
                <v-list-item-subtitle>Automatically add home screen widgets</v-list-item-subtitle>
              </v-list-item-content>
              
            </v-list-item>
          </v-list>
           <v-btn
            fab
            dark
            fixed
            bottom
            right
            color="primary"
            @click="$vuetify.goTo(0)"
          >
            <v-icon>keyboard_arrow_up</v-icon>
          </v-btn>
        </v-card>
      </v-dialog>
    </v-row>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      dialog: false,
      notifications: false,
      sound: true,
      widgets: false,
    }
  },
})

Answer 1

要实现它，您可以使用scrollIntoView()在模式中的顶部元素上滚动。

Vuetify不适用于浏览器内的事件。它为构建应用程序提供了组件。

new Vue({
  el: "#app",
  methods: {
    scrollToTop: function() {
      document
    .getElementById("container")
    .scrollIntoView({ behavior: "smooth" });
    }
  }
})

#app {
  height: 850px;
}

.container {
  height: 800px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="container" id="container">
    This is a long div
  </div>
  <button @click="scrollToTop()">
  scroll Top
  </button>
</div>