npm package: @interaction/directive
Description: ## 安装
Latest version: 0.2.0

# 快速上手（DirectiveModule）

## 安装

```
npm i @interaction/directive
```

## 前提

@interaction/directive依赖ng-zorro-antd和echart，所以在使用之前，必须安装ng-zorro-antd和echart

## 介绍

DirectiveModule包含五个指令

| 名称                | 含义                                       |
| ------------------- | ------------------------------------------ |
| appDynamicComponent | 在container动态创建component               |
| appEchart           | 生成echart表格                             |
| appOffset           | Offet指令，设置table，宽度和高度的滚动区域 |
| resize              | 拖拽调整dom宽度                            |
| showFullText        | 超长字段省略号显示，hover全部显示          |

## 导入

```
import { DirectiveModule } from '@interaction/directive';
```



## 使用

### appDynamicComponent

html

```
<section appDynamic [option]="options" [component]="component"></section>
```

ts

```
import { test} from '../test.component';

// 组件附加的一些参数
const options =  {
 	elementCode: obj.code,
 	ountId: obj.countId
};
const component = test;
```



### appEchart

html

```
<div appEchart [options]="options"><div>
```

ts

```
const options = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    }]
};
```

### appOffset

html

```
<div #tableRight class="table-right" appCOffset [(cOffset)]="offset">
	<nz-table 
        #table 
        [nzData]="listOfData"
        [nzScroll]="{x: offset?.width}"
    >
    <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Address</th>
          <th>Action</th>
        </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of table.data">
          <td>{{ data.name }}</td>
          <td>{{ data.age }}</td>
          <td>{{ data.address }}</td>
          <td>
            <a>Action 一 {{ data.name }}</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a>Delete</a>
          </td>
        </tr>
    </tbody>
  </nz-table>
</div>
```

ts

```
export class DemoTableBasicComponent {

  public offset: { width: string; height: string };
  
  listOfData = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park'
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park'
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park'
    }
  ];
}
```

### resize

html

```
<div>
	<aside resize minWidth="200"></aside>
	<main></main>
</div>
```

css

```
div {
	height: 100%;
	width: 300px;
	position: relative;
	aside {
		position: absolute;
		width: 6px;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 10;
		cursor: e-resize;
	}
}
```

ts

```
minWidth，可以设置最小拖拽宽度，如果不设置，默认为300
```

### showFullText

html

```
<div #tableRight class="table-right">
	<nz-table #table>
    <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Address</th>
          <th>Action</th>
        </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of basicTable.data">
          <td>
          	<div showFullText>{{data.name}}</div>
          </td>
          <td>{{ data.age }}</td>
          <td>{{ data.address }}</td>
          <td>
            <a>Action 一 {{ data.name }}</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a>Delete</a>
          </td>
        </tr>
    </tbody>
  </nz-table>
</div>
```