element的slider滑块多游标联动效果

1,238 阅读1分钟

今天在根据原型图做页面时遇到的这个需求:

image.png

但是!Element的slider组件目前暂时还不能支持此功能(网上的案例也找了一部分但是都有bug)

本来斗打算放弃了,改为多条slider来实现,无意间通过调试模式发现通过去除.el-slider__runway的高度 可以将多条el-slider挤压到一起(手动狗头)

效果图: image.png

ok 现在样式问题解决了,接着搞

多级联动交互这个久比较好楞了

直接附上主要代码

 rangeChange(val, alram) {
      if (alram === 1) {
        this.form.blue = val;
        this.form.yellow = [val[1], this.form.yellow[1]];
      } else if (alram === 2) {
        this.form.yellow = val;
        this.form.orange = [val[1], this.form.orange[1]];
        this.form.blue = [this.form.blue[0], val[0]];
      } else if (alram === 3) {
        this.form.orange = val;
        this.form.red = [val[1], this.form.red[1]];
        this.form.yellow = [this.form.yellow[0], val[0]];
      } else {
        this.form.red = val;
        this.form.orange = [this.form.orange[0], val[0]];
      }
    }

长舒一口气,收拾收拾下班