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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在Polymer 2.0中更改自定义元素的属性?相关的知识,希望对你有一定的参考价值。

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

我遇到了改变元素属性的麻烦。我想要选择第一个标签,所以我试图用this property来做

但是当我添加“静态获取属性”脚本时,该元素刚刚从页面中消失。

我究竟做错了什么?

Code

   <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,
          }, 
        },
      },
    }
答案

我不确切知道您的问题可以在哪里创建。

但是,在返回块之后,您必须在静态属性块之后删除逗号,并且您选择的属性需要具有您缺少的“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中更改自定义元素的属性?的主要内容,如果未能解决你的问题,请参考以下文章

如何在Polymer 2.0中启用Shady DOM?

如何在Polymer 2.0中的span元素上设置侦听器?

在Polymer中调用自定义元素/铁页面上的公共方法

Polymer 2.0中的factoryImplementation

polymer框架在代码中动态创建需要支持内容分发的自定义元素并挂载到文档中

与 AngularJS 相比,在 Polymer 中创建自定义 HTML5 元素/小部件的优缺点是啥