feat(dev): 添加多行文本输入组件CuteTextAreaInput
- 新增多行文本输入组件CuteTextAreaInput.vue - 集成到组件演示页面CuteOtherDemo中 - 配置组件基础属性如禁用、只读、最大长度等 - 实现内容双向绑定和输入事件处理 - 设置自动调整高度和字数限制功能
This commit is contained in:
@@ -0,0 +1,55 @@
|
||||
<!--
|
||||
* 多行文本输入组件
|
||||
* @author odboy
|
||||
* @email tianjun@odboy.cn
|
||||
* @created 2026-02-01
|
||||
-->
|
||||
<template>
|
||||
<el-input
|
||||
v-model="content"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 1, maxRows: 5}"
|
||||
placeholder="请输入内容"
|
||||
:maxlength="maxlength"
|
||||
:disabled="disabled"
|
||||
show-word-limit
|
||||
:clearable="true"
|
||||
resize="vertical"
|
||||
autocomplete="false"
|
||||
auto-complete="false"
|
||||
:readonly="readonly"
|
||||
style="width: 100%"
|
||||
@input="handleInput"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CuteTextAreaInput',
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: 120
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
content: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInput(value) {
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user