# MEmoticon 表情符号

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/emoticon/freepass)
- 平台：移动端
- 维护者：陈佳敏
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MEmoticon]

## 代码演示

### 基础用法

```jsx
import { Component } from "react";
import { MEmoticon, EmoticonItemConfigType } from "@weapp/ui";

export default class EmptyDemo extends Component {
  
  onClick = (data?: EmoticonItemConfigType) => {
    console.log('data', data);
  }

  render() {
    return (
      <>
        <div>
          <MEmoticon
           
            onClick={this.onClick}
          />
        </div>
      </>
    );
  }
}
```

## API

### 参数说明如下：

Emoticon 继承 Popover 所有属性

| 参数 | 说明 | 类型 | 是否必填 |  |
| --- | --- | --- | --- | --- |
| className | class 名 | string | 否 |  |
| preficCls | 默认组件 class 名 | string | 否 |  |
| style | 样式 | CSSProperties | 否 |  |
| customRender | 自定义组件渲染 (props: any, ele: ReactElement) => ReactElement | 否 |  |  |
| onClick | 图标点击事件 | (data: EmoticonItemConfigType, e?: React.MouseEventL) => void | 否 |  |
| groupLength | 一行显示几张图 | number | 否 | 10 |
### EmoticonItemConfigType 属性说明

| 参数 | 说明 | 类型 |
| --- | --- | --- |
| url | 表情图片的 url 地址 | string |
| tag | emoji表情字符 | string |
| title | 表情图片的提示文本 | string |
| labelId | 表情图片提示文本的多语言id | string |
| iconKey | 表情图片的简短代码 | string |
| iconName | 表情图片的名称 | string |
| oldName_e10 | E10老数据表情图片的名称 | string |
| oldName_e9 | E9老数据表情图片的名称 | string |
