滚动到 v-expansion-panel 开口答案

【问题标题】：Scrolling to v-expansion-panel opening滚动到 v-expansion-panel 开口
【发布时间】：2020-01-22 01:44:31
【问题描述】：

我正在尝试使用v-expansion-panels 构建一个移动小型应用程序来显示一个列表。这个想法是，当用户在此类列表中添加新项目时，它将打开新面板并向下滚动到此类新面板。

我在 $vuetify 变量中找到了 goTo() 方法，不幸的是 v-expansion-panels 转换（“打开”）需要一些时间，并且由于滚动条高度的变化， goTo() 不会完全向下滚动.

所以根据我的理解，我需要检测转换的结束（enter/afterEnter 挂钩）。根据 vuetifyjs 文档，我希望在我的组件上有一个“过渡”属性。（无论如何都不是这样）。但是这样的属性只是一个字符串，所以我不能挂钩。

我的另一个想法是，以某种方式找到过渡组件并挂钩。不幸的是，我无法理解 el/vnode 并且 vuejs 构建的方式是像 vue-devtool 秀一样的树，我无法获得过渡组件。调试时（在enter hook callback of the transition 中），就像组件/el/vnode 有父级但不是任何人的子级。

有没有办法做我正在寻找的东西？

这是我目前所做的一个 jsfiddler：https://jsfiddle.net/kdgn80sb/

基本上就是我在Vue中定义的方法：

  methods: {
    newAlarm: function() {
      const newAlarmPanelIndex =  this.alarms.length - 1;

      this.alarms.push({title: "New line"});
      this.activePanelIndex = newAlarmPanelIndex;

      // TODO:
      this.$vuetify.goTo(this.$refs.alarmPanels[newAlarmPanelIndex]);
    }
  }

【问题讨论】：

既然展开面板的“打开”有固定的持续时间 - 为什么不直接添加一个 setTimeout() 然后向下滚动？
我是那种正在寻找一种可以跟踪事件的解决方案的程序员，所以我从来没有想过使用这种简单的解决方案......我想我不会找到那种我期待的解决方案，所以我肯定会使用你的解决方案！谢谢！
我想有时它只是评估努力（时间）和结果。如果 setTimeout() 方法有任何问题，请密切注意并对其进行大量测试。如果出现问题，您可以稍后再返回到事件挂钩，但最好继续进行，而不是被困在您有替代工作版本的东西上；至少我的意见。

标签： vuejs2 vuetify.js

【解决方案1】：

首先您应该手动打开面板，然后使用 goTo 超时。它对我有用，只需花一些时间打开面板即可。

<v-expansion-panels v-model="alarmPanels">
   <v-expansion-panel>
      <div id="example" />
   </v-expansion-panel>
</v-expansion-panels> 


this.alarmPanels.push(0); // Use index of expansion-panel
setTimeout(() => {
    this.$vuetify.goTo(`#${resultId}`);
}, 500);

【讨论】：