feat(dev): 添加多行文本输入组件CuteTextAreaInput

- 新增多行文本输入组件CuteTextAreaInput.vue
- 集成到组件演示页面CuteOtherDemo中
- 配置组件基础属性如禁用、只读、最大长度等
- 实现内容双向绑定和输入事件处理
- 设置自动调整高度和字数限制功能
This commit is contained in:
2026-02-02 11:47:02 +08:00
parent 5b457dc47f
commit d370e51c02
2 changed files with 59 additions and 0 deletions
@@ -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>
@@ -24,6 +24,8 @@
<el-table-column prop="name" label="姓名" /> <el-table-column prop="name" label="姓名" />
<el-table-column prop="description" label="备注" /> <el-table-column prop="description" label="备注" />
</cute-transfer> </cute-transfer>
<cute-section-title title="多行输入文本 CuteTextAreaInput" />
<cute-text-area-input />
<cute-section-title title="链接 CuteLink" /> <cute-section-title title="链接 CuteLink" />
<cute-link title="百度一下" href="https://www.baidu.com" /> <cute-link title="百度一下" href="https://www.baidu.com" />
<cute-section-title title="空状态 CuteNoData" /> <cute-section-title title="空状态 CuteNoData" />
@@ -70,10 +72,12 @@ import CuteScreenShot from '@/views/components/dev/CuteScreenShot.vue'
import CuteSectionTitle from '@/views/components/dev/CuteSectionTitle.vue' import CuteSectionTitle from '@/views/components/dev/CuteSectionTitle.vue'
import CuteButton from '@/views/components/dev/CuteButton.vue' import CuteButton from '@/views/components/dev/CuteButton.vue'
import CuteTransfer from '@/views/components/dev/CuteTransfer.vue' import CuteTransfer from '@/views/components/dev/CuteTransfer.vue'
import CuteTextAreaInput from '@/views/components/dev/CuteTextAreaInput.vue'
export default { export default {
name: 'CuteOtherDemo', name: 'CuteOtherDemo',
components: { components: {
CuteTextAreaInput,
CuteTransfer, CuteTransfer,
CuteButton, CuteButton,
CuteSectionTitle, CuteSectionTitle,