时间戳

首页 > 解决方案 > 扩展 Polymer 3 中的纸张输入

javascript - 扩展 Polymer 3 中的纸张输入

问题描述

我正在尝试从 Polymer 3 扩展纸张输入组件，就像文档说的那样，但我不能。 https://polymer-library.polymer-project.org/3.0/docs/devguide/dom-template#inherit

在下一个示例中，您可以尝试使用该代码段。问题是纸张输入的导入没有 PaperInputElement 导出，所以我无法导入。你必须在这里看到：https ://unpkg.com/@polymer/polymer/polymer-element.js?module

你可以帮帮我吗？

<script type='module'>
  import 'https://unpkg.com/@polymer/paper-input@3.0.1/paper-input.js?module';
    import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';

  class DmInput extends PaperInputElement {
      static get template() {
          return html`
              <style>

              </style>
              <p>hi</p>
              <p>${super.template}</p>
              `;
      }
  }

  window.customElements.define('dm-input', DmInput);


</script>
<dm-input></dm-input>

标签： javascriptpolymercomponentsextendspolymer-3.x

解决方案

我相信您在这里尝试导入错误的文件，Paper-input 只是一个使用 PaperInputBehavior 的 ui 组件。在这种情况下，尝试用行为替换 PaperInputElement，因为输入元素使用的所有函数、属性和事件都来自它。

  class DmInput extends PaperInputBehavior {
      static get template() {
          return html`
              <style>

              </style>
              <p>hi</p>
              <p>${super.template}</p>
              `;
      }
  }

推荐阅读