Question

我正在使用Vuetify扩展面板，并且每次用户单击标题时都想做些事情。

我的问题是，头项周围有一定的边距。因此，一旦单击边距，事件就不会触发。我尝试将click事件放在父项上，但没有成功。是否可以在不重写vuetify样式的情况下实现这种点击侦听器？

以下CSS可以解决问题，但对我来说似乎有点肮脏。（作用域无效）

.v-expansion-panel__header {
  padding: 0px;
}
.v-expansion-panel__header div {
  padding: 12px 24px;
  width: 100%;
  height: 100%;
}
.v-expansion-panel__header .header__icon {
  display: none;
}

https://codepen.io/anon/pen/wxmpyy?&editors=101

Answer 1

我认为您的CSS解决方案将是相当不错的。

有一个基于JavaScript的解决方案，我认为它比CSS脏得多。

new Vue({
    el: '#app',
    methods: {
        doSomething (e) {
            let $target = $(e.target), $header = $('.v-expansion-panel__header');
            if ($target.is($header) || $target.parents($header).is($header)) {
              alert('Hello World')
            }
        }
    }
})

全笔：https://codepen.io/WisdomSky/pen/EpEqjr?editors=1010

Answer 2

您可以观看面板索引并对其执行操作。

请检查有关类似问题的其他答案。

https://stackoverflow.com/a/51253018/617395

Answer 3

我刚刚发布了针对此问题的解决方案here。

要点：

<v-expansion-panel @click="onExpansionPanelClick">
...
</v-expansion-panel>

onExpansionPanelClick(event) {
  if(event.target.classList.contains('v-expansion-panel-header--active')) {
    console.log("Panel is closing/now closed.")
  } else {
    console.log("Panel is opening/now open.")
  }
}

Vuetify展开点击事件

3 个答案: