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

debugcn 发表于 Dev

让我想想吧

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

我收到以下错误消息。

控制台错误

render-status.html:54
Uncaught TypeError: ProgressBar.SemiCircle 不是
HTMLElement.animateCircle (progress-bar.html:108)的构造函数
。(progress-bar.html:85)
at callMethod (render-status.html:51)
at runQueue (render-status.html:42)
at render-status.html:29

这是我试图包装在 Polymer 元素中的以下代码的有效 JSFiddle。

源代码/进度条.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>

源代码/进度条-js.html

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

托尼19

该问题是由您的ProgressBar类与ProgressBar由progressbar.js. 重命名您的类（例如， to MyProgressBar）将解决您看到的错误。

作为旁注，animateCircle()用于document.getElementById(containerId)获取容器元素，但该方法无法查询元素的 shadow 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

演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。