Question

我正在尝试使用聚合物组件创建一个小型网站，但我遇到了一个问题，我希望当我点击一个<span>时，其内容被搁置在一个输入上，但我不知道这该怎么做。

最好的方法是什么？

Answer 1

公平警告：我自己是聚合物初学者：）

我不确定我是否100％正确地理解你的问题......但是让我们看看。

我创建了一个元素，将标签上的内容复制到输入....

（我倾向于使用设计师，因为它有助于所有布局的东西）。

<!doctype html>
<html>
<head>

  <script src="/components/platform/platform.js"></script>
  <style>
    body {
      font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
      margin: 0;
    }
  </style>

    <link rel="import" href="/components/polymer/polymer.html">
    <link rel="import" href="/components/core-input/core-input.html">
    <link rel="import" href="/components/core-item/core-item.html">
    <link rel="import" href="/components/core-icons/core-icons.html">

  <script>
  </script>

</head>

<body fullbleed unresolved>

<my-element>
</my-element>

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #core_card {
        position: absolute;
        width: 300px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        left: 130px;
        top: 80px;
        background-color: rgb(255, 255, 255);
      }
      .core_input {
        padding: 15px;
      }
    </style>
    <core-card id="core_card" layout vertical>
      <core-input id="input" placeholder="Type something..." class="core_input"></core-input>
      <core-item on-tap="{{onTap}}" label="Click me!!" icon="settings" size="24" id="core_item" horizontal center layout>
      </core-item>
      <core-item on-tap="{{onTap}}" label="Or Me ?" icon="settings" size="24" id="core_item" horizontal center layout>
      </core-item>
      <core-item on-tap="{{onTap}}" label="[clear]" icon="settings" size="24" id="core_item" horizontal center layout>
      </core-item>
    </core-card>
  </template>

  <script>
    Polymer('my-element', {
      onTap: function(event,detail,sender) {
        var i = this.$.input;           // get hold of the input element via its id 
        if(sender.label == '[clear]')
            i.value = '';
            else        
            i.value = sender.label;
      },
    });
  </script>
</polymer-element>

</body>

</html>

使用聚合物获取标签值

1 个答案: