# commonPhrase 常用短语

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

## 代码演示

### 基础使用

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

const dialogProps: DialogProps = { icon: 'Icon-Advanced-document-settings' };
export default class Basic extends Component {
  onClick = (data: any) => {
    console.log(data);
  }

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

### 使用编辑

```jsx
import React, { Component } from 'react';
import { CommonPhrase, Button } from '@weapp/ui';

const { EditPhrase } = CommonPhrase;
const dialogProps = {
  title:'编辑短语'
}
const initData = {
  phraseName: '短语简称',
  phraseOrder: 2,
  phraseDesc: '<p>短语描述</p>',
  id: '123456789',
};
export default class editPhrase extends Component {

  editRef = React.createRef<any>();

  onSave = () => {

  }

  onAdd = () => {
    const editInstance  = this.editRef?.current;
    if(editInstance){
     const { formItems, formLayout, group, formStore } = editInstance.getInitFormDatas();
     formStore && formStore.initForm({
       data: {},
       items: formItems,
       layout: formLayout,
       groups: group,
       hoverEdit: true
     });
     editInstance?.setVisible(true);
    }
  }

  onEdit = () => {
    const editInstance  = this.editRef?.current;
    if(editInstance){
     const { formItems, formLayout, group, formStore } = editInstance.getInitFormDatas();
     formStore && formStore.initForm({
       data: initData,
       items: formItems,
       layout: formLayout,
       groups: group,
       hoverEdit: true
     });
     console.log(formStore)
     editInstance?.setVisible(true);
    }
  }

  render() {
    return (
      <div>
        <Button type='primary' onClick={this.onAdd}>新增</Button>
        <Button onClick={this.onEdit}>编辑</Button>
        <EditPhrase dialogProps={dialogProps} ref={this.editRef} onSave={this.onSave} />
      </div>
    )
  }
}
```

### 快捷短语平铺展示

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

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

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

## API

### 参数说明如下：

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| dialogProps | 新建和编辑弹框的配置 | dialogProps | 否 |  |
