$vuetify.goTo 不会在 v-card 组件中滚动 [英] $vuetify.goTo won't scroll within a v-card component

问题描述

我有一个带有 v 卡的组件.我在卡片标题区域放置了一个简单的按钮.当我单击时，我看到该方法被触发，它显示在控制台中.但是，卡从不滚动.如果我打错了类名，我会收到一个错误，所以 goTo 似乎在做一些事情，因为它没有找到类.没有错别字，没有错误，但卡片正文永远不会滚动.

I have a component with a v-card. I placed a simple button into the card title area. When I click I see that the method fires, it shows in the console. But, the card never scrolls. If I typo the class name, I get an error so the goTo appears to do something as it does not find the class. Without the typo, no error but the card body never scrolls.

<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 的内容吗?

Does $vuetify.goTo only work to scroll the page? Does it not scroll the contents of a div?

推荐答案

来自 goto 服务，goTo 函数有两个参数，分别是 VuetifyGoToTarget 和 GoToOptions.

From the goto service, the goTo function take 2 arguments which are VuetifyGoToTarget and GoToOptions.

并且 GoToOptions 包含默认设置为 document.scrollingElement 的 container 属性.

And the GoToOptions contains the container property which is set to document.scrollingElement by default.

因此您可以执行以下操作:

So you can do something like:

gotoSelectedVendor() {
  this.$vuetify.goTo(".selectedRow", { container: ".yourCard" });
}

您也可以使用 refs 代替类选择器:

You can also use refs instead of class selector:

gotoSelectedVendor() {
  this.$vuetify.goTo(this.$refs.selectedRow, { container: this.$refs.card });
}

示例此处.

这篇关于$vuetify.goTo 不会在 v-card 组件中滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！