$ vuetify.goTo在全屏v对话中不起作用

问题描述

我一直在尝试使用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,}
  },})

解决方法

要实现此目的，您可以使用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>