如何解决$ 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。