Question

我正在尝试使用Polymer 2.0将the progressbar.js library包装在ES6 Web组件中。

我收到以下错误消息。

console.error

渲染status.html：54
未捕获的TypeError：ProgressBar.SemiCircle不是构造函数
在HTMLElement.animateCircle（progress-bar.html：108）
在HTMLElement。（进度-一个bar.html：85）
在callMethod（render-status.html：51）
在runQueue（render-status.html：42）
在render-status.html：29

以下代码的

Here is a working JSFiddle我试图在Polymer元素中包装。

SRC /进步，一个bar.html

<link rel="import" href = "../bower_components/polymer/polymer-element.html">
<link rel="import" href = "shared-styles.html">
<link rel="import" href = "progressbar-js.html">

<dom-module id="progress-bar">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10 px;
      }
      p {
        font - size: 200 % ;
        font - family: Roboto, Open Sans, sans - serif;
      }
      .label {
        color: #6FD57F !important;
        font-size: 300%;
        font-family: Roboto, Open Sans, sans-serif;
      }
      #container {
        width: 200 px;
        height: 100 px;
      }
    </style>

    <div class="card">
      <div class="circle">1</div>
      <div id="container"></div>
      [[animatePercentage]]
      <p>1,234 steps</p>
    </div>
  </template>

  <script>
    class ProgressBar extends Polymer.Element {
      static get is() {
        return 'progress-bar';
      }

      static get properties() {
        return {
          animatePercentage: {
            type: Number,
            notify: true,
            value: 0.7,
          },
        }
      }

      constructor() {
        super();
      }

      ready() {
        super.ready();
        Polymer.RenderStatus.afterNextRender(this, function() {
          //...
        });
      }

      connectedCallback() {
        super.connectedCallback();
        this.animateCircle('container', this.animatePercentage);
      }

      animateCircle(containerId, animatePercentage) {
        var startColor = '#FC5B3F';
        var endColor = '#6FD57F';

        var element = document.getElementById(containerId);
        var circle = new ProgressBar.SemiCircle(element, {
          color: startColor,
          trailColor: '#eee',
          trailWidth: 5,
          duration: 2000,
          easing: 'bounce',
          strokeWidth: 5,
          text: {
            value: (animatePercentage * 100) + '%',
            className: 'label'
          },
          // Set default step function for all animate calls
          step: function(state, circle) {
            circle.path.setAttribute('stroke', state.color);
          }
        });

        circle.animate(animatePercentage, {
          from: {
            color: startColor
          },
          to: {
            color: endColor
          }
        });
      }

    }

    window.customElements.define(ProgressBar.is, ProgressBar);
  </script>
</dom-module>

SRC /进度-js.html

<script src="../bower_components/progressbar.js/dist/progressbar.min.js" charset="utf-8"></script>

Answer 1

此问题是由ProgressBar课程与ProgressBar添加的progressbar.js符号之间的名称冲突引起的。重命名您的课程（例如，改为MyProgressBar）可以解决您所看到的错误。

作为旁注，animateCircle()使用document.getElementById(containerId)来获取容器元素，但该方法无法查询元素所在的元素的影子DOM。您可以使用此聚合物简写来轻松解决此问题：this.$[containerId]。

// var element = document.getElementById(containerId); // DON'T DO THIS
var element = this.$[containerId]; // DO THIS
var element = this.shadowRoot.getElementById(containerId); // OR DO THIS

demo

Polymer 2.x：在ES6 Web组件中包装外部JS库

1 个答案: