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

最新推荐文章于 2021-09-22 15:50:45 发布

蒲公英想养花

最新推荐文章于 2021-09-22 15:50:45 发布

阅读量504

点赞数 2

分类专栏：组件设计文章标签： vue.js 前端组件化

本文链接：https://blog.csdn.net/qq_37604640/article/details/116699849

版权

组件设计专栏收录该内容

18 篇文章 0 订阅

订阅专栏

attr-check

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

组件库下载地址

github

组件 V1.0.0

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

交互

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

说明

按钮：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种组合
可动态增删条件
是单选下拉、比较/范围、时间段的组合条件筛选

时间标尺：cRulerTime

点击具体的某个刻度选择对应的时间点

时间块：cTimeBlock

可设置块个数
可设置禁用块
点击选择后拿到选择块数组
可联动使用实现不可重复选择相同时间的效果

组件 V 1.0.1

更新于2021/5/18

新增属性选择组件库：ai-compare、d-ntn
新增基础组件库：ci-compare、ci-ntn、c-ntn
修改：addCondition、a-pay、a-compare、c-compare

说明

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

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

数字区间属性：d-ntn

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

比较/范围：ci-compare

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

数字区间：ci-ntn

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

数字区间：c-ntn

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