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属性具有完全相同的效果，但更灵活。

聚合物2：处理PaperCard标题的点击

1 个答案: