This is the 25th day of my participation in Gwen Challenge

In the process of front-end development, business requirements often involve the time schedule, which is also a relatively common requirement. Related requirements for time schedule are common: the delivery schedule of goods in the mall, the approval time node of administrative requirements and other business scenarios. Although the components of Vue also provide corresponding components for the use of the timeline, but for some actual development business requirements cannot be met, at this time, it is necessary to define the timeline to achieve the corresponding business scenarios.

If can use the framework’s built-in components not custom components, after all the ready-made is better than the need to develop, but can’t avoid still want oneself to the development of custom components, so this article is to share a custom to use on the timeline, is put aside frame own timeline components such as vant to implement the custom of the time axis components, In this case, the use of the timeline under the Vant framework of the Vue project is taken as an example.

1. Source file of the component: process.vue

<template> <ul class="process-box"> <li class="li" v-for="(item, idx) in this.processData" :key="idx"> <div> <span class="title">{{ item.recordDescription }} </span> <span class="time">  {{ timesToDate(item.updateDate) }} </span> </div> </li> </ul> </template> <script> export default { props: { processData: Array, }, name: "Process", data() { return { commentList:["comment"] }; }, computed: {}, created() {}, methods: { timesToDate(data) { var date = new Date(data); var Y = date.getFullYear() + "-"; var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-"; var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " "; var h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":"; var m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":"; var s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); return Y + M + D + h + m + s; ,}}}; </script> <style scoped> .process-box { margin: 20px 10px 0 10px; } .process-box > li { font-size: 10px; padding: 0 0 40px 13px; position: relative; } .process-box > li:not(:last-child) { border-left: 1px solid #e4e4e4; } .process-box > li div:first-child { line-height: 14px; margin-bottom: 5px; } .process-box > li .employee-info { color: #169bd5; } .process-box > li .title { color: #169bd5; display: inline-block; margin: 0 10px; } .process-box > li::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: #e4e4e4; position: absolute; left: -5px; top: 0; } </style>Copy the code

2. Register component: ComponentConfig. json

{
    "components": [
        { "name": "Process", "path": "Process" }
    ]
}
Copy the code

3. Where to use components: candidatedetail.vue

<template> <div slot="body" class="candidate-detail"> <div class="time-line"> <van-divider Class ="time-title"> Timeline </ van-Divider > <div class="process"> < process :processData="processData"> </ process > </div> </div>  </div> </template> <script> export default { data() {} }; </script> <style scoped> .candidate-detail { background-color: whitesmoke; } .time-line { margin-top: 10px; margin-bottom: 10px; background-color: white; } .time-title { margin-bottom: 10px; } .process { height: 200px; overflow-y: auto; } </style>>Copy the code

4, the effect of concrete implementation

According to the usage instructions of the custom component of the timeline above, you can use it directly when you meet similar needs in the future. It is simple and convenient to use, and you are no longer afraid of abnormal business requirements, isn’t it great? The above is all the content of this chapter. Welcome to pay attention to the wechat public account of Sanzhan “Program Ape by Sanzhan”, and the Sina Weibo account of Sanzhan “Sanzhan 666”, welcome to pay attention!