Question

我正在尝试修改Polymer教程，而我在刷新元素方面遇到了麻烦。

在我的聚合物元素中，我声明了最喜欢的布尔值来检查我是否点击了图标：

<script>
  Polymer({
  publish: {
    favorite: {
      value: false,
      reflect: true
    }
  },
  loveTapped: function(event, detail, sender) {
    alert('loveTapped');
    this.favorite = !this.favorite;
    this.refresh;
  }
});
</script>

以下是我的图标代码：

<core-icon-button
  id="icon_love"
  icon="favorite"
  on-tap="{{loveTapped}}">
</core-icon-button>

按照我的风格，如果＆＃34;最喜欢的＆＃34;的值，我填写图标。是的：

:host([favorite]) #icon_love {
  fill: #da4336;
}

我已经检查过我是否触发了该事件（使用我的警报（＆＃39; loveTapped＆＃39;）;）就是这样，但图标没有刷新。我尝试添加一个＆＃34; this.refresh;＆＃34;但没有成功

有人知道为什么图标没有刷新以及我能做些什么吗？

提前致谢，

编辑：似乎我的问题是核心图标按钮无法处理填充属性。但核心图标可以这样我只需在核心图标中更改我的核心图标按钮就可以了。

Answer 1

试试这个：

<script>
  Polymer({
  publish: {
    favorite: {
      value: false,
      reflect: true
    }
  },
  loveTapped: function(event, detail, sender) {
    alert('loveTapped');
    this.favorite = !this.favorite;
    this.refresh();
  }
});
</script>

Answer 2

使用CSS color属性而不是fill：

:host([favorite]) #icon_love {
  color: #da4336;
}

这里是working jsbin。

为什么这样做？

core-icon将CSS fill: currentColor;应用于自身。这会将SVG fill设置为CSS color属性的值。由于color通过Shadow DOM级联，因此将其应用于外部core-icon-button就足够了。

使用点击事件刷新图标

2 个答案: