需求：鼠标左键后左右移动后实现对值的修改

开篇：

        用户在指定位置鼠标左键按下后移动鼠标，根据用户的移动距离来对input中的数据进行+-的操作，当鼠标松开后结束计算。

HTML部分：

<template>
  <div class="new-text-input">
    <v-row class="text-input-row">
      <!--当用户鼠标按下后开始计算移动距离-->
      <v-col
        tabindex="0"
        class="text-input-prepend"
        @[prependDraggable?`mousedown`:null]="onPrependMouseDown"
      >
        <v-icon size="18"></v-icon>
      </v-col>

      <v-col class="text-input-content">
      </v-col>

      <v-col class="text-input-append">
      </v-col>
    </v-row>
  </div>
</template>

js部分关键

// 记录上一次鼠标移动时的x坐标
let prevClientX = 0;
// 记录按下鼠标左键时input的初始值
let currentValue = 0;

// 鼠标按下事件
const onPrependMouseDown = event => {
  currentValue = +inputRef.value.value;
  prevClientX = event.clientX;
  document.addEventListener('mouseup', onDocumentMouseUp);
  document.addEventListener('mousemove', onDocumentMouseMove);
};

//鼠标抬起触发
const onDocumentMouseUp = () => {
  isFirstFocus = false;
  document.removeEventListener('mouseup', onDocumentMouseUp);
  document.removeEventListener('mousemove', onDocumentMouseMove);
};

// 鼠标移动时，计算这个距离
const onDocumentMouseMove = event => {
  currentValue += event.clientX - prevClientX;
  prevClientX = event.clientX;
  const value = sanitizeValue(currentValue);
  emits('valueChange', value);
}

// 在测试的时发现，如果用户左移太快，mousemove事件触发会跟不上，导致左移动无法到0（会留一点），这个函数就可以处理这个问题
const sanitizeValue = value => {
  value = Math.max(props.min, Math.min(+value, props.max));
  inputRef.value.value = value;
  return Math.round(value);
};