VueJS，Javascript - 防止输入滑块范围小于当前值答案

【问题标题】：VueJS, Javascript - Prevent Input slider range less than current valueVueJS，Javascript - 防止输入滑块范围小于当前值
【发布时间】：2022-01-06 23:35:20
【问题描述】：

我目前需要禁止滑块滑块小于当前值

例如，如果 sliderValue 为 40，则用户不能将其滑动到小于 40 的任何值。我正在使用 v-model 进行大量计算，因此需要它的当前值、新值以及无法实现的功能滑动小于当前值的任何东西

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

实现这一点的一种方法是使用 vue 的 watch 功能。我们将“当前值”保存为数据点，并对不同的值进行 v-model。在这种情况下，我称之为sliderVal。

通过数据动态限制

如果我们观看sliderVal，我们可以评估它是否低于或高于“当前”值并做出相应的反应。

<template>
  <div class="hello">
    <label for="slider">{{ sliderVal }}</label>
    <input type="range" id="slider" v-model="sliderVal" />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      limitVal: 0,
      sliderVal: 0,
    };
  },
  watch: {
    sliderVal(val) {
      if (Number(val) < Number(this.limitVal)) {
        this.sliderVal = this.limitVal;
      }
      if (Number(val) > Number(this.limitVal)) {
        this.limitVal = val;
      }
    },
  },
};
</script>

可以在here on codeSandbox找到一个工作示例

道具限时一次

如果您想要一个版本，其中通过 prop 提供的当前值有一次性限制，我分叉了它以相应地采取行动。然后我们将currentVal 作为一个道具，它最初为拇指设置了限制，但当更高时不会改变。

<template>
  <div class="hello">
    <label for="slider">{{ sliderVal }}</label>
    <input type="range" id="slider" v-model="sliderVal" />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      sliderVal: 0,
    };
  },
  props: {
    currentVal: {
      type: Number,
      required: true,
      default: 0,
    },
  },
  watch: {
    sliderVal(val) {
      if (Number(val) < Number(this.currentVal)) {
        this.sliderVal = this.currentVal;
      }
    },
  },
  created() {
    this.sliderVal = this.currentVal;
  },
};
</script>

这里是working example

【讨论】：