申请/专利权人：四川启睿克科技有限公司

申请日：2021-10-28

公开（公告）日：2024-04-12

公开（公告）号：CN114020266B

主分类号：G06F8/38

分类号：G06F8/38

优先权：

专利状态码：有效-授权

法律状态：2024.04.12#授权;2022.02.25#实质审查的生效;2022.02.08#公开

摘要：本发明公开了一种基于VUE的分段式进度条组件的实现方法，运用HTML、CSS、JS、VUE相关基础知识，通过一系列数据处理、计算，将日期、事件进度占比、组件容器的长度相关联，并用VUE模板加以展示；通过采用JS基础计算将日期、事件进度占比、组件容器的长度相关联并用VUE模板加以展示的方法，解决现有进度条组件不能分段展示多个事件进度占比的问题。

主权项：1.一种基于VUE的分段式进度条组件的实现方法，其特征在于，包括以下步骤：步骤101，在VUE模板中将组件容器分为三个子容器；所述三个子容器，分别用于容纳阶段日期、阶段进度条、阶段名称，然后将原始数据处理为所述三个子容器展示需要的数据，并将容器的宽度、日期、事件进度占比关联起来，最后分别在三个子容器中展示对应内容；步骤102，通过容器的offsetWidth属性获取组件容器的宽度；所述步骤102中，所述获取组件容器的宽度的方法是用JS中的offsetWidth属性，获取到的宽度用于后续计算每一天表示的宽度；步骤103，将原始数据处理为步骤101中所述容器展示需要的数据，并步骤102中所述的组件容器的宽度和原始数据中的日期、时间进度占比联系起来；所述步骤103具体为：所述原始数据的结构为数组，数组里面的子元素的数据结构为对象，所述对象里面包含阶段名称、阶段开始日期、阶段结束日期、进度占比四个必要属性；定义新的数组，遍历原始数据，在遍历的过程中，通过上一个阶段的结束日期和当前阶段的开始日期计算相邻阶段间隔天数，若间隔天数大于0，则将间隔天数赋值给一个新的对象中的天数属性，在对象中设置空闲标识，并将所述对象放进所述新的数组中；通过阶段开始日期和结束日期计算阶段跨度天数，将跨度天数赋值给当前遍历对象中的天数属性，并将遍历对象放进所述新的数组中，遍历完成最终得到容器展示需要的数组；通过所述原始数据的最后一个对象中的结束日期和第一个对象中的开始日期获取总的跨度天数，然后通过所述组件容器的宽度和总的跨度天数做除法获取到进度条每一天所表示的宽度；步骤104，根据处理后的数据在101步骤所述子容器中绘制分段式进度条；所述步骤104具体为：所述三个子容器均设置为弹性布局且不能换行，分别用于容纳阶段日期、阶段进度条、阶段名称；所述容纳阶段日期的容器中的内容为：遍历步骤103所述容器展示需要的数组，生成子容器I用于容纳两个子容器Ⅱ和Ⅲ，用于放置阶段开始时间201和结束时间202，相邻阶段的间隔期不需要；设置所述子容器I的宽度为所述每一天表示的宽度乘以当前遍历对象中的天数属性的值，弹性布局，所述子容器Ⅱ和Ⅲ分布于所述子容器Ⅰ的两端；所述容纳阶段进度条的容器中的内容为：遍历步骤103所述容器展示需要的数组，生成子容器Ⅰ203，用于表示分段，宽度设置为所述每一天表示的宽度乘以当前遍历对象中的天数属性的值，高度设置为20px，并设置背景色，根据空白标识设置边框为虚线；所述子容器Ⅰ中黑色部分，宽度为所述每一天表示的宽度乘以当前遍历对象中的天数属性的值再乘以进度占比，设置区别于所述子容器Ⅰ的背景色；所述容纳阶段名称的容器的内容为：遍历步骤103所述容器展示需要的数组，生成子容器，宽度设置为所述每一天表示的宽度乘以当前遍历对象中的天数属性的值，所述子容器中放置阶段名称206，居中显示。

全文数据：

权利要求：

百度查询： 四川启睿克科技有限公司 一种基于VUE的分段式进度条组件的实现方法

免责声明
1、本报告根据公开、合法渠道获得相关数据和信息，力求客观、公正，但并不保证数据的最终完整性和准确性。
2、报告中的分析和结论仅反映本公司于发布本报告当日的职业理解，仅供参考使用，不能作为本公司承担任何法律责任的依据或者凭证。

阅读全文 双屏查看 官方信息 专利公告 收藏专利 下载PDF 下载WORD