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>
|
||||||
|
|
||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user