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

<template>
  <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
    <v-autocomplete
      v-model="value"
      :rules="item.rules"
      :attach="!item.noAttach"
      :loading="item.loading"
      :label="item.label"
      :placeholder="item.placeholder || item.label"
      :item-title="item.itemText || 'label'"
      :item-value="item.itemValue || 'value'"
      :items="item.items"
      variant="outlined"
      :density="item.dense || 'compact'"
      :append-to-body="true"
      :disabled="item.disabled"
      :multiple="item.multiple"
      :clearable="item.clearable"
      :search="item.searchInput"
      :hide-no-data="item.hideNoData"
      :no-data-text="item.noDataText || 'No data available'"
      :hide-selected="item.hideSelected"
    ></v-autocomplete>
  </div>
</template>
<script setup>
import { computed, defineEmits } from 'vue';
defineOptions({ name:'FormUI-v-autocomplete'})

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) }
})
</script>
<style lang="scss" scoped>
</style>