纸纹不火

Question

我将此代码作为自定义元素：

<link rel="import" href="../paper-ripple/paper-ripple.html">

<polymer-element name="menu-item">

<template>
    <style>
        :host {
            box-sizing: border-box;
            position: absolute;
            font-size: 16px;
            width:100%;
        }


.center{
   text-align: center;
}
    </style>

        <div class="item">
            <div class="content center" fit>
                <content select="*"></content>
            </div>
            <paper-ripple fit></paper-ripple>
        </div>


</template>

<script>

    Polymer({

    });

</script>

实例化如下：<menu-item><a href="{{url('#/')}}">Home</a></menu-item>

问题是，涟漪会触发而 link 不会。或者 link 触发但波纹不触发。

我应该怎么做？

谢谢， g3

Answer 1

我能够通过更改您的代码来创建元素以在元素周围使用锚标记来使其工作，如下所示：

<a href="{{url('#/')}}"><menu-item>site</menu-item></a>

从 content 元素中删除 select="*"，并给 :host 样式一些高度。我把我的设为 height: 32px;

Answer 2

我认为基本问题是你的结构方式，锚标记和纸波纹是兄弟姐妹，所以点击事件无法从波纹上升到锚点，反之亦然反之亦然。

一种方法是在您的元素中放置锚标记并使用数据绑定，如下所示：

<div class="item">
  <a href="{{url}}">
    <div class="content center" fit>
      {{text}}
    </div>
    <paper-ripple fit></paper-ripple>
   </a>
 </div>

...

<menu-item url="{{url('#/')}}" text="Home"></menu-item>

完整演示在这里：

http://jsbin.com/bumiva/3/edit

另一种方法是使用您的原始结构并在外部 <div> 添加点击侦听器并手动跟随 link，如下所示：

http://jsbin.com/wadiwu/2/edit

希望对您有所帮助。

纸纹不火

Paper ripple does not fire

javascript

web-component

polymer