el-Slider 范围滑块 在input中修改值时无法同步到滑块

473 阅读1分钟

可以在组件绑定一个key,在input的[change事件]中更改key的值

        <el-slider v-model="priceValue" bar-height="14px" 
            range :min="100"style="overflow-x: hidden;" 
            :max="999999"  @input="selectPrice" :key="componentKey">
        </el-slider>
                        
        <div class="num flexJA flexSb">
            <div class="btn">
                <input @blur="onBlur" @change="manualChange()" v-model="priceValue[0]"
                        placeholder="" placeholder-class="input-placeholder class="text" />
            </div>
            <div class="btn">
                    <input @blur="onBlur" @change="manualChange()" v-model="priceValue[1]"
                        placeholder="" placeholder-class="input-placeholder class="text" />
            </div>
        </div>                

js方法更加简单啦,更新这个绑定的key就可以。

manualChange(){
    this.componentKey+=1;
 },
  • van-slider 也可以同理使用哦!-
  • priceValue 是滑块的范围是一个数组!