Vueタイムラインコンポーネントの使い方

Vueタイムラインコンポーネントの使い方

この記事の例では、参考までにvueタイムラインコンポーネントの具体的な実装コードを共有しています。具体的な内容は次のとおりです。

効果

vue-timeline コンポーネント (タイムライン コンポーネント) コード

<テンプレート>
    <ul class="タイムラインラッパー">
        <li class="timeline-item" v-for="timelineList 内の t" :key="t.id">
        <div class="タイムラインボックス">
            <div class="out-circle">
                <div class="in-circle"></div>
            </div>
            <div class="long-line"></div>
        </div>
        <div class="タイムラインコンテンツ">
            <div class="timeline-date">{{t.date}}</div>
            <div class="timeline-title">{{ t.title}}</div>
            <div class="timeline-desc">{{ t.content}}</div>
        </div>
    </li>
    </ul>

</テンプレート>

<script type="text/babel">
    'vue' から Vue をインポートします
    デフォルトのVue.component('Timeline',{をエクスポートする
        名前:「タイムライン」、
        小道具: {
            タイムラインリスト: {
                タイプ: 配列、
                デフォルト: () => {
                    戻る []
                }
            }
        }
    })
</スクリプト>

<スタイル スコープ lang="scss">
    ul.タイムラインラッパー{
        リストスタイル: なし;
        マージン: 0;
        パディング: 0;
    }

    /* タイムライン */
    .タイムライン項目 {
        位置: 相対的;

        .タイムラインボックス{
            テキスト配置: 中央;
            位置: 絶対;

            .out-circle {
                幅: 16px;
                高さ: 16px;
                背景: rgba(14, 116, 218, 0.1);
                ボックスの影: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
                /*不透明度: 0.1;*/
                境界線の半径: 50%;
                ディスプレイ: フレックス;
                アイテムの位置を中央揃えにします。

                .in-circle {
                    幅: 8px;
                    高さ: 8px;
                    マージン: 0 自動;
                    背景: rgba(14, 116, 218, 1);
                    境界線の半径: 50%;
                    ボックスの影: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
                }
            }

            .long-line {
                幅: 2px;
                高さ: 98px;
                背景: rgba(14, 116, 218, 1);
                ボックスの影: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
                不透明度: 0.1;
                左マージン: 8px;
            }
        }

        .タイムラインコンテンツ{
            ボックスのサイズ: 境界線ボックス;
            左マージン: 20px;
            高さ: 106px;
            パディング: 0 0 0 20px;
            テキスト配置: 左;
            下部マージン: 30px;

            .タイムラインタイトル{
                フォントサイズ: 14px;
                単語区切り: 全区切り;
                下部マージン: 16px;
                色: #333;
                フォントの太さ: 500;
                /*表示: インライン;*/
            }

            .タイムライン日付{
                フォントサイズ: 16px;
                色: #333;
                フォントの太さ: 500;
                下部マージン: 16px;
            }
            .timeline-desc {
                フォントサイズ: 14px;
                色: #999999;
            }
        }

    }


    .timeline-item:last-of-type .timeline-content {
        下マージン: 0;
    }
</スタイル>

応用

// 親コンポーネント参照 <timeline :timeline-list="dongtai"></timeline>
// コンポーネントをインポートします。独自のコンポーネント パスを使用することを忘れないでください。import Timeline from "./Timeline";
//data() によって返されるオブジェクトで配列 dongtai:[] を宣言します

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

以下もご興味があるかもしれません:
  • 要素タイムラインの実装

<<:  Mysql 文字列の傍受と指定された文字列内のデータの取得

>>:  Linux netfilter/iptables の知識ポイントの詳細な説明

推薦する

Dockerでローカルマシン(ホストマシン)にアクセスする方法

質問Docker でローカル データベースにアクセスするにはどうすればよいでしょうか? 127.0....

CSS3 で高さと幅を不定にして垂直と水平に中央揃えするいくつかの方法

1. フレックスレイアウト 。父親 { ディスプレイ: フレックス; コンテンツの中央揃え: 中央;...

HTML にネストされた div の無効なマージンに対する解決策

div がネストされているときに margin が機能しない問題の解決策を次に示します。さて、マージ...

高性能ウェブサイトの最適化ガイド

パフォーマンスの黄金律:エンドユーザーの応答時間のわずか 10% ~ 20% が HTML ドキュメ...

擬似分散グラフィックを実現するための VMware 構成 Hadoop チュートリアル

1. 実験環境シリアルナンバープロジェクトソフトウェアとバージョン1オペレーティング·システムCen...

HTML と CSS の基礎 (必読)

(1) HTML: ハイパーテキストマークアップ言語。主に「ヘッダー」と「ボディ」の2つの部分で構...

PXEを使用してLinuxシステムを自動的に展開する方法

目次背景DHCPの設定DHCP ファイル (動的ホスト構成プロトコル) の編集tftp 設定sysl...

OpenLayers 3 のベクターマップソースの読み込みの問題を解決する

1. ベクターマップベクター グラフィックスは直線と曲線を使用してグラフィックスを表します。これらの...

Win10 での MySQL 8.0.15 のインストールと設定のグラフィック チュートリアル

この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...

VirtualBox を使用して Linux クラスターをシミュレートする方法

1. ホストMacbookにHOSTをセットアップする前回のドキュメントでは仮想マシンの静的 IP ...

Vue の動的コンポーネントと非同期コンポーネントの詳細な理解

1. 動的コンポーネント <!DOCTYPE html> <html> &l...

Apache Log4j2 が核レベルの脆弱性と迅速な修正を報告

Apache Log4j2 が核レベルの脆弱性を報告し、スタックリーダーの友人たちは大騒ぎになりまし...

Dockerを使用してコンテナリソースを制限する方法

覗き見の問題サーバーでは、IIS サービスが複数のサイトを展開していると仮定すると、サイトの 1 つ...

MySQL 5.7.18 バージョンの無料インストール構成チュートリアル

MySQLはインストール版と無料インストール版に分かれていますインストール版の拡張子はmsi、無料イ...

BFCとは何ですか? CSS 疑似要素を使用してフロートをクリアする方法

BFCコンセプト:ブロック フォーマット コンテキストは、BFC 内の要素を外部の要素から分離する独...