Slider: add mousedown event

ElemeFE · Aug 30, 2021 · ffb78ee · ffb78ee
1 parent f71afe0
commit ffb78ee
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 1 deletion.
diff --git a/examples/docs/en-US/slider.md b/examples/docs/en-US/slider.md
@@ -236,6 +236,6 @@ Selecting a range of values is supported.
 ## Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
+| mousedown | triggers when the user clicks the slider (if the mouse is being dragged, this event only fires when the mouse button is pressed) | value before changing |
 | change | triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released) | value after changing |
 | input | triggers when the data changes (It'll be emitted in real time during sliding) | value after changing |
-
diff --git a/examples/docs/es/slider.md b/examples/docs/es/slider.md
@@ -238,6 +238,7 @@ Se soporta la selección de un rango de valores.
 ## Eventos
 | Nombre | Descripción                              | Parámetros     |
 | ------ | ---------------------------------------- | ------------------------ |
+| mousedown | triggers when the user clicks the slider (if the mouse is being dragged, this event only fires when the mouse button is pressed) | value before changing |
 | change | se dispara cuando el valor cambia (si el ratón está comenzando el arrastre este evento sólo se disparara cuando se suelte el ratón) | valor después del cambio |
 | input | Se dispara cuando los datos cambian (funciona en tiempo real) | valor después del cambio |
 
diff --git a/examples/docs/fr-FR/slider.md b/examples/docs/fr-FR/slider.md
@@ -236,5 +236,6 @@ Vous pouvez sélectionner des intervalles de valeurs au lieu d'une valeur unique
 
 | Nom | Description | Paramètres |
 |---------- |-------- |---------- |
+| mousedown | triggers when the user clicks the slider (if the mouse is being dragged, this event only fires when the mouse button is pressed) | value before changing |
 | change | Se déclenche quand la valeur change (si le changement est fait à la souris, se déclenche quand la souris redevient immobile). | La nouvelle valeur. |
 | input | triggers when the data changes (It'll be emitted in real time during sliding) | value after changing |
diff --git a/examples/docs/zh-CN/slider.md b/examples/docs/zh-CN/slider.md
@@ -233,5 +233,6 @@
 ### Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
+| mousedown | 点击或开始拖动滑块时触发 | 改变前的值 |
 | change | 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发） | 改变后的值 |
 | input | 数据改变时触发（使用鼠标拖曳时，活动过程实时触发） | 改变后的值 |
diff --git a/packages/slider/src/main.vue b/packages/slider/src/main.vue
@@ -27,6 +27,7 @@
       :class="{ 'show-input': showInput, 'disabled': sliderDisabled }"
       :style="runwayStyle"
       @click="onSliderClick"
+      @mousedown="emitMouseDown"
       ref="slider">
       <div
         class="el-slider__bar"
@@ -297,6 +298,10 @@
         });
       },
 
+      emitMouseDown() {
+        this.$emit('mousedown', this.value);
+      },
+
       getStopStyle(position) {
         return this.vertical ? { 'bottom': position + '%' } : { 'left': position + '%' };
       }