Question

我创建了一个聚合物行为，该行为应该采用选定元素的宽度并将其高度设置为＆＃34; ready＆＃34;当窗口调整大小时。我已经完成了＆＃34;获得宽度＆＃34;部分但设置高度不起作用。这是代码：

<link rel="import" href="../bower_components/polymer/polymer.html">
<script>
  SquareBehavior = {
    properties: {
      victim: Object
    },
    listeners: {
      'resize': 'squareIt' // not working
    },
    squareIt: function() {
      this.victim = this.$$('.round');
      console.log(this.victim.offsetWidth); // this works fine
      // what do I add here?
    },
    ready: function() {
      this.squareIt(); //works
    }
  };
</script>

Answer 1

您可以使用铁可调整行为。

https://github.com/polymerelements/iron-resizable-behavior

<html>
/*...*/
<link rel="import" href="../../bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
/*...*/

    Polymer({

        /*...*/

        listeners: {
            'iron-resize': "_resizeHandler"
        },

Answer 2

您可能必须声明样式属性并将reflect属性设置为true

<link rel="import" href="../bower_components/polymer/polymer.html">
<script>
  SquareBehavior = {
    properties: {
      victim: Object
      style: {
        type: String,
        reflectToAttribute: true
      }
    },
    listeners: {
      'resize': 'squareIt' // not working
    },
    squareIt: function() {
      this.victim = this.$$('.round');
      console.log(this.victim.offsetWidth); // this works fine
      // what do I add here?
      this.style = "{height: " + this.victim.offsetWidth + " }"
    },
    ready: function() {
      this.squareIt(); //works
    }
  };
</script>

如何使用Polymer设置元素的高度？

2 个答案: