@alicd/crui-task-filter

--- category: Components type: UI Views component: Base chinese: 条件过滤器 english: TaskFilter ---

Usage no npm install needed!

<script type="module">
  import alicdCruiTaskFilter from 'https://cdn.skypack.dev/@alicd/crui-task-filter';
</script>

README

category: Components type: UI Views component: Base chinese: 条件过滤器 english: TaskFilter

一般用于查询页中的搜索区功能。

API

TaskFilter

成员 说明 类型 默认值
field 过滤器所绑定的 Field Field N/A
selectKey 当前面板中所选择的搜索条件 number|string N/A
defaultSelectKey 默认情况下面板所选择的搜索条件 number|string N/A
searchPlaceholder 搜索条件搜索框的提示语 string "过滤搜索条件"
searchCondition 默认情况下搜索条件搜索框中的值 number|string ""
onChangeCondition 切换面板左侧的搜索条件时触发的事件 (selectedKey: string) => void 默认不执行任何操作
onSearch 在搜索条件搜索框中执行搜索操作时触发的事件 (searchCondition: string|number) => void 默认不执行任何操作
onReset 点击重置按钮触发的事件 (field: Field) => void 默认不执行任何操作
onClear 点击清空按钮触发的事件 (field: Field) => void 默认不执行任何操作
visible 是否显示弹层, 如果此属性为 false，弹层不会被渲染 boolean false
title 设定弹层标题 string|number "排序设置"
width 设定弹层宽度 number 800
height 设定弹层高度 number 640
onOk 点击确定按钮触发的事件 (data: object[]) => void 默认不执行任何操作
onCancel 点击取消按钮触发的事件 (e: object[]) => void 默认不执行任何操作
loading 设置弹层确定按钮载入状态 boolean false
showTitle 是否显示标题 boolean true
showFooter 是否显示弹层底部的按钮栏 boolean true
hasMask 是否显示遮罩 boolean true
className 自定义类名 string N/A
canCloseByEsc 是否支持 esc 按键关闭弹层 boolean true
canCloseByOutSideClick 点击弹层外的区域是否关闭弹层 boolean true
canCloseByMask 点击遮罩区域是否关闭弹层 boolean true
animation 配置动画的播放方式 object|boolean { "in": "expandInDown", "out": "expandOutUp" }
target 配置弹层定位的参照元素 any Position.VIEWPORT
align 弹层相对于target的定位, 详见开发指南的定位部分 string|boolean "cc cc"
offset 弹层相对于target定位的微调 number[2] [0, 0]
beforeClose 弹层关闭前触发的事件 () => void 默认不执行任何操作
onClose 弹层关闭后触发的事件 () => void 默认不执行任何操作
afterClose 弹层关闭后触发的事件, 如果有动画，则在动画结束后触发 () => void 默认不执行任何操作
beforeOpen 弹层打开前触发的事件 () => void 默认不执行任何操作
onOpen 弹层打开后触发的事件 () => void 默认不执行任何操作
afterOpen 弹层打开后触发的事件, 如果有动画，则在动画结束后触发 () => void 默认不执行任何操作
onRequestClose 弹层请求关闭触发的事件。参数: reason: string 弹层关闭的来源 e: Event DOM 事件 (reason: string, e: Event) => void 默认不执行任何操作
beforePosition 弹层定位完成前触发的事件 () => void 默认不执行任何操作
onPosition 弹层定位完成后触发的事件。参数: config: object 定位的参数 node: object 定位的元素 (config: object, node: object) => void 默认不执行任何操作
autoFocus 弹层打开的时候是否让里面的元素自动获取焦点 boolean false
cache 隐藏时是否保留子节点 boolean false
safeNode 安全节点,当点击 document 的时候, 如果包含该节点则不会关闭弹层, 如果是函数需要返回 ref, 如果是字符串则是该DOM的 id, 也可以直接传入DOM节点 any N/A
wrapperClassName 弹层的根节点的样式类 string N/A
container 指定渲染组件的容器 any N/A
shouldUpdatePosition 强制更新定位信息 boolean N/A
needAdjust 是否自动调整定位的位置 boolean N/A
disableScroll 是否禁用页面滚动 boolean true
prefix 样式类名的品牌前缀 string "next-"

TaskFilter.Item

成员 说明 类型 默认值
key 作为条目的唯一标示，必须保证在同一个 TaskFilter 下唯一 string|number N/A
title 单个条目的标题 string N/A
visible 该条目是否可见 boolean N/A
valuePlaceholder 显示在标题后面的文案，一般展示用户填的值 string|number N/A