$vuetify.goTo 不会在 v-card 组件中滚动

Question

我有一个带有 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 的内容吗？

Answer 1

从goto服务中，该goTo函数采用 2 个参数，它们是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 });
}