HarmonyOS TextInput基础属性讲解

最新推荐文章于 2025-03-18 07:57:53 发布

瑞晟技术服务中心-耿瑞

最新推荐文章于 2025-03-18 07:57:53 发布

阅读量1.7k

点赞数 14

文章标签： harmonyos 华为鸿蒙

本文链接：https://blog.csdn.net/weixin_45966674/article/details/135851890

版权

本文详细解释了Vue中TextInput组件的使用，包括placeholder的默认提示作用，text属性与v-model的不同，以及onChange事件的使用。还介绍了controller属性对光标位置的控制和组件样式如宽度、高度、背景颜色等的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TextInput 是一个文本框组件
我们在常规APP开发中也会经常出现这类输入工具
我们还是老规矩在编辑器中写一个
然后鼠标放在上面等弹出提示进入官方API
在这里插入图片描述
文档上显示它有三个参数

第一个参数 placeholder 是个字符串类型的参数
我们做其他项目应该也知道 placeholder 就是在输入框中没有内容时默认的一个提示信息

TextInput({
   
   placeholder: "请输入姓名"
})

在这里插入图片描述
第二个 text 也是个字符串类型的参数控制输入框默认的文本内容

TextInput({
   
	placeholder: "请输入姓名",
	text: "小猫猫"
})

做过传功前端项目的朋友应该都知道输入框有值后 placeholder就不展示了因为它只是在没有内容时才提示的
在这里插入图片描述
但这里要强调一下 text和v-model 还是不太一样不是说你把一个状态变量设置了 text 他就会跟着输入框内容的改变改变
例如我们这样写

@Entry
@Component
struct Index {
   

  @State name:string = "小猫猫";

  build() {
   
    Column({
   space: 30}) {
   
        TextInput({
   
          placeholder: "请输入姓名",
          text: this.name
        }).onChange((value:string) =>{
   
            console.log(this.name);

最低0.47元/天解锁文章