Vue.jsはタイムライン機能を実装します

<テンプレート>
  <div class="timeline-main">
    <div class="タイムライン軸">
      <div class="axis-item"
        v-for="(time, index) in dateTimes"
        :key="インデックス">
        <div class="axis-item-tick"
          :class="{ 'axis-item-tick-active': インデックス === ハイライトインデックス }"
          @mouseenter="hoverIndex = インデックス"
          @mouseleave="ホバーインデックス = -1"
          @click="tickClick(時間、インデックス)">
        </div>
        <div class="軸項目ラベル"
          v-if="dateTimeIndexes.indexOf(index) >= 0">
          {{ 時間 }}
        <div class="axis-item-tip"
          v-if="インデックス === ハイライトインデックス || インデックス === ホバーインデックス">
          {{ 時間 }}
      </div>
    </div>
    <div class="タイムラインコントロール">
      <i class="メニューアイコンアイコン左"
        :class="{'menu-icon-disabled': 再生中}"
        @click="後方"></i>
      <i class="メニューアイコン"
        :class="{'icon-play': !再生中、'icon-pause': 再生中}"
        @click="再生を切り替える"
        @mouseleave="hoverIndex = -1"></i>
      <i class="メニューアイコンアイコン右"
        :class="{'menu-icon-disabled': 再生中}"
        @click="進む"></i>
      <i class="メニューアイコンアイコンアップ"
        :class="{'menu-icon-disabled': 再生中}"
        @click="speedSlow"></i>
      <i
        class="menu-icon speed">{{ options.speed }}</i>
      <i class="メニューアイコンアイコンダウン"
        :class="{'menu-icon-disabled': 再生中}"
        @click="speedQuick"></i>
    </div>
  </div>
