自定义组件（原创）——时间标尺cRulerTime（design by yRan）

本组件中基于vue开发，可以在vue项目中添加后自由使用。

目录

• 效果展示
• 功能描述
• 结构代码
• 逻辑代码
• 组件应用
• 事件钩子
• github

效果展示

功能描述

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

结构代码

<template>
  <div class="c-ruler-time">
      <div class="ruler">
          <div class="time-box">
              <div :class="t.half?'half':'full'" v-for="(t, idx) in time_arr" :key="idx" @click="select_time(t, idx)">
                  <span v-if="!t.half&&!t.focus" class="text">{
  {t.text}}</span>
                  <span v-if="t.half" class="short"></span>
                  <span v-if="!t.half" class="long"></span>
                  <span v-if="t.focus" class="blue-text">{
  {t.text}}</span>
                  <div v-if="t.focus" class="blue-div"></div>
              </div>
          </div>
      </div>
  </div>
</template>

• 根据half确定是否是整点
• focus确定选中状态还是未选中状态

逻辑代码

import {
    time_arr } from './data/time.js'
import {
    deepCopy } from './js/c_common.js'
export default {
   
  name: 'c-ruler-time',
  data() {
   
    return {
   
        cur_time: '12:00',
        time_arr: deepCopy(time_arr)
    }
  },
  props: {
   

  },
  methods: {
   
      select_time(t, idx) {
   
          this.cur_time = t.text
          this.time_arr.forEach(t => {
   
             t.focus = false
          })
          this.time_arr[idx].focus = true
          this.$emit('getTime', this.cur_time)
      }
  },
  watch: {
   

  },
  created() {
   
      this.$emit('getTime', this.cur_time)
  }
}

• select_time：拿到时间后回传给父组件

组件应用

<c-ruler-time @getTime="getTimeData"></c-ruler-time>

import cRulerTime from './components/c-ruler-time/index'

components: {
   
    cRulerTime
}

• import引入——>组件注册——>使用

事件钩子

 // 时间轴标尺数据获取
getTimeData(moment) {
   
    console.log('momonet:' + moment)
},

• getTimeData：拿到选择的时间点

github

完整代码：点击这里