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

<template>
  <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
    <v-textarea
      v-model="value"
      :rules="item.rules"
      variant="outlined"
      :label="item.label"
      :counter="item.counter || 200"
      :bg-color="item.bgColor"
      :color="item.color || 'primary'"
      :validate-on="item.validateOn"
      :rows="item.rows || 3"
      :disabled="item.disabled"
      :density="item.dense || 'compact'"
      :placeholder="item.placeholder || item.label"
      :no-resize="!item.resize"
      :clearable="item.clearable || false"
      clear-icon="mdi-close-circle"
      @update:modelValue="modelValueUpDate"
    ></v-textarea>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
defineOptions({ name:'FormUI-v-textarea'})

const props = defineProps({item: Object, modelValue: [String, Number]})
const emit = defineEmits(['update:modelValue', 'change'])
const item = props.item
const value = ref(props.modelValue)

watch(() => props.modelValue, (newVal) => {
  value.value = newVal
})
const modelValueUpDate = (val) => {
  value.value = val
  emit('update:modelValue', value.value)
  emit('change', value.value)
}

</script>
<style lang="scss" scoped>

</style>