<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>
