@interaction/directive
v0.2.0
Published
## 安装
Downloads
9
Keywords
Readme
快速上手(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>