输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

3.1/4.0
输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
API参考
高级筛选
Created with Pixso.
API version全部版本

您当前浏览的3.1/4.0版本文档归档不再维护，推荐您使用最新的HarmonyOS NEXT版本文档。详细请参考文档维护策略变更。

API参考ArkTS API参考组件参考（兼容JS的类Web开发范式-ArkUI.Full）基础组件piece

piece

更新时间: 2024-04-15 08:42
本文导读
展开章节

一种块状的入口，可包含图片和文本，常用于展示收件人。例如，邮件收件人或信息收件人。

说明

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

子组件

无

属性

除支持通用属性外，还支持如下属性：

展开
名称 类型 必填 描述
content string 是 操作块文本内容。
closable boolean 否

设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。

默认值：false
icon string 否 操作块删除图标的url，支持本地路径。

样式

支持通用样式。

说明

文本和图片默认在整个piece组件中居中。

事件

除支持通用事件外，还支持如下事件：

展开
名称 参数 描述
close - 当piece组件点击删除图标触发，此时可以通过渲染属性if删除该组件。

方法

支持通用方法。

示例

收起
自动换行
深色代码主题
复制
  1. <!-- xxx.hml-->
  2. <div class="container" >
  3.   <piece if="{{first}}" content="example"></piece>
  4.   <piece if="{{second}}" content="example" closable="true" onclose="closeSecond"></piece>
  5. </div>
收起
自动换行
深色代码主题
复制
  1. /* xxx.css */
  2. .container {
  3.   width: 100%;
  4.   height: 100%;
  5.   align-items: center;
  6.   justify-content: center;
  7. }
收起
自动换行
深色代码主题
复制
  1. // xxx.js
  2. export default {
  3.   data: {
  4.     first: true,
  5.     second: true
  6.   },
  7.   closeSecond(e) {
  8.     this.second = false;
  9.   }
  10. }

picker-view
progress
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 API参考 中进行搜索
请输入您想要搜索的关键词