Question

我尝试使用纸张对话框制作可调整大小的卡片组件我试图使用css属性“resize：both;”但是当他们的容器（纸张对话框）的大小增加时，我找不到更新内部元素和组件的方法。有没有办法捕获元素上的resize事件？当我这样做时，我应该调用/做什么来触发css更新？

谢谢！

Answer 1

使用Polymer 1.x，处理元素大小调整有相应的行为 - Polymer.IronResizableBehavior。 Here是一个很好的例子，演示了如何使用它。

Answer 2

元素没有resize事件。这是Web平台遗漏的东西。在窗口上可以有一个resize事件。

您可以做的一件事是使用鼠标事件来伪造它并知道用户何时完成了调整大小。 mouseup是知道何时完成调整大小的钩子：

<script src="http://www.polymer-project.org/webcomponents.min.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>

<polymer-element name="my-element" on-mouseup="{{resizeDone}}">
  <template>
    <style>
      :host {
        display: block;
        background: red;
        width: 150px;
        height: 150px;
        resize:both;
        overflow: auto;
      }
    </style>
    width: <span>{{width}}</span>
    height: <span>{{height}}</span>
  </template>
  <script>
    Polymer({
      attached: function() {
        this.resizeDone(null, null, this);
      },
      resizeDone: function(e, detail, sender) {
        this.width = sender.clientWidth;
        this.height = sender.clientHeight;
      }
    });
  </script>
</polymer-element>

<my-element></my-element>

聚合物中可调整大小的元素

2 个答案: