![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
组件设计
文章平均质量分 76
蒲公英想养花
只为愉悦送命
展开
-
自定义组件(原创)——时间块cTimeBlock(design by yRan)
时间块组件原创 2021-10-27 11:56:41 · 326 阅读 · 0 评论 -
自定义组件(原创)——时间标尺cRulerTime(design by yRan)
本组件中基于vue开发,可以在vue项目中添加后自由使用。目录效果展示功能描述结构代码逻辑代码组件应用事件钩子github效果展示功能描述点击具体的某个刻度选择对应的时间点结构代码<template> <div class="c-ruler-time"> <div class="ruler"> <div class="time-box"> <原创 2021-07-29 11:22:05 · 1348 阅读 · 0 评论 -
CSS实现地图(二)之呼吸灯坐标
目录实现效果实现思路结构代码数据代码逻辑代码样式代码呼吸灯组件代码实现效果实现思路用地图图片作为底图点击坐标之后高亮该区域,高亮区域也用图片定位实现坐标和高亮图片都以地图为基准定位呼吸灯实现:CSS帧动画实现,通过padding改变实现阴影层的大小变化,封装成组件通过传当前点击name的参数对比自己的name判断是否需要显示呼吸灯业务逻辑:可以通过has_data字段用于判断是否有数据,以及对应显示隐藏呼吸灯注意:坐标和高亮图片都放在地图的div里面,而该DIV由地图撑开宽高,这样该原创 2021-06-25 16:08:55 · 494 阅读 · 0 评论 -
多选一级下拉组件aSimSelect——属性选择系列组件库(design by yRan)
本组件二次封装iview,可以在全局安装了Iview的项目或者局部引入了Select的页面中自由使用。目录效果展示功能描述结构代码逻辑代码组件应用事件钩子github效果展示从左到右分别是:属性名、不限按钮、多选一级下拉从上到下分别是:选中单项、全选、点击不限功能描述属性名和下拉提示由父组件传给子组件点击不限隐藏下拉,取消显示下拉本组件依赖于组件cSearch,下拉逻辑参考该组件结构代码<template> <div原创 2021-05-13 11:43:28 · 250 阅读 · 0 评论 -
多选二级下拉组件aSelect——属性选择系列组件库(design by yRan)
本组件二次封装iview,可以在全局安装了Iview的项目或者局部引入了datePicker的页面中自由使用。目录效果展示功能描述结构代码逻辑代码组件应用事件钩子github效果展示从左到右分别是:属性名、不限按钮、下拉按钮从上到下分别是:点击下拉按钮显示下拉、点击确认数据回传、县级不限隐藏下拉按钮功能描述属性名和按钮由父组件传给子组件点击下拉按钮下拉才会显示,点击确认时下拉隐藏并将数据回传给父组件本组件依赖于组件selecter结构代码<原创 2021-05-13 11:26:40 · 1217 阅读 · 0 评论 -
复杂组合属性组件aPay——属性选择系列组件库(design by yRan)
本组件二次封装iview和element,可以在全局安装了Iview和element的项目或者局部引入了Select、el-input、datePicker、Button、Spin的页面中自由使用。目录效果展示功能描述结构代码逻辑代码组件应用事件钩子github效果展示从左到右分别是:属性名、不限按钮、二级下拉、累计维度选择器、比较维度选择器、比较数值或区间、提示信息从上到下分别是:点击二级下拉按钮显示下拉、点击确认进行校验、点击不限进行属性隐藏功能描述属原创 2021-05-13 11:05:14 · 162 阅读 · 0 评论 -
区间属性组件aCompare——属性选择系列组件库(design by yRan)
本组件二次封装iview和element,可以在全局安装了Iview和element的项目或者局部引入了Select和el-input的页面中自由使用。目录效果展示功能描述结构代码逻辑代码组件应用事件钩子github效果展示从左到右分别是:属性名、不限按钮、维度选择器、比较数值或区间从上到下分别是:选中范围时输入比较区间、选择比较符号输入比较数值的区间、选中不限隐藏区间组件功能描述属性名和初始数据都由父组件传给子组件,可以为组件赋初值选择不限时默认对此属性原创 2021-05-13 10:37:58 · 287 阅读 · 0 评论 -
区间组件cCompare——属性选择系列组件库(design by yRan)
本组件二次封装iview和element,可以在全局安装了Iview和element的项目或者局部引入了Select和el-input的页面中自由使用。目录效果展示功能描述结构代码逻辑代码组件应用事件钩子github效果展示从左到右分别是:维度选择器、比较数值或区间从上到下分别是:选择比较符号输入比较数值的区间、比较符号、选中范围时输入比较区间功能描述选择比较符号的时候,后面输入比较的数值选择范围选项的时候,后面输入范围区间本组件依赖于组件nToN原创 2021-05-13 10:21:51 · 420 阅读 · 0 评论 -
按钮组件cBtn——属性选择系列组件库(design by yRan)
本组件二次封装iview的Button,可以在全局安装了Iview的项目或者局部引入了Button的页面中自由使用。目录效果展示功能描述结构代码逻辑代码组件应用事件钩子github效果展示从上到下分别是:选中状态按钮、取消选中状态按钮功能描述按钮名和按钮状态均可由父组件传参到子组件点击选中,点击取消可组合使用,实现类似按钮样式的tab,将所有tab的状态和名字保存在一个attrs数组里面结构代码<template> <div原创 2021-05-13 09:36:18 · 539 阅读 · 0 评论 -
动态条件组件addCondition——属性选择系列组件库(design by yRan)
本组件二次封装iview和element的多个组件,可以在全局安装了Iview和element的项目或者局部引入了el-input/Select/Button/DatePicker/InputNumber的页面中自由使用。目录效果展示功能描述结构代码逻辑代码组件应用事件钩子github效果展示从左到右分别是:属性名、组合条件拼接、删除条件、条件确认、校验信息提示从上到下分别是:初始状态、七种条件拼接组合、增加条件按钮功能描述属性名和初始数据均可由父组件传参到子原创 2021-05-12 18:18:08 · 1619 阅读 · 1 评论 -
数字段子组件nToN——属性选择系列组件库(design by yRan)
本组件二次封装element的el-input,可以在全局安装了Iview的项目或者局部引入了el-input的页面中自由使用。目录效果展示功能描述结构代码逻辑代码组件应用事件钩子github效果展示从左到右分别是:范围下限输入框、范围上限输入框从上到下分别是:未输入状态,输入数字段状态,输入可清空功能描述输入数字段范围校验逻辑:下限小于上限,左侧不输入默认0,右侧不输入默认无穷大当校验不通过时,提示用户并清空输入框结构代码<templ原创 2021-05-12 17:50:14 · 187 阅读 · 0 评论 -
数字段组件aNtn——属性选择系列组件库(design by yRan)
本组件二次封装element的el-input,可以在全局安装了Iview的项目或者局部引入了el-input的页面中自由使用。目录效果展示功能描述结构代码逻辑代码组件应用事件钩子github效果展示从左到右分别是:属性名、数字段输入框从上到下分别是:未输入状态和输入数字段状态,输入可清空功能描述属性名和初始数字段均可由父组件传参到子组件二次封装组件nToN,详细校验逻辑见组件nToN结构代码<template> <div c原创 2021-05-12 16:49:58 · 721 阅读 · 0 评论 -
时间段组件aTime——属性选择系列组件库(design by yRan)
本组件二次封装iview的DatePicker,可以在全局安装了Iview的项目或者局部引入了DatePicker的页面中自由使用。目录效果展示功能描述结构代码逻辑代码组件应用事件钩子github效果展示从左到右分别是:属性名、时间选择器功能描述属性名和初始时间段均可由父组件传参到子组件点击“确定”按钮,时间确定,点击“清空”按钮时间清空左侧有快捷时间段选项,“上个月”/“本月”/“上周”等结构代码<template> <div原创 2021-05-12 16:32:48 · 534 阅读 · 0 评论 -
多选组件aSwitch——属性选择系列组件库(design by yRan)
本组件二次封装iview的i-switch,可以在全局安装了Iview的项目或者局部引入了i-switch的页面中自由使用。目录效果展示功能描述结构代码逻辑代码组件应用事件钩子github效果展示从左到右分别是:属性名、不限按钮、多选属性列表从上到下分别是:有选中属性(不限未选中)、无选中属性(不限选中)功能描述属性名和属性列表均可由父组件传参到子组件选中“不限”即该属性不做限制,清空后续条件选择选中条件,“不限”按钮自动取消选中状态选中属性上圆形按钮的原创 2021-05-12 14:24:26 · 1359 阅读 · 0 评论 -
多选组件aCheck——属性选择系列组件库(design by yRan)
本组件二次封装iview的CheckboxGroup,可以在全局安装了Iview的项目或者局部引入了CheckboxGroup的页面中自由使用。目录效果展示功能描述结构代码逻辑代码组件应用事件钩子github效果展示从左到右分别是:属性名、不限按钮、多选属性列表功能描述属性名和属性列表均可由父组件传参到子组件选中“不限”即该属性不做限制,清空后续条件选择选中条件,“不限”按钮自动取消选中状态结构代码<template> <div原创 2021-05-12 13:43:13 · 349 阅读 · 0 评论 -
组件库——属性选择系列组件(design by yRan)
attr-check属性选择组件库:switch、check、time、select、sim-select、ntn、pay基础组件库:c-search、c-search-big、c-btn、ntn、c-compare组件按钮:cBtn比较/范围:cCompare复杂组合属性:aPay多选:aCheck / aSwitch时间段:aTime数字段:aNtn比较/范围/属性:aCompare多选一级下拉:aSimSelect多选二级下拉:aSelect动态条件增删:addCond原创 2021-05-12 11:14:18 · 504 阅读 · 3 评论 -
定制iview选择器(原创)——全选按钮Csearch
本组件依赖于iview的select,可以在全局安装了Iview的项目或者局部引入了Select的页面中自由使用。目录效果展示功能描述结构代码逻辑代码组件应用事件钩子github效果展示从左到右分别是:未选状态、选中一个状态、全选状态功能描述下拉框分为三块:已选列表;全选/取消全选按钮;未选列表;当选中未选列表的某项,该项自动从未选列表pop去已选列表;当选中已选列表的某项,该项自动从已选列表pop去未选列表;支持关键字搜索,输入框显示已选数目;结原创 2021-04-24 15:04:50 · 694 阅读 · 0 评论 -
自定义组件(原创)——组合Ccombine
自定义组件(原创)——组合Ccombine本组件中使用到了iview的Icon,可以在全局安装了Iview的项目或者局部引入了Icon的页面中自由使用。目录效果展示功能描述结构代码逻辑代码组件应用事件钩子github效果展示从左到右分别是:未选中状态、鼠标悬浮、选中、添加组合按钮功能描述添加/删除组合单击聚焦组合双击修改组合名字切换下一个组合或者新增组合时上一个组合内容固定组合不能清空,可以设置组合数量上限结构代码<template>原创 2021-04-24 14:49:51 · 132 阅读 · 0 评论