vue自定义textarea封装

<template>

  <AppInput

    type="textarea"

    v-bind="$attrs"

    :rows="+rows"

    :autosize="autoSize"

    v-model="inputValue"

    @input="onInput"

    @change="onChange"

  />

</template>

<script setup>

const emit = defineEmits()

let props = defineProps({

  modelValue: {

    type: null,

    default: ''

  },

  rows: {

    type: null,

    default: null

  },

  autosize: {

    type: Boolean,

    default: false

  },

  minRow: {

    type: [String, Number],

    default: 2

  },

  maxRow: {

    type: [String, Number],

    default: 8

  },

})

const inputValue = ref('')

const minRows = computed(() => {

  return +props.minRow || 2

})

const maxRows = computed(() => {

  return +props.maxRow || 8

})

const autoSize = computed(() => {

  let auto = props.autosize || false

  if (!auto) {

    auto = props.rows ? false : { minRows: minRows.value, maxRows: maxRows.value }

  }

  return auto

})

const onInput = (value) => {

  emit('update:modelValue', value)

  emit('input', value)

}

const onChange = (value) => {

  emit('update:modelValue', value)

  emit('change', value)

}

watch(

  () => props.modelValue,

  newVal => {

    // 去掉标签

    if(newVal&&(/<[^>]*>/g.test(newVal))){

      inputValue.value = newVal.replace(/<[^>]*>/g, '')

      emit('update:modelValue', inputValue.value)

      return;

    }

    inputValue.value = newVal

  },

  {

    immediate: true

  }

)

</script>