0.6.5 • Published 4 months ago

@xiaohaih/condition-core v0.6.5

Weekly downloads
-
License
ISC
Repository
-
Last release
4 months ago

条件组件


  • 只负责核心逻辑, 不关心 UI 以及业务操作
  • 目前实现了 wrapper, select, input, datepicker, cascader 组件
  • wrapper 是入口组件, 所有条件组件须放在该组件下
  • 条件子组件可通过 wrapper 注入的选项来更新最新的条件值
  • 目前支持的 UI 库

    • element-ui
    • element-plus
  • 组件实现逻辑

    • 入口组件通过注入值来更新 query 对象, 以及获取子条件相关的信息
    • 子组件通过父组件提供的信息来注册条件(子组件卸载时父组件会自动销毁其条件)

wrapper 组件(容器组件)


  • props
属性名类型默认值必填描述
tagstring | objectdiv显示的标签
resetToInitialValueboolean-触发重置时是否设为初始值
datum定义-渲染的条件, 需外部通过 t 渲染具体组件
backfillobject--条件需要回填需提供
realtimeboolean--是否在条件项发生更改后立马触发搜索事件
immediateSearchboolean--初始是否需要触发一次 ready 事件
toast(msg: string) => void--校验时不合格时触发
  • emits
事件名返回值描述
ready(query: object) => void初始化事件(需设置 immediateSearchtrue), 第一个参数是搜索值对象
search(query: object) => void搜索事件, 第一个参数是搜索值对象
  • provide
  • 注入键名为 condition-wrapper, 注入值是一个对象, 对象暴露了以下内容 👇 | 属性名 |类型| 返回值 | 描述 | | :----- |-| :----------------------------------: | :--------------------------------------------------------------------- | | realtime |Ref| - | 当前组件是否是实时触发 | | register |(config: CommonMethod)| () => void | 注册条件, 返回一个函数(unregister) | | updateQueryValue |(field: string, value: any)| 返回自身对象 | 更新 query 中搜索的值, 不触发搜索事件 | | insetSearch |Function| 返回自身对象 | 子组件内部值发生了变动, 由父级决定是否触发搜索事件(实时搜索时需要区分这两种方式) | | search |Function| -| 直接触发搜索事件() |

子条件共有的 props


属性名类型默认值必填描述
fieldstring-提交的字段名
asstring--提交的字段名(优先级比 field 高)
emptyValuestring|null|undefined--空值时提交的值
resetToInitialValueboolean--重置时是否置为初始值
disabledboolean|(query: object) => boolean--禁用, 可动态设置
hideboolean|(query: object) => boolean--隐藏
validator(query: object) => any | Promise--校验函数, 返回非空字符串代表失败, 触发 wrapper 提供的 toast 函数
  • 子组件通过父级注入的对象内的方法 register 来主动注册条件(子组件都需提供的信息)
属性名类型返回值描述
resetFunction返回自身重置 query 中的值
updateWrapperQueryFunction返回自身更新父级 query 中的值
validator(query: object) => voidany校验自身值是否通过校验
getQuery() => objectobject获取组件自身的 query 参数

select 组件(下拉组件)


  • props
属性名类型默认值必填描述
valueKeystring-下拉选项唯一键
labelKeystring-下拉项显示的值
optionsArray--下拉选项的数据源(可通过 getOptions 动态获取)
multipleboolean--多选
dependboolean--数据源是否依赖其它字段
dependFieldsstring | string[]--依赖的字段
getOptions(cb: (data: any[]) => void, query: object) => void--动态获取数据源
filterMethod(val: string, data: object) => void--自定义过滤数据的方法

input 组件(输入框组件)


  • props
属性名类型默认值必填描述
realtimeboolean--是否实时触发
waitTimeboolean--实时触发时的防抖时间

datepicker 组件(日期组件)


  • props
属性名类型默认值必填描述
rangeboolean--是否是范围选择器
beginFieldstring--范围选择器时提供的开始时间字段(可不填)
endFieldstring--范围选择器时提供的结束时间字段(可不填)

cascader 组件(级联组件)


  • props
属性名类型默认值必填描述
fieldsstring[]--不同层级用不同字段时需提供
valueKeystring-唯一键名
childrenKeystringchildren-子级键名
emitPathboolean--是否返回选中项, 不返回选中项的父级链(数组形式)
optionsobject[]--下拉选项的数据源, 可通过(getOptions)选项动态获取
dependboolean--getOptions 是否依赖了其它数据
dependFieldsstring|string[]--依赖的字段集合
getOptions(cb: (data: object[]) => void, query: object) => void--动态获取数据源

0.6.3

4 months ago

0.6.5

4 months ago

0.6.4

4 months ago

0.6.1

7 months ago

0.6.0

9 months ago

0.5.6

10 months ago

0.5.3

11 months ago

0.5.2

1 year ago

0.5.1

1 year ago

0.5.0

1 year ago

0.4.1

1 year ago

0.4.0

1 year ago

0.3.2

1 year ago

0.3.1

1 year ago

0.3.0

1 year ago

0.2.3

1 year ago

0.2.1

1 year ago

0.2.2

1 year ago

0.2.0

2 years ago

0.1.10

2 years ago

0.1.12

2 years ago

0.1.13

2 years ago

0.1.14

2 years ago

0.1.15

2 years ago

0.1.20

2 years ago

0.1.16

2 years ago

0.1.8

2 years ago

0.1.17

2 years ago

0.1.7

2 years ago

0.1.18

2 years ago

0.1.19

2 years ago

0.1.9

2 years ago

0.1.0

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago