滚动到 v-expansion-panel 打开

Question

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

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

因此，根据我的理解，我需要检测转换的结束（enter/afterEnter 挂钩）。根据 vuetifyjs 文档，我希望我的组件有一个“转换”属性。（无论如何，情况并非如此）。但这样的属性只是一个字符串，所以我无法连接它。

我的另一个想法是，以某种方式找到过渡组件并连接到它。不幸的是，我无法理解 el/vnode ，并且 vuejs 构建的方式是像 vue-devtool 显示的树，并且我无法获取转换组件。调试时（在过渡的 Enter hook 回调中），就像组件/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]);
    }
  }

Answer 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);