$vuetify.goTo不会在v-card组件中滚动
$vuetify.goTo不会在v-card组件中滚动
提问于 2020-07-29 02:12:36
我有一个带有V卡的部件。我在卡片标题区域放置了一个简单的按钮。当我单击时，我看到该方法被触发，它显示在控制台中。但是，这张牌从来不会滚动。如果我输入了错误的类名，我会得到一个错误，所以goTo看起来会做一些事情，因为它找不到这个类。没有打字错误，没有错误，但卡片主体永远不会滚动。
<v-btn
x-small
class="ma-0 ml-6"
color="red"
dark
dense
@click="gotoSelectedVendor()"
>
GoTo
</v-btn>..。
gotoSelectedVendor() {
// eslint-disable-next-line no-console
console.log("gotoSelectedVendor");
this.$vuetify.goTo(".selectedRow");
},$vuetify.goTo只能滚动页面吗？它不滚动div的内容吗？
回答 2
Stack Overflow用户
发布于 2020-07-29 18:23:18
从goto服务中，goTo函数接受两个参数，即VuetifyGoToTarget和GoToOptions。
GoToOptions包含container属性，该属性在默认情况下设置为document.scrollingElement。
所以你可以这样做：
gotoSelectedVendor() {
this.$vuetify.goTo(".selectedRow", { container: ".yourCard" });
}你也可以使用refs来代替类选择器：
gotoSelectedVendor() {
this.$vuetify.goTo(this.$refs.selectedRow, { container: this.$refs.card });
}示例here。
Stack Overflow用户
发布于 2020-09-12 06:34:32
我发现goTo是一个有点反复无常的函数。特别是关于容器的规格。直到我检查了放置scroll事件的浏览器控制台，也就是在div.v-card__text上，它才能正常工作。然后它的工作方式如下所示。即使您在对话框中使用此函数，此函数现在也可以使用。并且不要忘记在v-card元件上设置ref="myCard"。
gotoSelectedVendor() {
let wrapper = this.$refs['myCard'].$el.querySelector('div.v-card__text')
this.$vuetify.goTo('.selectedRow', { container: wrapper })
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63140352
复制相关文章
相似问题
腾讯云开发者
