HarmonyOS 二次封装一个输入框组件 实现禁用效果

我们创建一个 ets文件

然后 编写代码如下

@Component
export struct Input {

  @Link value:string;
  @Link placeholder:string;
  @Link disable:boolean;

  build() {
    Row(){
      TextInput({
        text: this.value,
        placeholder: this.placeholder?this.placeholder:""
      })
        .width("100%")
        .height("100%")
        .position({x: 0,y: 0})
        .focusable(!this.disable)
        .onChange((value)=>{
          this.value = value;
        })
      if(this.disable) {
        Column()
          .width("100%")
          .height("100%")
          .position({x: 0,y: 0})
          .zIndex(1)
      }
    }
    .width("100%")
    .height("100%")

  }
}

这里 我们要了三个属性 分别是
value 用来控制输入框的 Text属性 接收用户输入的值
placeholder 提示输入内容
disable 是否禁用

这里 我们里面的元素 高宽基本都是用的百分之百 宽度那我们组件外的那块元素
然后 我们 写了一个 TextInput组件 赋值上了 placeholder value
然后onChange 将用户最新输入的 value 赋值给我们组件绑定的 外面传入的value
然后 我们判断 disable 如果是禁用 就展示 Column
因为他们都设置了 position 相当于都是 绝对定位 然后 x y 位置都是0 我们Column的 zindex 高一些会把TextInput 挡住

然后 我们在 index.ets
中这样写

import { Input } from "../components/General"

@Entry
@Component
struct Dom {
  
  @State value:string = "";
  @State disable:boolean = true;
  @State placeholder:string = "请输入内容";

  build() {
    Column() {
      Row(){
        Input({
          placeholder: $placeholder,
          value: $value,
          disable: $disable
        })
          .width("100%")
          .height("100%")
      }
      .width(200)
      .height(30)
      Button("打印数据").onClick(()=>{
        console.log(this.value);
      })
      Button(this.disable?"启用":"禁用").onClick(()=>{
        this.disable = !this.disable
      })
    }
    .height('100%')
  }
}

我们导入了 Input 组件
然后 我们定义了这三个属性
然后 传入了 Input 组件中

运行代码 我们可以看到 我们点击输入框 是输入不了的
因为它被挡住了

然后 我们点击 启用 按钮
然后 我们点击输入框 进行键盘输入 就一切正常

然后 我们点击打印数据
可以看到 我们value 就能非常好的存入了 最新的用户输入的数据