鸿蒙5.0版开发:ArkTS组件通用属性(显隐控制)

 往期鸿蒙全套实战文章必看:


显隐控制

控制组件是否可见。

说明:

从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

visibility

visibility(value: Visibility)

控制组件的显隐。

卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueVisibility控制当前组件显示或隐藏。根据具体场景需要可使用条件渲染代替。
默认值:Visibility.Visible

示例

// xxx.ets
@Entry
@Component
struct VisibilityExample {
  build() {
    Column() {
      Column() {
        // 隐藏不参与占位
        Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
        Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)

        // 隐藏参与占位
        Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)
        Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)

        // 正常显示,组件默认的显示模式
        Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)
        Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)
      }.width('90%').border({ width: 1 })
    }.width('100%').margin({ top: 5 })
  }
}
ts

看完三件事❤️

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注作者龚众皓: 『 蜀道衫 』,不定期分享原创知识。
  • 关注后回复【666】扫码即可获取学习文档。
  • 同时可以期待后续文章ing🚀。 
  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,您可以这样封装: ```vue <template> <a-drawer :visible="visible" :mask-closable="false" :closable="false" :width="420" @close="onClose" > <slot></slot> <div class="drawer-footer"> <a-button style="margin-right: 8px;" @click="onClose">取消</a-button> <a-button type="primary" :loading="submitting" @click="onSubmit"> 提交 </a-button> </div> </a-drawer> </template> <script> import { Drawer, Button } from 'ant-design-vue'; export default { name: 'MyDrawer', components: { 'a-drawer': Drawer, 'a-button': Button, }, props: { visible: { type: Boolean, default: false, }, }, data() { return { submitting: false, }; }, methods: { onClose() { this.$emit('update:visible', false); }, onSubmit() { this.submitting = true; // 处理表单提交逻辑 this.$emit('submit', () => { this.submitting = false; this.onClose(); }); }, }, }; </script> <style> .drawer-footer { display: flex; justify-content: flex-end; align-items: center; height: 56px; border-top: 1px solid #e8e8e8; padding: 0 16px; } </style> ``` 然后在父组件中使用: ```vue <template> <div> <a-button type="primary" @click="visible = true"> 打开抽屉 </a-button> <my-drawer :visible.sync="visible" @submit="onSubmit"> <a-form :form="form"> <a-form-item label="姓名" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }"> <a-input v-model="form.name" /> </a-form-item> <a-form-item label="年龄" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }"> <a-input-number v-model="form.age" /> </a-form-item> </a-form> </my-drawer> </div> </template> <script> import MyDrawer from './MyDrawer.vue'; import { Form, Input, InputNumber } from 'ant-design-vue'; export default { components: { MyDrawer, 'a-form': Form, 'a-form-item': Form.Item, 'a-input': Input, 'a-input-number': InputNumber, }, data() { return { visible: false, form: { name: '', age: undefined, }, }; }, methods: { onSubmit(callback) { this.$refs.form.validate(async (valid) => { if (!valid) { return; } // 处理表单提交逻辑 await this.$api.submitForm(this.form); callback(); }); }, }, }; </script> ``` 这样,您就可以在父组件中通过控制 `visible` 来控制抽屉的显隐,并且抽屉中的表单数据可以通过 `submit` 事件提交到父组件中进行处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值