javascript - noUIslider 在 web component-polymer 3(litelement) 中不起作用

Question

我想知道如何在像 Polymer 3/LitElement 这样的 Web 组件中实现 noUiSlider，我尝试了下面的代码，但出现了错误，因为 nouislider.create is not function 并且服务器结束了响应为 “text/css”的非 JavaScript MIME 类型。

import { LitElement, html } from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';
import * as  noUiSlider  from 'https://unpkg.com/nouislider/distribute/nouislider.min.js'
export class Filters extends LitElement { 
  constructor() {
    super();
   this.slider();
  }

  slider(){
    var range = document.getElementById('range');

    noUiSlider.create(range, {
        start: [ 20, 80 ], // Handle start position
        step: 10, // Slider moves in increments of '10'
        margin: 20, // Handles must be more than '20' apart
        connect: true, // Display a colored bar between the handles
        direction: 'rtl', // Put '0' at the bottom of the slider
        orientation: 'vertical', // Orient the slider vertically
        behaviour: 'tap-drag', // Move handle on tap, bar is draggable
        range: { // Slider can select '0' to '100'
            'min': 0,
            'max': 100
        },
        pips: { // Show a scale with the slider
            mode: 'steps',
            density: 2
        }
    });

    var valueInput = document.getElementById('value-input'),
    valueSpan = document.getElementById('value-span');

    // When the slider value changes, update the input and span
    range.noUiSlider.on('update', function( values, handle ) {
        if ( handle ) {
            valueInput.value = values[handle];
        } else {
            valueSpan.innerHTML = values[handle];
        }
    });

    // When the input changes, set the slider value
    valueInput.addEventListener('change', function(){
        range.noUiSlider.set([null, this.value]);
    });
  }
  render() {
    return html` 
     <div id="range"></div>   
    
    `;

Answer 1

由于 HTML 的渲染时间，抛出错误。所以你可以使用如下;* 同时检查如何在影子 dom 中引用元素 this.shadowRoot.getElementById('range') 而不是 document.getElementById

DEMO

import { LitElement, html } from '@polymer/lit-element'; 
import {afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
import * as  noUiSlider  from 'https://unpkg.com/nouislider/distribute/nouislider.min.js'

class MyFilters extends LitElement { 

  constructor() {
    super();
     afterNextRender(this, ()=>{ 
          this.slider();
    })
  }

  slider(){

     var range = this.shadowRoot.getElementById('range');

     noUiSlider.create(range, {
        start: [ 20, 80 ], // Handle start position
        step: 10, // Slider moves in increments of '10'
        margin: 20, // Handles must be more than '20' apart
        connect: true, // Display a colored bar between the handles
        direction: 'rtl', // Put '0' at the bottom of the slider
        orientation: 'vertical', // Orient the slider vertically
        behaviour: 'tap-drag', // Move handle on tap, bar is draggable
        range: { // Slider can select '0' to '100'
            'min': 0,
            'max': 100
        },
        pips: { // Show a scale with the slider
            mode: 'steps',
            density: 2
        }
    });

    var valueInput = this.shadowRoot.getElementById('value-input'),
    valueSpan = this.shadowRoot.getElementById('value-span');

    // When the slider value changes, update the input and span
    range.noUiSlider.on('update', function( values, handle ) {
        if ( handle ) {
            valueInput.value = values[handle];
        } else {
            valueSpan.innerHTML = values[handle];
        }
    });

    // When the input changes, set the slider value
    valueInput.addEventListener('change', function(){
        range.noUiSlider.set([null, this.value]);
    });
  }

  render() {
    return html` 
     <div id="range">
     <span id="value-span"></span>
     <input id="value-input"/>  
     </div> 
    `;
  }
}
customElements.define('my-filters', MyFilters);