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

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

この記事では、タイムライン機能を実装するためのVue.jsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

GitHub

タイムラインコンポーネントパッケージ

メイン.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;
      }
    }
  }
}
</スタイル>

コンポーネントの使用

アプリ.vue

<テンプレート>
  <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 = 時間
    },
  }
}
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueは水平タイムラインを実装する
  • Vueはタイムライン機能を実装する
  • 2列の水平タイムラインを実装するためのVueサンプルコード
  • VUEはタイムライン再生コンポーネントを実装します
  • vue+canvasでタイムラインを描く方法
  • Vue+swiperでタイムライン効果を実現
  • Vueは物流タイムライン効果を実現します
  • Vue タイムライン vue-light-timeline 使用方法
  • Vueは移動可能な水平タイムラインを実装します
  • Vueはタイムライン効果を実装する

<<:  Linux システムコマンドのメモ

>>:  MySQLでのカスタムパラメータの使用に関する詳細な説明

推薦する

Nginx を使用してクロスドメイン Vue 開発環境を処理する方法

1. 需要正しい Cookie 配信と SSO テストを確実に実行できるように、ローカル テスト ド...

Linux manコマンドの具体的な使い方

01. コマンドの概要Linux には充実したヘルプ マニュアルが用意されています。コマンドのパラメ...

HTML タグのリストと使用方法

HTMLタグのリストマークタイプ名前または意味効果述べるファイルのタグ付け<HTML> ...

単語のグループ化シーケンスと複数フィールドのグループ化のための MySQL グループ方法

ここで商品テーブルを作成しました。その中のデータを見てみましょう。 mysql> 商品から *...

Tomcat のプレースホルダーによるポート設定方法 (パラメータ指定方式)

仕事で必要になったため、インターネットで多くの情報を見つけましたが、それらはすべてコピーアンドペース...

Windows 10 で MySQL 8.0.12 の解凍バージョンをインストールして構成する方法 (グラフィック チュートリアル付き)

この記事では、MySQL 8.0.12 の解凍版のインストールと設定方法を記録し、皆様と共有します。...

VMware 仮想マシンで HTTP サービスを確立して分析する手順

1. xshell を使用して仮想マシンに接続するか、仮想マシンに直接コマンドを入力します。以下はx...

MySQL 8.0 に移行する際の注意点 (要約)

パスワードモードPDO::__construct(): サーバーがクライアントに不明な認証方法を要求...

Sysbench の MySQL ベンチマーク プロセスの分析

序文1.ベンチマークは、テスト オブジェクトのクラスの特定のパフォーマンス指標の定量的、再現可能、比...

MySQL 5.7.20 圧縮版のダウンロードとインストールの簡単なチュートリアル

1. ダウンロードアドレス:参考: http://dev.mysql.com/downloads/m...

Linux CentOS6.5 yum インストール mysql5.6

この記事では、Linux yumを使用してmysql5.6をインストールする簡単な手順を参考までに紹...

Vue3 でマークダウン エディター コンポーネントを使用する方法

目次インストールコンポーネントのインポート基本的な使い方保存したマークダウンまたは HTML テキス...

JavaScript の非同期処理で待機時間を節約できますか?

JavaScriptで非同期実行の結果を同期的に取得するには、 for ループ内でawaitを使用...

vue+el-upload は複数ファイルの動的アップロードを実現します

vue+el-upload 複数ファイルの動的アップロード、参考までに具体的な内容は以下のとおりです...

nginxとバックエンドポート間の競合の解決策

質問: Alice 管理システムを開発しているときに、すべてのバックエンド インターフェイスが最初の...