menduner/src/components/FormUI/TextInput/index.vue

<template>
  <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
    <v-text-field
      v-model="value"
      variant="outlined"
      :density="item.dense || 'compact'"
      :type="item.type"
      :rules="item.rules"
      :disabled="item.disabled"
      :dense="item.dense"
      :style="{width: item.width}"
      :color="item.color"
      :label="item.label"
      :placeholder="item.placeholder || item.label"
      :outlined="item.outlined"
      :autofocus="item.autofocus"
      :required="item.required"
      :class="item.class"
      :suffix="item.suffix"
      :append-icon="item.appendIcon"
      :clearable="item.clearable"
      :readonly="item.readonly"
      :prepend-inner-icon="item.prependInnerIcon"
      hide-spin-buttons
      @wheel="$event => handleWheel($event, item)"
      @keyup.enter="item.keyupEnterNative && item.keyupEnterNative(index)"
      @click="item.click && item.click(index)"
      @click:append-inner="item.clickAppendInner"
    ></v-text-field>
  </div>
</template>
<script setup>
import { computed, defineEmits } from 'vue';
defineOptions({ name:'FormUI-v-text-field'})

const props = defineProps({item: Object, modelValue: [String, Number]})
const emit = defineEmits(['update:modelValue'])
const item = props.item
const value = computed({
  get() { return props.modelValue },
  set(value) { emit('update:modelValue', value) }
})
const handleWheel = (event, item) => {
  if (item.type !== 'number') return
  event.preventDefault()
  if (event.deltaY > 0) {
    item.value--
  } else {
    item.value++
  }
}
</script>
<style lang="scss" scoped>

</style>