组件库——属性选择系列组件（design by yRan）

attr-check

属性选择组件库：switch、check、time、select、sim-select、ntn、pay
基础组件库：c-search、c-search-big、c-btn、ntn、c-compare

组件库下载地址

github

---

组件

• 按钮：cBtn
• 比较/范围：cCompare
• 复杂组合属性：aPay
• 多选：aCheck / aSwitch
• 时间段：aTime
• 数字段：aNtn / nToN
• 比较/范围/属性：aCompare
• 多选一级下拉：aSimSelect
• 多选二级下拉：aSelect
• 动态条件增删：addCondition

---

交互

• 选中“不限”即该属性不做限制，隐藏或清空后续条件
• 条件检验，直接判断或点击确认按钮启动判断，检验不通过时在该行右上角提示输入错误的字段

---

说明

按钮：c-btn

• 选中蓝色、未选中白色，动态清空或隐藏条件

比较/范围：c-compare

• 比较符号输入比较数值、选择范围输入数字段

复杂组合属性：a-pay

• 二级下拉、单选下拉、比较/范围的组合条件筛选

多选：a-check/a-switch

• 一种是勾选样式的多选、另一种是“有”/“无”状态切换的多选

时间段：a-time

• 可以选择时间段、左侧可以选择“本周”、“本月”等快捷选项

数字段：a-ntn

• 基本校验：如左侧不能大于右侧，判断错误清空并给予提示
• 左侧不输入默认0，右侧不输入默认“不限”

比较/范围/属性：a-compare

• 比较符号输入比较数值、选择范围输入数字段
• 加入属性名和不限按钮显示

多选一级下拉：a-sim-select

• 逻辑详见c-search组件说明
• 加入属性名和不限按钮显示

多选二级下拉：a-select

• 左侧一级中间二级，右侧显示已选选项
• 加入属性名和不限按钮显示

动态条件增删：addCondition

• 共有7种组合
• 可动态增删条件
• 是单选下拉、比较/范围、时间段的组合条件筛选