1# piece
2
3 一种块状的入口，可包含图片和文本，常用于展示收件人。例如，邮件收件人或信息收件人。
4
5>  **说明：**
6>  从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
7
8
9## 子组件
10
11无
12
13
14## 属性
15
16除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：
17
18| 名称     | 类型    | 必填 | 描述                                                         |
19| -------- | ------- | ---- | ------------------------------------------------------------ |
20| content  | string  | 是   | 操作块文本内容。                                             |
21| closable | boolean | 否   | 设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。<br/>默认值：false |
22| icon     | string  | 否   | 操作块删除图标的url，支持本地路径。                          |
23
24
25## 样式
26
27支持[通用样式](js-components-common-styles.md)。
28
29>  **说明：**
30>  文本和图片默认在整个piece组件中居中。
31
32
33## 事件
34
35除支持[通用事件](js-components-common-events.md)外，还支持如下事件：
36
37| 名称    | 参数   | 描述                                  |
38| ----- | ---- | ----------------------------------- |
39| close | -    | 当piece组件点击删除图标触发，此时可以通过渲染属性if删除该组件。 |
40
41## 方法
42
43支持[通用方法](js-components-common-methods.md)。
44
45
46## 示例
47
48```html
49<!-- xxx.hml-->
50<div class="container" >
51  <piece if="{{first}}" content="example"></piece>
52  <piece if="{{second}}" content="example" closable="true" onclose="closeSecond"></piece>
53</div>
54```
55
56```css
57/* xxx.css */
58.container {
59  width: 100%;
60  height: 100%;
61  align-items: center;
62  justify-content: center;
63}
64```
65
66```js
67// xxx.js
68export default {
69  data: {
70    first: true,
71    second: true
72  },
73  closeSecond(e) {
74    this.second = false;
75  }
76}
77```
78
79![zh-cn_image_0000001177428498](figures/zh-cn_image_0000001177428498.gif)
80