我想知道如何在像 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>
`;
最佳答案
由于 HTML 的渲染时间,抛出错误。所以你可以使用如下;
* 同时检查如何在影子 dom 中引用元素 this.shadowRoot.getElementById('range')
而不是 document.getElementById
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);
关于javascript - noUIslider 在 web component-polymer 3(litelement) 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55275958/