Element UI中防止赋值触发el-slider的input事件-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element UI中防止赋值触发el-slider的input事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

我封装了一个滑动条组件，重写了一个滑动条
使用el-slider封装组件时，发现初始化赋值时总会触发el-slider的input事件。

     <el-slider
        class="my-slider"
        v-model="mySliderValue"
        :show-tooltip="false"
        :min="preferences.min"
        :max="preferences.max"
        :step="preferences.step"
        :vertical="preferences.vertical"
        :height="(this.preferences.style.height / 5) * 4 - 20 + `px`"
        @input="sliderValueInput()"
        @change="sliderValueSave"
        :style="elSliderWidth"
      ></el-slider>

猜测有可能是el-slider封装时，v-model导致的（详情）
具体原因不太清楚

具体问题

目前我试验的效果是，但凡v-model的值发生改变，就会触发input事件
我需要实现这样一个方法：滑块在被代码赋值的情况下不能触发input效果，在鼠标拖拉的情况下触发input效果。

解决方法

1、用html的原生滑块

<input
        type="range"
        class="my-slider"
        v-model="mySliderValue"
        :min="preferences.min"
        :max="preferences.max"
         @input="sliderValueInput()"
         :style="elSliderWidth"
         
      />

这种情况下初始化赋值时不会触发input事件，正好满足要求。
既然原生属性满足要求，按理来说使用将原生属性绑定到el-slider组件上就能完美解决这个问题。
正好Vue的官网（详情）提到了.native可以满足这个要求
于是我将@input="sliderValueInput()"换成@input.native="sliderValueInput()"
好家伙，input事件完全失效了，拖拉滑动条都不会触发了。。。。。。
官网提到了.native失效的原因，我翻了一下el-slider的源码，有点想下手改源码，
咱太菜了，还是算了吧。。。。

聪明的我立马把el-slider组件的滑块换成了原生input组件的滑块，
但是这样的话功能是实现了，我的滑动条样式基本上全部要重写，滑动条横竖切换的功能也要自己重新实现，
烦人啊啊啊啊啊啊啊

2、迂回的办法，通过监听鼠标点击滑块和鼠标松开滑块，间接监听到滑动条的拖拉

使用mousedown事件监听鼠标点击事件

  <el-slider
        class="my-slider"
        v-model="mySliderValue"
        :show-tooltip="false"
        :min="preferences.min"
        :max="preferences.max"
        :step="preferences.step"
        :vertical="preferences.vertical"
        :height="(this.preferences.style.height / 5) * 4 - 20 + `px`"
        @input="sliderValueInput()"
        @mousedown.native="handleMouseDown"
        @change="sliderValueSave"
        :style="elSliderWidth"
      ></el-slider>

在鼠标监听事件里监听抬起事件

 //鼠标点击事件
    handleMouseDown() {
      // debugger
       console.log("鼠标点击滑块事件");
      this.mouseDown = true;
      window.onmouseup = () => {
         console.log("鼠标抬起滑块事件");
        this.mouseDown = false;
        window.onmouseup = null;
      };
    },
    // 在滑块拖动之后
    sliderValueInput() {
      if (this.mouseDown) {
      。。。。
      }
    },