Question

我有一个非常简单的元素，它包装了<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）在fistUpdated（）处设置shownValue 2）监听change事件并相应地更新shownValue吗？如果是这样，我做对了吗？还是有更好的方法呢？

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

Answer 1

我只会做一些小的调整

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)

查看litElement中元素的值

1 个答案: