input滑块突然拉满的问题

aqhby
2025-09-02 / 0 评论 / 10 阅读 / 正在检测是否收录...

问题

开发中有一个这样的布局

<div class="set-slider-container">
  <div class="icon-wrapper" @click="handleMinus('rapid-release')">
    <svg width="40" height="40" viewBox="0 0 40 40">
      <circle cx="20" cy="20" r="20" fill="#cccccc"/>
      <line x1="10" y1="20" x2="30" y2="20" stroke="#444444" stroke-width="6" stroke-linecap="round"/>
    </svg>
  </div>
  <input type="range" :min="10" :step="10" :max="config.maxLimit"
         v-model="axisVo.rapidRelease">
  <div class="icon-wrapper" @click="handleIncrease('rapid-release')">
    <svg width="40" height="40" viewBox="0 0 40 40">
      <circle cx="20" cy="20" r="20" fill="#cccccc"/>
      <line x1="10" y1="20" x2="30" y2="20" stroke="#444444" stroke-width="6" stroke-linecap="round"/>
      <line x1="20" y1="10" x2="20" y2="30" stroke="#444444" stroke-width="6" stroke-linecap="round"/>
    </svg>
  </div>
  <div>{{ (axisVo.rapidRelease * 0.001).toFixed(2) }} mm</div>
</div>

原因

因为 v-model="axisVo.rapidRelease" 绑定导致数据类型问题 改为

v-model.number="axisVo.rapidRelease" 即可。
详细情况待补充

0

评论 (0)

取消