0.0.5 • Published 5 years ago

@gspwidget/funcs-selector v0.0.5

Weekly downloads
10
License
-
Repository
-
Last release
5 years ago

功能菜单多选组件 FuncsSelector

image-20201119141235294

注意事项

仅提供了功能多选组件 FuncsSelectorComponent (lib-funcs-selector) 。

虽然包含了模态框的 header、footer 按钮,但并不包含 modal 弹窗相关的功能(打开、关闭弹窗);可以用任何 modal 组件/服务库实现弹窗打开,然后订阅 FuncsSelectorComponent 的 confirm, cancel 事件来关闭弹窗。

使用

安装

npm i @gspwidget/funcs-selector

引用 NgModule

import { FuncsSelectorComponent, FuncsSelectorModule } from 'projects/funcs-selector/src/public-api';

@NgModule({
  entryComponents: [
    FuncsSelectorComponent,
  ],
  imports: [
    FuncsSelectorModule,
  ],
 }

使用(拿 ngx-bootstrap/modal 举例)

// 用其他 modal 服务打开弹窗
const modalRef = this.modal.show(FuncsSelectorComponent, {
  initialState: {
    initSelectedFuncIds: ['WF0202', 'WF0203'],
    maxSelectedAmount: 8,
    title: 'aa'
  }
})
// 订阅确定、取消点击事件
modalRef.content.confirm.subscribe((selectedFuncs) => {
  console.log('User selected funcs: ' + selectedFucns)
  this.modal.hide()
})
modalRef.content.cancel.subscribe((selectedFuncs) => {
  this.modal.hide()
})

API

component FuncsSelectorComponent

属性类型说明默认值
@Input() titlestring标题文字'功能选择'
@Input() maxSelectedAmountstring[] | Observable<string[]>最大能选菜单数量[]
@Input() initSelectedFuncIdsnumber初始选中的功能 id 列表Infinity
事件输出类型说明
@Output() confirmFunc[]点确定按钮
@Output() cancel-点关闭按钮

interface Func

属性类型说明
idstringid
namestring名称
layerstring从1开始的层级
parentIdstring父级 id
0.0.5

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago