Question

我试图从聚合物纸张输入控制webcomponent的属性值。

我能够通过两次纸张输入绑定来更改值，但无法控制属性值

我创建了以下示例并尝试将resizable-panels属性更改为vertical

 <resizable-panels [[text]]>

到

 <resizable-panels vertical>

使用纸张输入

Codepen代码供参考 https://codepen.io/nagasai/pen/QMjjQw

HTML：

  <head>
  <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="resizable-panels/resizable-panels.html">
  <link rel="import" href="paper-input/paper-input.html" 
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
<style>
.panel { padding: 20px; color: white; font-family: sans-serif; width: 50%; }
      .p1 { background-color: #673AB7; }
      .p2 { background-color: #E91E63; }
      .p3 { background-color: #00BCD4; }
      .p4 { background-color: #FB8C00; }
      .p5 { background-color: #607D8B; }
      .p6 { background-color: #4CAF50; }
</style>
   <paper-input value="{{text::input}}"></paper-input>   
  <resizable-panels id="rp-2">
      <div class="panel p1">Lorem ipsum dolor…</div>
      <div class="panel p2">Second panel</div>
    </resizable-panels>
      <br>
         <resizable-panels [[text]]>
      <div class="panel p1">Lorem ipsum dolor…</div>
      <div class="panel p1">Second panel</div>
      <div class="panel p1">Third panel</div>
    </resizable-panels>
    </template>
  </dom-module>
</body>

JS：

  class XFoo extends Polymer.Element {
    static get is() { return 'x-foo'; }

    static get properties() {
      return {};

    }
       toggle() {
  this.$.collapse.toggle();
}

  }
  customElements.define(XFoo.is, XFoo);

Answer 1

这不是它应该如何工作，你不能只是打一个标签，并期望这个工作 - 因为这不是服务器端构建 - 你不应该像这样对待你的模板。

这是一个有效的演示：https://codepen.io/anon/pen/rzOgQX

您应该在true / false之间切换布尔属性vertical以达到您想要的效果。希望这会有所帮助。

Polymer2.0 - 尝试通过绑定纸张输入值

1 个答案: