cip-components/cip-form-input/basic/textarea/index.vue

<template>
  <el-input :model-value="modelValue"
            ref="inputRef"
            @update:modelValue="emitInput"
            :placeholder="placeholder"
            :clearable="clearable"
            :disabled="disabled"
            :maxlength="limit"
            :show-word-limit="!!limit"
            type="textarea"
            :autosize="autosize"
            resize="none"
            :style="{width}"></el-input>
</template>
<script>
import { ElInput } from 'element-plus'
import { computed, watch, ref, nextTick, inject } from 'vue'
import { useFormInput } from '@cip/components/hooks/form-input'
import { formInputProps } from '../../form-input-props'
export default {
  components: { ElInput },
  props: formInputProps,
  emits: ['update:modelValue'],
  setup (props, context) {
    const cipConfig = inject('cip-config', {})
    const { width, clearable, ...formInput } = useFormInput(props, context)
    const inputRef = ref()
    const emitInput = (val) => {
      context.emit('update:modelValue', val)
    }
    const limit = computed(() => {
      return props.config?.limit ?? cipConfig?.limit?.textarea ?? ''
    })
    const autosize = computed(() => {
      return props.config?.autosize || { minRows: 2, maxRows: 6 }
    })

    watch(() => props.config.autosize, (val) => {
      if (inputRef.value) {
        nextTick(() => {
          inputRef.value.resizeTextarea()
        })
      }
    }, { deep: true }) // 需要深度监听才可以正常触发

    return {
      ...formInput,
      inputRef,
      clearable,
      emitInput,
      autosize,
      width,
      limit
    }
  }
}
</script>