使用聚合物获取标签值

taking values of tags using polymer

本文关键字：标签 获取 聚合物      更新时间：2023-09-26

我正试图使用聚合物组件创建一个小网络，但我面临一个问题，我希望当我点击一个<span>，它的内容搁浅在输入上，但我不知道如何做到这一点。

最好的方法是什么?

公平警告:我是一个聚合物初学者自己:)

我不确定我是否完全理解了你的问题。让我看看。

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

(我倾向于使用designer，因为它有助于所有布局的东西)。

<!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>
相关文章：