进度条背景颜色设置的建议

Question

<input
   type="range"
   max="100"
   min="0"
   step="1"
   class="progress"
   @change="onProgressChange($event.target.value)"
   @input="onProgressInput($event.target.value)"
   :value="progress"
   :disabled="!bookAvailable"
   :style="{'background-size': `${progress}% 100% !important`}"
 />

我觉得这里进度条颜色更新不用写那么多，要写ref去操作dom，还要在updated钩子函数里调用方法；我是用style绑定做的，我觉得这样更简洁一点，符合vue的数据驱动尽量不去dom操作的观念，只是一个小小的建议。

Answer 1

qq_慕瓜3368726 2021-03-19 17:53:35

牛蛙  采用style绑定 确实简洁 而且还不容易出错  我就是采取了你的样式绑定 才解决了进度条颜色问题

Answer 2

慕少0288913 2020-08-15 04:22:45

学习了~

Answer 3

扬_灵 2020-07-09 08:51:14

好的，谢谢你的建议！祝你学习愉快～