如何在 Polymer 2.0 中更改自定义元素的属性？

Question

我正在尝试将 paper-tabs 自定义元素添加到我的 Polymer 2.0 应用中。

我在更改元素的属性时遇到问题。我想选择第一个选项卡，所以我尝试使用 this property

但是当我添加 "static get properties" 脚本时，该元素就从页面上消失了。

我做错了什么？

代码

   <paper-tabs selected="{{selected}}">
      <paper-tab>tab1</paper-tab>
      <paper-tab>tab2</paper-tab>
      <paper-tab>tab3</paper-tab>
    </paper-tabs>

    <iron-pages selected="{{selected}}">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </iron-pages>

    class MyTabs extends Polymer.Element {
      static get is() { return 'my-tabs'; },

      static get properties() {
        return {
          selected: {
            value: 0,
          }, 
        },
      },
    }

Answer 1

我不知道你的问题在哪里可以创建。

但是你必须删除静态属性块之后的逗号，在 return 块之后和你选择的属性需要有一个 "type" 属性你都不见了。

下面是我创建的有效测试元素：

<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">

<dom-module id="os-test">
    <template>
        <paper-tabs id="tabs" selected="{{tabSelected}}">
            <paper-tab>Tab 1</paper-tab>
            <paper-tab>Tab 2</paper-tab>
            <paper-tab>Tab 3</paper-tab>
        </paper-tabs>

        <iron-pages selected="{{tabSelected}}">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </iron-pages>
    </template>
    <script>
        class OsTestElement extends Polymer.Element {
            static get is() {
                return 'os-test';
            }

            static get properties() {
                return {
                    tabSelected: {
                        type: Number,
                        value: 0,
                        observer: "log"
                    }
                }
            }

            log(tabID) {
                console.log("selected tab : " + tabID);
            }
        }
        window.customElements.define(OsTestElement.is, OsTestElement);
    </script>
</dom-module>

每次单击选项卡时，所选属性都会发生变化。您可以检查控制台以查看所选的选项卡。

如果这对您没有帮助，您能否添加更多详细信息。

谢谢

如何在 Polymer 2.0 中更改自定义元素的属性？

How to change the properties of a custom element in Polymer 2.0?

javascript

polymer

custom-element

polymer-2.x

代码