cube-ui Textarea 多行输入框组件详解：双向绑定、折叠展开与字数计数全配置

前端UI组件移动开发【免费下载链接】cube-ui:large_orange_diamond: A fantastic mobile ui lib implement by Vue项目地址https://gitcode.com/gh_mirrors/cu/cube-ui点击查看免费下载导读本文以 cube-ui一个基于 Vue 构建的移动端 UI 组件库中的Textarea多行输入框组件为主线系统讲解其v-model双向绑定、基于有内容 / 聚焦的折叠与展开状态机、indicator计数标识含remain/negative子配置与具名作用域插槽以及原生属性透传等能力。读完本文你将掌握从基础用法到源码级实现原理的完整知识并可直接在真实表单场景中复刻出可运行的配置代码。本文对应文档位于 document/components/docs/zh-CN/textarea.md组件源码位于 src/components/textarea/textarea.vue。组件概述多行输入框的折叠与展开Textarea是 cube-ui 在1.5.0版本新增的多行输入框组件组件名注册为cube-textarea注册逻辑见 src/modules/textarea/index.js。与普通textarea不同它内置了一套状态机根据是否有内容、是否聚焦在两个视觉状态间切换——折叠态默认高度 40px适合作为一行输入入口展开态高度 80px提供更大的书写区域。组件通过cube-textarea_expanded与cube-textarea_active两个 class 控制外观并在样式层使用transition: height 200ms实现平滑的高度过渡动画相关样式定义见 textarea.vue 的 style 段。从源码看折叠 / 展开的核心逻辑集中在 textarea.vue 与 textarea.vuedata() { return { textareaValue: this.value, // 初始状态forceExpand 恒展开autoExpand 且默认有内容则展开 expanded: this.forceExpand ? true : (this.autoExpand ? !!this.value : false), isFocus: false } }聚焦时强制展开this.expanded true失焦时若内容为空则折叠回 40px。而forceExpand为true时组件始终保持展开这个规则贯穿初始化和失焦两个入口。基本用法通过 v-model 双向绑定cube-textarea使用v-model完成数据双向绑定这也是文档给出的第一个示例cube-textarea v-modelvalue/cube-textareaexport default { data() { return { value: } } }底层实现中组件维护内部状态textareaValue并通过watch同时监听外部value与内部textareaValue见 textarea.vuewatch: { value(newValue) { this.textareaValue newValue }, textareaValue(newValue) { this.$emit(EVENT_INPUT, newValue) // 触发 input 事件完成 v-model 更新 // 非 forceExpand 且非聚焦状态下若曾展开则自动折叠 if (!this.forceExpand !this.isFocus this.expanded) { this.expanded false } } }由此可以看到两个细节其一外部数据变化会同步进内部输入框其二当程序化地清空输入内容例如表单重置且组件未聚焦时组件会自动回到折叠态——这正呼应了根据是否有内容决定折叠/展开的设计。此外组件混入了 src/common/mixins/input.js其中定义了focus()/blur()实例方法及changeHander透传原生change事件下方实例方法一节会详细展开。配置计数标识indicator 的三种形态计数标识是Textarea最具特色的能力。文档要求indicator的值可以是false、true或配置对象分别对应三种行为false完全不显示右下角的计数标识true等同于{ remain: true, negative: true }即显示剩余可输入字数且允许负值对象通过remain与negative两个布尔字段精细控制。基本配置示例cube-textarea v-modelvalue indicatorindicator/cube-textareaexport default { data() { return { indicator: { negative: true, remain: true } } } }indicator 子配置项| 参数 | 说明 | 类型 | 可选值 | 默认值 | | - | - | - | - | - | | remain | 是否显示剩余字数为false时显示已输入字数 | Boolean | true/false | true | | negative | 当remain为 true 时有效是否允许出现负值即允许超出 maxlength 后显示负数 | Boolean | true/false | true |从源码看textarea.vue 用indicatorConf计算属性将用户配置与默认值合并并用count/remain两个计算属性得出展示数值const DEFAULT_INDICATOR { negative: true, remain: true } indicatorConf() { let indicator this.indicator if (typeof indicator boolean) { indicator {} } return Object.assign({}, DEFAULT_INDICATOR, indicator) }, count() { return this.textareaValue.length }, remain() { let diff this.maxlength - this.count if (!this.indicatorConf.negative diff 0) { diff 0 // negative 为 false 时超限一律显示 0 } return diff }值得注意的两点实现细节negative: false的真正含义是超限后仍显示 0 而非负数——这在表单必填校验场景下可以避免出现刺眼的负数字默认计数标识文本由模板中的默认插槽内容渲染见 textarea.vue且仅在展开态v-showexpanded下可见。自定义计数标识具名作用域插槽 indicator1.12.53从1.12.53开始组件支持使用具名作用域插槽indicator完全自定义右下角计数标识。插槽提供两个作用域值remain剩余可输入字数和count当前已输入字数。cube-textarea v-modeltext placeholder请您至少输入8个字必填 :maxlength300 :auto-expandtrue span slotindicator slot-scope{ remain } classcube-textarea-indicator{{remain}}/300/span !-- 或者 vue2.6以上 -- !-- template #indicatorchildValue span classcube-textarea-indicator{{childValue.remain}}/300/span /template -- /cube-textarea插槽模板的实现位于 textarea.vue它把remain/count通过作用域暴露出来默认内容仅充当兜底slot nameindicator :remainremain :countcount span v-ifindicator v-showexpanded classcube-textarea-indicator{{indicatorConf.remain ? remain : count}}/span /slot在 example/pages/textarea.vue 的官方示例中还演示了force-expand 自定义插槽的组合用法将计数渲染为{{remain}}/{{maxlength}}的已用/总量样式这在移动端输入场景中非常常见。多项配置原生属性透传组件通过v-bind$props将声明的 props 直接透传到原生textarea上见 textarea.vue因此placeholder、maxlength、readonly、disabled、autofocus等原生能力开箱即用cube-textarea v-modelvalue :placeholderplaceholder :maxlengthmaxlength :readonlyreadonly :disableddisabled :autofocusautofocus /cube-textareaexport default { data() { return { value: , placeholder: 请输入内容, readonly: true, maxlength: 100, disabled: true, autofocus: true } } }该行为在 test/unit/specs/textarea.spec.js 中有对应测试用例断言透传后原生textarea的disabled、readOnly、autofocus属性均为true可作为配置生效的直接证据。Props 配置总览| 参数 | 说明 | 类型 | 可选值 | 默认值 | | - | - | - | - | - | | v-model | 绑定的值 | String | - | 空 | | disabled | 禁用状态 | Boolean | true/false | false | | readonly | 只读状态 | Boolean | true/false | false | | maxlength | 最大输入长度 | Number | - | 60 | | placeholder | 占位文本 | String | - | 空 | | autofocus | 自动对焦 | Boolean | true/false | false | | indicator1.10.0| 计数标识配置 | Boolean/Object | true/false/{} | true | | autoExpand1.12.0| 为 true 且默认有内容时默认展开 | Boolean | true/false | false | | forceExpand1.12.53| 为 true 时始终保持展开 | Boolean | true/false | false |补充几点从源码确认的细节组件还额外声明了cols、rows、wrap、required、dirname、form、name等原生属性见 textarea.vue这些同样会通过$props透传到原生元素上类型声明见 types/components/Textarea.d.tsautoExpand的生效前提是默认有内容初始展开条件为autoExpand ? !!this.value : false即只有初始value非空时才展开forceExpand优先级最高一旦为true无论内容多少、是否聚焦组件始终处于 80px 展开态watch与blur中的折叠分支都会被跳过。插槽| 名称 | 说明 | | - | - | | indicator1.12.53| 自定义右下角计数标识作用域参数为remain剩余字数与count已输入字数 |事件| 事件名 | 说明 | 参数 | | - | - | - | | focus | 输入框聚焦后触发禁用状态下不触发 | e - 事件对象 | | blur | 输入框失焦后触发 | e - 事件对象 | | input | 绑定值变化时触发 | 更新后的绑定值 |focus/blur的触发逻辑见 textarea.vueinput事件在textareaValue变化时通过$emit(input, newValue)抛出这正是v-model得以工作的基石。此外组件还会透传原生change事件由 src/common/mixins/input.js 中的changeHander抛出。实例方法| 方法名 | 说明 | | - | - | | focus1.12.10| 获得焦点 | | blur1.12.10| 离焦 |这两个方法定义在 src/common/mixins/input.js实现非常直接通过$refs.input调用原生focus()/blur()focus() { this.$refs.input.focus() }, blur() { this.$refs.input.blur() }使用方式this.$refs.textarea.focus()需给cube-textarea reftextarea设置 ref。源码级深入样式主题与测试验证主题变量一键换肤的样式基础Textarea的视觉样式全部通过 Stylus 主题变量驱动定义见 src/common/stylus/theme/default.styl//textarea $textarea-color : $color-grey $textarea-bgc : $color-white $textarea-border-color : $color-row-line $textarea-focus-border-color : $color-orange $textarea-outline-color : $color-orange $textarea-placeholder-color : $color-light-grey-s $textarea-indicator-color : $color-light-grey-s其中聚焦边框色$textarea-focus-border-color与组件聚焦态 classcube-textarea_active对应展开态的 80px 高度由 textarea.vue 中的.cube-textarea_expanded定义折叠态 40px 为默认高度。这意味着在定制主题时只需替换主题变量即可整体改变输入框外观。测试用例行为契约的实证仓库在 test/unit/specs/textarea.spec.js 中为Textarea建立了完整的行为契约可直接用于验证本文前述结论折叠/展开高度失焦后高度保持 40px聚焦后高度变为 80px清空内容再失焦则恢复 40pxshould not expand when blur、should expand when focus, fold when blur计数展示maxlength60 时聚焦显示剩余56输入 61 个字符后显示0将indicator.negative设为false时超限仍显示0should has remain when focusremainfalse 显示输入字数remain: false时计数显示已输入字符数4should change value原生属性透传autofocus/readonly/disabled均正确落到原生元素should support more native propsautoExpand初始有内容且autoExpand: true时挂载即带cube-textarea_expandedclassshould expand when autoExpand。这些用例既是组件稳定性的保障也是读者理解各配置项实际效果的最快途径。实战建议组合配置要点结合文档与示例页example/pages/textarea.vue给出几个高频组合场景必填长文本 剩余字数提示auto-expand保证有初值时展开:maxlength限制长度默认indicator即可显示剩余字数超出限制也不显示负数配置:indicator{ remain: true, negative: false }超限时计数固定显示 0自定义已用/总量计数1.12.53使用slotindicator配合作用域remain渲染{{remain}}/{{maxlength}}同时可令indicator为false隐藏默认计数始终展开的固定区域force-expand适用于评论区这类固定高度的场景避免折叠/展开跳动影响布局。组件完整能力以源码为准使用时请确认你的 cube-ui 版本不低于对应能力标注的版本号例如插槽与forceExpand需 1.12.53、focus/blur方法需 1.12.10、autoExpand需 1.12.0、indicator配置需 1.10.0。赞分享前端UI组件移动开发【免费下载链接】cube-ui:large_orange_diamond: A fantastic mobile ui lib implement by Vue项目地址https://gitcode.com/gh_mirrors/cu/cube-ui点击查看免费下载相关推荐CANN/xla-npu GatherV2Op实现总结GatherV2Op 实现总结 完成的工作 1. 在 mair_ops.td 中添加 GatherV2Op 定义 文件 mair_ops.td https:前端UI组件移动开发终极指南如何利用LLaMA2-Accessory实现符号推理与神经网络的完美融合终极指南如何利用LLaMA2 Accessory实现符号推理与神经网络的完美融合 LLaMA2 Accessory是一个强大的开源LLM开发工具包它提供了将前端UI组件移动开发Voyager 输入框折叠Input Collapse功能详解空输入框自动折叠为阅读让出更多空间Voyager 输入框折叠Input Collapse功能详解空输入框自动折叠为阅读让出更多空间 导读 输入框折叠Input Collapse是 VAI 应用前端上一篇实战技巧高效解决AKShare股票数据采集连接中断问题下一篇鼠标侧键定制终极指南快速解锁隐藏效率神器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考