# McommonPhrase 常用短语

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/common-phrase/freepass)
- 平台：移动端
- 维护者：赵俊飞
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys-2/#s11

## 代码演示

### 基础使用

```jsx
import React, { Component } from 'react'
import {MCommonPhrase,Icon} from '@weapp/ui'

export default class Basic extends Component {
  onClick = (data:any)=>{
    console.log(data);
  }

  render() {
    return (
      <div>
        <MCommonPhrase  onClick={this.onClick}>
         <Icon name='Icon-signal-communication-o'/>
        </MCommonPhrase>
      </div>
    )
  }
}
```

### 单独使用设置页面

```jsx
import React, { Component } from 'react';
import { MCommonPhrase } from '@weapp/ui';
import { getH5TitleHeight } from './utils';

const { MSetting } = MCommonPhrase;
const height = window.innerHeight - getH5TitleHeight();

export default class msetting extends Component {
  render() {
    return (
      <div style={{ height }}><MSetting /></div>
    )
  }
}
```

### 直接显示列表

```jsx
import React, { Component } from 'react'
import { MCommonPhrase } from '@weapp/ui'
import { getH5TitleHeight } from './utils'

//页面高度
const contentHeight = window.innerHeight - getH5TitleHeight();
export default class Basic extends Component {
  onClick = (data: any) => {
    console.log(data);
  }
  render() {
    return (
      <div>
        <MCommonPhrase needDialog={false} onClick={this.onClick} contentHeight={contentHeight} />
      </div> 
    )
  }
}
```

### 快捷短语平铺展示

```jsx
import { Component } from 'react'
import { MCommonPhrase } from '@weapp/ui'

const { MQuickPhrase } = MCommonPhrase;
export default class QuickPhraseDemo extends Component {
  onClick = (data: any) => {
    console.log(data);
  }

  render() {
    return (
      <MQuickPhrase  onQuickPhraseItemClick={this.onClick}/>
    )
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| needDialog | 弹出框模式 | boolean | 否 | true |
| contentHeight | 单独渲染列表时的页面高度 | number | 否 | window.screen.avaliHeight |
