HarmonyOS NEXT 学习笔记5--extend扩展组件

1.代码：

@Entry
@Component
struct Page_Button_Extend {
  @State message: string = 'Hello World';

  build() {
    Column({ space: 10 }) {
      Button('微信支付')
        .MyButton('wechat')
      Button('支付宝')
        .MyButton('alipay')
      Button('微信支付')
        .MyButton('wechat')
      Button('支付宝')
        .MyButton('alipay')
      Button('微信支付')
        .MyButton('wechat')
      Button('支付宝')
        .MyButton('alipay')
      Button('微信支付')
        .MyButton('wechat')
      Button('支付宝')
        .MyButton('alipay')
    }
    .height('100%')
    .width('100%')
    .padding({
      top: 10,
      left: 20,
      right: 20
    })
  }
}

@Extend(Button) //扩展某个组件
// 只能在本页面用,无法导入导出
function MyButton(type: 'wechat' | 'alipay') {
  .width('100%')
  .height(50)
  .borderRadius(4) // 圆角
  .type(ButtonType.Normal)
  // 三元表达式
  .backgroundColor(type === 'wechat' ? Color.Green : Color.Blue)

}

2.效果：

3.优化：

/

4.说明：

/

5.总结：

/

6.注意:

/

posted @ 2024-07-25 17:57  o蹲蹲o  阅读(16)  评论(0)  编辑  收藏  举报