</テンプレート>
<スクリプト>
import { dateFormat } from '../util/formatdate.js' // 日付形式 export default {
  データ（） {
    戻る {
      intervalTimer: null, // タイマー dateTimeIndexes: [], // 日付リスト playing: false, // 再生 activeIndex: 0, // 現在の時間位置 hoverIndex: 0 // マウスが移動したときの時間位置 }
  },
  小道具: {
    オプション:
      タイプ: オブジェクト、
      デフォルト（） {
        戻る {}
      }
    },
    日付時刻: {
      タイプ: 配列、
      デフォルト（） {
        戻る []
      }
    },
    間隔: {
      タイプ: 数値、
      デフォルト（） {
        100を返す
      }
    }
  },
  計算: {
    ハイライトインデックス() {
      戻る （
        (this.activeIndex === -1 && this.dateTimes.length - 1) ||
        this.activeIndex
      ）
    }
  },
  時計：
    オプション:
      ハンドラ() {
        this.renderTimeline()
      },
      深い: 本当
    },
    再生中（）{
      if (this.playing) {
        this.intervalTimer = setInterval(() => {
          this.activeIndex = (this.activeIndex + 1) % this.dateTimes.length
        }, this.options.speed * 1000)
      } それ以外 {
        if (this.intervalTimer) {
          クリア間隔(this.intervalTimer)
          this.intervalTimer = null
        }
      }
    },
    アクティブインデックス() {
      定数時間 = this.dateTimes[this.activeIndex].split(' ')[0]
      this.$emit('getDateFun', 時間)
    }
  },
  マウント() {
    this.renderTimeline()
    それを = これとする
    window.onresize = 関数 () {
      that.renderTimeline()
    }
  },
  フィルター:
    フォーマット日時(dateTime) {
      dateTime = dateFormat(dateTime, 'MM.dd')
      戻り日時
    }
  },
  メソッド: {
    /**
     * @name: タイムラインを初期化する*/
    レンダリングタイムライン() {
      // タイムラインの幅 const timelineWidth = this.$el.offsetWidth - 40
      //日付の数 const dateTimesSize = this.dateTimes.length
      // すべての時間を表示する場合、タイムラインの理想的な幅 const dateTimesWidth = dateTimesSize * this.interval
      // タイムラインの幅が理想的な幅より小さい場合 if (timelineWidth >= dateTimesWidth) {
        this.dateTimeIndexes = this.dateTimes.map((dateTime, インデックス) => {
          インデックスを返す
        })
        戻る
      }
      // 現在のタイムラインの幅は、最大で何個の日付ティックを収容できるか const maxTicks = Math.floor(timelineWidth / this.interval)
      // 間隔の目盛りの数 const gapTicks = Math.floor(dateTimesSize / maxTicks)
      // 表示する日付インデックスを記録します this.dateTimeIndexes = []
      (t = 0; t <= maxTicks; t++) の場合 {
        this.dateTimeIndexes.push(t * ギャップティック)
      }
      定数len = this.dateTimeIndexes.length
      // 最後の項目は特別な処理が必要です if (len > 0) {
        定数 lastIndex = this.dateTimeIndexes[len - 1]
        (lastIndex + gapTicks > dateTimesSize - 1) の場合 {
          this.dateTimeIndexes[len - 1] = dateTimesSize - 1
        } それ以外 {
          this.dateTimeIndexes.push(dateTimesSize - 1)
        }
      }
    },

    /**
     * @name: クリックスケール * @param {time}
     * @param {インデックス}
     */
    tickClick(時間, インデックス) {
      if (this.playing) {
        戻る
      }
      this.activeIndex = インデックス
    },

    /**
     * @name: 再生と一時停止 */
    トグル再生() {
      this.playing = !this.playing
    },

    /**
     * @name: 時間が一日戻る*/
    後方（）{
      if (this.playing) {
        戻る
      }
      this.activeIndex = this.activeIndex - 1
      （this.activeIndex === -1）の場合{
        this.activeIndex = this.dateTimes.length - 1
      }
    },

    /**
     * @name: 時間が一日進む*/
    フォワード（） {
      if (this.playing) {
        戻る
      }
      this.activeIndex = (this.activeIndex + 1) % this.dateTimes.length
    },

    /**
     * @name: 遅くなる */
    スピードが遅い() {
      if (this.playing || this.options.speed >= this.options.speedMax) {
        戻る
      }
      this.options.speed = this.options.speed + 1
    },

    /**
     * @name: スピードアップ */
    スピードクイック() {
      if (this.playing || this.options.speed <= 1) {
        戻る
      }
      this.options.speed = this.options.speed - 1
    }
  }
}
</スクリプト>
<スタイル スコープ lang="scss">
.timeline-main {
  パディング: 10px;
  ボックスのサイズ: 境界線ボックス;
  .タイムライン軸{
    位置: 相対的;
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースを空ける;
    パディング: 8px 0;
    ＆：：前に {
      コンテンツ： '';
      幅: 100%;
      高さ: 10px;
      位置: 絶対;
      左: 0;
      下: 8px;
      表示: インラインブロック;
      背景: rgba(0, 0, 0, 0.5);
    }
    .軸項目{
      位置: 相対的;
      ディスプレイ: フレックス;
      flex-direction: 列;
      アイテムの位置を中央揃えにします。
      .axis-item-tick {
        表示: インラインブロック;
        幅: 4px;
        高さ: 20px;
        背景: rgba(0, 0, 0, 0.5);
        遷移: 背景 0.3 秒;
        カーソル: ポインタ;
        &:ホバー{
          背景: #000;
        }
      }
      .axis-item-tick-active {
        背景: #000;
      }
      .axis-item-label {
        位置: 絶対;
        下: -30px;
        空白: ラップなし;
      }
      .axis-item-tip {
        位置: 絶対;
        上: -25px;
        パディング: 2px 6px;
        境界線の半径: 2px;
        背景: rgba(0, 0, 0, 0.5);
        空白: ラップなし;
        色: #fff;
      }
    }
  }
  .タイムラインコントロール{
    上マージン: 40px;
    テキスト配置: 中央;
    私 {
      カーソル: ポインタ;
      表示: インラインブロック;
      フォントスタイル: 通常;
    }
    .メニューアイコン{
      フォントサイズ: 20px;
      幅: 20px;
      高さ: 20px;
      背景サイズ: カバー;
      背景繰り返し: 繰り返しなし;
      &.アイコン左{
        背景画像: url('../assets/icon-left.png');
      }

      &.アイコン右{
        背景画像: url('../assets/icon-right.png');
      }

      &.アイコン再生{
        背景画像: url('../assets/icon-play.png');
      }

      &.アイコン一時停止{
        背景画像: url('../assets/icon-pause.png');
      }
      &.アイコンアップ{
        背景画像: url('../assets/icon-up.png');
      }

      &.アイコンダウン{
        背景画像: url('../assets/icon-down.png');
      }
      &.メニューアイコンが無効{
        カーソル: ドロップなし;
        不透明度: 0.5;
      }
    }
  }
}
</スタイル>

<テンプレート>
  <div>
    <h2
      スタイル="margin:0;text-align:center;">
      {{this.date}}
    </h2>
    <メイン:options="オプション"
      :dateTimes="日付時刻"
      @getDateFun="getDateFun"
      :interval="間隔"></メイン>
  </div>
</テンプレート>

<スクリプト>
'./util/formatdate.js' から { dateFormat } をインポートします。
'./components/Main' から Main をインポートします。
エクスポートデフォルト{
  名前: 'アプリ',
  データ（） {
    戻る {
      日付： ''、
      オプション:
        speed: 1, // 速度 speedMax: 10 // 最高速度},
      interval: 20, // 日の間隔 dateTimes: [
        '03-04'、
        '03-05'、
        '03-06'、
        '03-07'、
        '03-08'、
        '03-09'、
        '03-10'、
        '03-11'、
        '03-12'、
        '03-13'
      ]
    }
  },
  コンポーネント:
    主要
  },
  マウント() {
    // 過去10日間の日付を取得します。let list = []
    (i = 0; i < 10; i++ とします) {
      リスト.unshift()
        日付フォーマット(
          新しい日付(
            新しい日付()。setDate(新しい日付()。getDate() - i)
          ).toLocaleDateString(),
          「MM-dd」
        ）
      ）
    }
    this.date = リスト[0]
    this.dateTimes = リスト
  },
  メソッド: {
    // 親コンポーネントから渡された値を受け取る getDateFun(time) {
      コンソール.log(時間)
      this.date = 時間
    },
  }
}
</スクリプト>