dySdDesignerVue_DesignModule/src/components/SwipeInput.vue

<template>
  <el-input-number
    class="swipe-input"
    v-model="numberValue" 
    :step="step" 
    :max="max" 
    :min="min"
    :controls="false"
    :label="label"
    @change="change"
  >
  </el-input-number>
</template>
<script setup lang="ts">
import { usePointerSwipe, useVModel, isDefined, useMagicKeys } from '@vueuse/core'
import { useSlots, watch, ref, computed } from 'vue'
import { toFixed } from '@/utils/common'
// import { useMainStore } from '@/store';
// import { storeToRefs } from 'pinia';
// import { mm2px, px2mm } from '@/utils/image';
import useHandleActive from '@/hooks/useHandleActive'

const { handleInput } = useHandleActive()

const props = withDefaults(
  defineProps<{
    label?: string
    modelValue?: number
    modelEvent?: 'change' | 'input'
    step?: number
    max?: number
    min?: number
  }>(),
  {
    modelEvent: 'change',
    step: 0.01,
  },
)

const emit = defineEmits<{
  (e: 'update:modelValue', value: number | undefined): void
  (e: 'change', value: number | undefined, ev: Event): void
  (e: 'swipe', value: number | undefined, ev: Event): void
}>()

const slots = useSlots()

const numberValue = useVModel(props, 'modelValue', emit)

watch(numberValue, (value) => {
  if (!value) return
  numberValue.value = toFixed(value)
}, { immediate: true})

const change = (value: number | undefined, ev: Event) => {
  if (!value) return
  value = handleInput(value)
  emit('change', value, ev)
}

// Swipe
// const { shift, alt } = useMagicKeys()
// const labelRef = ref<HTMLElement>()
// const startValue = ref<number>()
// const { posStart, posEnd } = usePointerSwipe(labelRef, {
//   threshold: 0,
//   onSwipeStart: () => {
//     startValue.value = numberValue.value
//   },
//   onSwipe: (e) => {
//     // 检查startValue的值是否是数字，如果不是，退出函数
//     if (!isNumber(startValue.value)) return
//     // 根据props.step的值调整步长
//     let step = props.step
//     if (shift.value) step *= 10
//     if (alt.value) step /= 10
//     step = Math.max(step, 0.01)
//     // 根据鼠标拖动的距离计算新的数值
//     let value = startValue.value + Math.round(posEnd.x - posStart.x) * step
//     // 如果props.min或props.max存在，则确保新值在指定范围内
//     if (isDefined(props.min) && value < props.min) value = props.min
//     if (isDefined(props.max) && value > props.max) value = props.max
//     // 四舍五入计算的值，并将其分配给numberValue
//     value = toFixed(value)
//     numberValue.value = value
//     // 调用swipe函数并传递新值和事件对象
//     emit('swipe', value, e)
//   },
//   onSwipeEnd: (e) => {
//     emit('change', numberValue.value, e)
//     startValue.value = undefined
//   },
// })

// const hasLabel = computed(() => !!props.label || !!slots.label)
</script>



<style scoped lang="scss">
.swipe-input {
  :deep(.el-input__wrapper) {
    padding: 1px;
  }
  :deep(.el-input__prefix-inner) {
    margin: 0;
    width: 25px;
  }
  :deep(.label-ref) {
    margin: 0;
  }
}
</style>