时间戳

首页 > 解决方案 > 范围滑块 Nuxt JS

slider - 范围滑块 Nuxt JS

问题描述

所以我有一个任务，我需要基于 Nuxt 中的范围滑块构建一个计算器，当拇指移动时它会改变颜色并同时计算一些东西。我已经设法让它在一定程度上发挥作用。但是当我翻页时，它崩溃说无法读取未定义的 addEventListener。

这是代码：

  <div class="range">
<input  v-html="amount" v-model="value" type="range" class="slider" id="amount"  min="0" max="100">
    </div>
     

methods: {
colorSlider(){
const slider = document.querySelector('#amount')
let x = slider.value 
let color = 'linear-gradient(90deg, rgb(249,84,78)' + x+ '%, rgb(224,224,224)' + x +'%)'
slider.style.background=color
}
},
mounted(){
document.querySelector('#amount').addEventListener('mousemove',this.colorSlider)
}

有什么想法吗？

标签： sliderrangenuxtjs

解决方案

你不需要事件监听器——Vue 是响应式的，只需通过 v-model 将滑块绑定到数据属性就可以了。

例如：

...
<input type="range" v-model="sliderValue">
...

export default {
  data() {
    return {
      sliderValue: 0
    }
  }
}

现在，当您调整滑块时， 的值sliderValue将更新。不需要事件监听器。

要sliderValue在模板中使用有用的值——你应该使用计算属性，而不是方法。

export default {
  data() {
    return {
      sliderValue: 0
    }
  },
  computed: {
    sliderBgColor() {
      return `linear-gradient(90deg, rgb(249,84,78) ${this.sliderValue}%, rgb(224,224,224) ${this.sliderValue}%)`
    }
  }
}

现在，当您调整滑块时，它通过 v-model 绑定到 (sliderValue) 的数据属性将发生变化。计算的属性 sliderBgColor 注意到变化并自动更新它的返回值。在你的输入中使用 sliderBgColor 的返回值，你就完成了。

<input type="range" v-model="sliderValue" :style="`background: ${sliderBgColor}`"

有很多关于计算属性的信息，我建议看一下 Vue 文档。

推荐阅读