javascript - polymer 2 : Handle clicks on PaperCard header

Question

我有一个自定义元素，其中包含 <paper-card> 元素。我想监听该元素标题的点击，即 <div class="header">元素。

我当前的解决方案如下所示

<paper-card heading="[[title]]" on-tap="onCardClick">
    ...
</paper-card>

onCardClick(e){
    if( e.path[0].classList.contains('header') || e.path[0].classList.contains('title-text') ){
        // Header was clicked
    }
}

但感觉很老套。

有更好的方法吗？

Answer 1

我建议将标题元素分开

<paper-card>
  <div class="header" on-click="onCardClick">
    <div class="title-text">[[title]]</div>
  </div>
</paper-card>

使用原始 CSS:

.header {
  position: relative;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  overflow: hidden;
}

.title-text {
  padding: 16px;
  font-size: 24px;
  font-weight: 400;
  color: var(--paper-card-header-color, #000);
}

它与使用 heading 属性的效果完全相同，但更灵活。