page-drawer

PageDrawerModule说明

更新日期：2018-7-19 14:58:29

author: Ximena Fan 抽屉模块，可展示在页面的左侧。通过切换Tab标签加载不同组件。整个抽屉，可拖拽，可展开收起。

说明

1. 提交组件代码未压缩，可查看
2. 待处理：引入方式问题

---

使用示例

在模块中引用

@NgModule({
  imports: [
    DrawerModule.forRoot({ defaultWidth: 600 } as DrawerConfig)
  ],
  declarations: [
   XXX
  ],
  entryComponents: [XXX, XXX]
})

在组件内部使用

   <app-drawer [customClass]='"self-cls"' [close]=true 
    (closeEvent)="drawerClose($event)"  
    (resizeEvent)="drawerResize($event)"  
    (selectEvent)="drawerSelect($event)"
    [datas]="drawerdatas">
  </app-drawer>

一、配置 DrawerConfig

1. 属性说明:

属性名	类型	默认值	说明
close	boolean	false 抽屉展开	抽屉是展开还是收起
customClass	string	空	自定义样式
enableDrag	boolean	true 启用拖拽	是否启用拖拽功能
defaultWidth	number	245 默认宽度	设置抽屉的宽度
minWidth	number	200 最小宽度	设置拖拽后，抽屉的最小宽度
maxWidth	number	360 最大宽度	设置拖拽后，抽屉的最大宽度
dragThreshold	number	10 默认宽度	设置拖拽后，拖拽宽度超过阈值才移动位置
lessThanMin	boolean	true 关闭	当拖动宽度小于最小值时，是收起true,还是展开false
2. 修改配置属性:

在模块引入时，修改整体配置

@NgModule({
  imports: [
    DrawerModule.forRoot({ defaultWidth: 600 } as DrawerConfig)
  ],
  declarations: [
   XXX
  ],
  entryComponents: [XXX, XXX]
})

二、属性

1. 属性说明:

属性名	类型	默认值	说明
close	boolean	false 抽屉展开	抽屉是展开还是收起
customClass	string	空	自定义样式
data	DrawerItemData	空	抽屉下标签页数据
hide	boolean	false	抽屉是否隐藏
2. DrawerItemData 引用 :

import {DrawerItemData} from 'drawer.module';

3. DrawerItemData 属性 :

属性名	类型	说明
title	string	标签页标题
active	boolean	标签页是否出于显示状态
disabled	boolean	标签页是否不可用
data	any	标签页展示的组件用到属性值
component	Type<any>	标签页展示组件的引用
3. 设定属性:

 <app-drawer [customClass]='"XXX"' [close]=true [data]="XXX"> </app-drawer>

三、事件

1. 事件参数类型引入:

import {DrawerResizeEvent,DrawerCloseEvent,  DrawerTabSelectEvent} from 'drawer.module';

2. 事件参数类型: | 类型 | 说明 | | ------ | ------ | ------ | | DrawerResizeEvent|拖拽改变抽屉宽度时，抛出的事件类型| ||1. oldWidth：number 原宽度 | ||2. newWidth：number 新宽度 | | DrawerCloseEvent|关闭展开抽屉时，抛出的事件类型| ||1. activeTab：DrawerTabSelectEvent 当前显示的Tab信息 | ||2. closeState：boolean 展开、收起状态。true：收起；false：展开 | ||3. width：number 展开、收起时抽屉的宽度。 | | DrawerTabSelectEvent|选择标签时候，抛出的事件类型| ||1. index：number 标签索引 | ||2. title：string 标签标题 |

3. 支持事件:

事件名	参数类型	说明
resizeEvent	DrawerResizeEvent	拖拽改变抽屉宽度时触发事件
closeEvent	DrawerCloseEvent	展开收起抽屉时触发
selectEvent	DrawerTabSelectEvent	选择标签时触发
4. 绑定事件:

<app-drawer ... (closeEvent)="drawerClose($event)"   (resizeEvent)="drawerResize($event)"    (selectEvent)="drawerSelect($event)"></app-drawer>

更新时间

更新时间	更新内容
2018年7月13日	1. 整个代码结构变动，上传压缩版本，解决run test时问题
2018年7月19日	1. 增加hide属性 2.解决抽屉不能收起的问题