聚合物芯-纽扣链接答案

【问题标题】：Polymer core-button link聚合物芯-纽扣链接
【发布时间】：2014-07-08 05:51:07
【问题描述】：

这似乎是一个非常愚蠢的问题，但是如何将按钮链接到网页？

我尝试了以下方法

<paper-button raisedButton class="colored" iconSrc="http://g.twimg.com/Twitter_logo_white.png"><a href="http://twitter.com/username" target="_blank">follow</a></paper-button>


<paper-button raisedButton class="colored" iconSrc="http://g.twimg.com/Twitter_logo_white.png" link="http://twitter.com/username">follow</paper-button>

【问题讨论】：

标签： polymer

【解决方案1】：

这可能有点过头了，但确实是 Polymer-ey。你可以使用：

<paper-button 
    raisedButton 
    class="colored" 
    iconSrc="http://g.twimg.com/Twitter_logo_white.png" 
    label="Follow"
    link="http://twitter.com/username"
    on-tap="{{goLink}}"></paper-button>

然后在你的脚本中有：

Polymer('element-name', {
    goLink: function(e) {
        window.location.href = e.target.getAttribute('link');
    }
});

那么您的所有按钮都可以使用相同的 link="WHATEVER" on-tap="{{goLink}}" 属性。

【讨论】：

“在你的脚本中”是什么意思？
抱歉回复晚了。我的意思是在定义元素的
赞成，但现在有一个更简单的解决方案（请查看下方）。

【解决方案2】：

在我使用的 Polymer 版本 (1.2) 中，您可以简单地这样做：

<a href="http://google.com"><paper-button raised>Account</paper-button></a>

我认为这种简单性已从 Polymer 1.0 开始提供。

【讨论】：

【解决方案3】：

onclick 呢？

<paper-button raisedButton label="test" onclick="javascript:alert('f')"></paper-button>

【讨论】：

Javascript 在 Polymer 元素中几乎不工作。不适合我，最后一个 Polymer 版本。

【解决方案4】：

我通过以下方式解决了这个问题：

<paper-button raisedButton class="colored" iconSrc="iconurl" onclick="window.open('url','_blank');">label text</paper-button>

【讨论】：

【解决方案5】：

简单地说：

<a href="/#login">
    <paper-button raised>Login</paper-button>
</a>

【讨论】：

@Rexford 它适用于 Polymer 的现代版本

【解决方案6】：

实现搜索按钮的问题相同，这就是我所做的：

<dom-module id="app-search">
  <paper-button>
    <a href$="[[getSearchUrl(query)]]">Search</a>
  </paper-button>

  Polymer({
    is: 'app-search',
    getSearchUrl: function(query) {
      return '/search/' + query;
    }
  });
  </dom-module>
});

（使用 Polymer 1.0.6）

【讨论】：

【解决方案7】：

当我尝试时，我添加 onclick="window.location.href='your_url' 就可以了

这是一个例子：

 <paper-icon-button icon="arrow-back" onclick="window.location.href='/personal'">

只需更改您想要的网址！

【讨论】：