@interaction/directive

快速上手（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>