0

我有一个非常简单的元素来包装一个<input type="range">元素。来自 Polymer，我有点难以调整。我想显示范围的值。

这就是我想出的：

import { LitElement, html } from 'lit-element'

class InputRange extends LitElement {
  static get properties () {
    return {
      shownValue: {
        type: String,
        attribute: false
      }
    }
  }

  firstUpdated () {
    console.log(this.shadowRoot.querySelector('#native').value)
    this.shownValue = this.shadowRoot.querySelector('#native').value
  }

  render () {
    return html`
      <input value="10" @change=${this.updateShownValue} type="range" id="native">
      <span>VALUE: ${this.shownValue}</span>
              `
  }

  updateShownValue (e) {
    this.shownValue = e.srcElement.value
    console.log(e.srcElement.value)
    // e.srcElement.value = 80
  }
}
window.customElements.define('input-range', InputRange)

然后使用它：

    <script type="module" src="./InputRange.js"></script>
    <h2>Range</h2>
    <input-range id="input-range"></input-range>

问题：

这是正确的做法吗？lit-element 的文档清楚地说明了在更新期间，只有更改的 DOM 部分会被重新渲染。要获得此模型的性能优势，您应该将元素的模板设计为其属性的纯函数。但这是否意味着我必须 1) 设置shownValue为 fistUpdated() 2) 监听change它的事件并shownValue相应地更新？如果是这样的话，我做得对吗？或者，有没有更好的方法呢？

我有一个小故障：https ://glitch.com/~busy-sternum

4

1 回答 1

0

我只会做一些小的调整

import { LitElement, html } from 'lit-element'

class InputRange extends LitElement {
  static get properties () {
    return {
      shownValue: {
        type: String,
        attribute: false
      }
    }
  }

  constructor () {
    this.shownValue = 10;
  }

  render () {
    return html`
      <input value="${this.shownValue}" @change=${this.updateShownValue} type="range" id="native">
      <span>VALUE: ${this.shownValue}</span>
              `
  }

  updateShownValue (e) {
    this.shownValue = e.srcElement.value
    console.log(e.srcElement.value)
  }

  anotherFunction () {
      this.shownValue = 80;
  }
}
window.customElements.define('input-range', InputRange)
于 2019-09-17T18:46:52.947 回答