共计 5046 个字符，预计需要花费 13 分钟才能阅读完成。
背景
最近公司要求新增一个大屏页面，需要封装一个时间信息收集组件。通过双向绑定响应式数据，父组件监听子组件对数据的操作。最终将信息作为接口参数，请求相应的数据，渲染至页面上。
技术栈
- Vue3（3.2.45）
-
Element-Plus（2.2.27）
-
dayjs（^1.11.7）
效果
其中时间轴是对 Element Plus 组件库中的 Slider 滑块组件的二次封装，使用样式穿透自定义样式，同时大家可以把 onMounted 生命周期中的代码取消注释，可以做更多的操作。我的另一篇文章也是时间轴组件的封装，不过两者略有区别，所以又单独记录一下。
代码
父组件关键代码
{{titleTime[0] }} - {{titleTime[1] }}
时间收集组件代码
关键变量介绍
这些变量实际可以对外暴露出去，也就是让父组件去定义，让组件更具灵活性。
- optionsHour：每日小时节点配置项（可自行灵活配置）
- optionsDay：每周天数配置项（可自行灵活配置）
- LastDay ：时间轴根据 当前时间 和该变量 往前推多少天，之后 for 循环会利用该变量为 marks 赋值，并求出步进值stepValue 。
{{item}}
{{item}}
// `;
// document.querySelector(“.bottom”).addEventListener(“click”, (e) => {
// if (e.target.id == “span1”) {
// console.log(“ 实况 ”);
// } else if (e.target.id == “span2”) {
// console.log(“ 预报 ”);
// }
// });
});
所遇问题
1. 由于 marks（取值范围在闭区间 0 -100）的赋值是根据 LastDay 变量计算出来的，具体来说是这段代码：
Number(((100 * j) / LastDay.value).toFixed(1));（最初是没有.toFixed(1)）
这导致计算有可能存在很长的小数，由于小数的存在，又使得 watchEffect 当中的
let num = Number(value.value.toFixed(1));endTime = marks[num];（最初没有.toFixed(1)）
有可能匹配不上返回 undefined。
也有尝试使用 Math 中的四舍五入或向上 / 下取整解决，但这又导致滑块对应不上步进值，最终采取了.toFixed(1)解决该问题。（.toFixed()返回值是字符串）
2. 代码中的 v -model 绑定组件必须采用别名方式，否则无效。
原文地址: Vue3 时间轴组件（时间信息收集组件）
