piece

An entrance piece that can contain images and text. It is usually used to display receivers, for example, email recipients or message recipients.

Child Components

None

Attributes

In addition to the attributes in Universal Attributes, the following attributes are supported.

Name Type Default Value Mandatory Description
content string - Yes Text content of the operational piece.
closable boolean false No Whether to display the delete icon for the operational piece. When users click the delete icon, it triggers the close event.
icon string - No URL of the delete icon for the operational piece. The value can be a local path.

Styles

Styles in Universal Styles are supported.

img NOTE: By default, text and images are placed in the middle of the <piece> component.

Events

In addition to the events in Universal Events, the following events are supported.

Name Parameter Description
close - Triggered when users click the delete icon of the operational piece. You can delete this component by using the if directive.

Method

Methods in Universal Methods are supported.

Example

<!-- xxx.hml-->
<div class="container" >
  <piece if="{{first}}" content="example"></piece>
  <piece if="{{second}}" content="example" closable="true" onclose="closeSecond"></piece>
</div>
/* xxx.css */
.container {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
// xxx.js
export default {
  data: {
    first: true,
    second: true
  },
  closeSecond(e) {
    this.second = false;
  }
}

img