elementUI slider组件,带范围选择怎么实现双向绑定?
发布于 5 年前 作者 DDrsunw 5467 次浏览 最后一次编辑是 5 年前 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

项目需要实现一个滑块功能,点击滑条下方的标识文字,滑条带范围地滑到对应的上方位置,而且,可以保留拖拽滑动,如下图

3992511772-5dd944ea0f594_articlex.jpg 220463714-5dd94692957f9_articlex.jpg

实现过程中,发现绑定的参数不能双向动态绑定修改滑块的位置

然后,我试着利用提供给的input和change事件用笨办法来处理,主要思路是将滑条分3份(0-33,33-66,66-100),判断回调参数的当前位置属于哪个区间,就直接将value[0,33]或[33,66]。

问题来了:

  1. 点击一次滑条上任意位置(注意我是点击),input会执行三次,造成会将已经判断设置好的位置,被重新覆盖。(猜想,滑块设置进度值不是直接设置,而是模拟点击设置,导致input、change再次执行,执行后判断还需要设置值,又再执行input)
  2. 拖拽方面,设置了markCout参数,拖拽会计数递增,以此来判断是拖拽,还是点击;如果是拖拽,就不判断设置拖动范围了
  3. 但是因为拖拽也要实现自能在0,33,66,100间断点停留,这就造成和问题2冲突
  4. 无论是点击,还是拖拽,input 和change事件都会执行,造成保留拖拽值就不能点击指定区间

各种冲突,我这个方法貌似是不可行了

代码如下,怎么实现?希望可以给个实现思路,谢谢各位

<el-slider v-model="markInter" :range="true" :show-tooltip="false" :max="100" :marks="marks" @input="sliderInputEv" @change="sliderChangeEv"></el-slider>
marks: {
                    //标记和样式设置
                    0: '',
                    33: 'Average',
                    66: 'Above avg',
                    100: 'Hot'
                },

 methods: {
            sliderInputEv(value) {
                this.markCount ++
                if(this.markCount > 5){//判断是拖拽,还是点击,拖拽就不设置了
                    this.markCount =0
                    return
                }
                 this.markCount =0
                let min = value[0]//获取回调区间数值
                let max = value[1]
                if(min <30 || max < 30){
                    this.markInter[0] =0//重新设置范围
                    this.markInter[1] =33
                    return
                }
                if(min >33 && min <66){
                    this.markInter[0] =33
                    this.markInter[1] =66
                    return
                }
                if(min >66 && min <100){
                    this.markInter[0] =66
                    this.markInter[1] =100
                    return
                }
                if(max >33 && max <66){
                    this.markInter[0] =33
                    this.markInter[1] =66
                    return
                }
                if(max >66 && max <100){
                    this.markInter[0] =66
                    this.markInter[1] =100
                }

            }
回到顶部