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 の知識ポイントの詳細な説明

推薦する

JavaScript で配列の変更を監視する方法

序文以前、defineProperty を紹介したとき、オブジェクトの変更のみを監視でき、配列の変更...

この記事では、MySQLのマスタースレーブ同期の原理を説明します。

目次MySQL マスタースレーブ同期原理の簡単な分析1. マスタースレーブとは何ですか? 2. 主従...

jquery-multiselect を使用した IE6 のバグの解決方法

jquery-multiselect (ドロップダウン ボックスをチェックボックス付きの複数選択コン...

Linux コマンドラインで他のユーザーと通信する方法

Linux のコマンドラインで他のユーザーにメッセージを送信するのは簡単です。これを行うコマンドは多...

MySQL はどのようにしてマスターとスレーブの一貫性を確保するのでしょうか?

目次MySQLマスタースレーブの基本原理3つのbinlog形式の比較混合形式のバイナリログが存在する...

MySQLインデックスの詳細な分析

序文インデックスの選択はオプティマイザ段階の作業であることはわかっていますが、オプティマイザは万能で...

H5ウェイクアップアプリの実装方法と注意点のまとめ

目次序文APPメソッドにジャンプURLスキームメタタグユニバーサルリンクさまざまな使い方URLスキー...

入力ファイルのカスタムボタンの美化(デモ)

以前にも同じような記事を書いたことがありますが、js スクリプトを使用しており、ファイルパスを表示で...

Vueはログインタイプの切り替えを実装します

この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...

CSSは2つの要素をブレンドする効果(スティッキー効果)を実現します。

数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリック...

Keepalived を使用して Nginx の自動再起動とデュアルアクティブ ホットスタンバイの高可用性を実現する方法について

目次1. 概要2. Keepalivedを使用してNginxを自動的に再起動する2.1 シェルスクリ...

React setStateデータ更新メカニズムの詳細な説明

目次setStateを使用する理由setStateの使用法非同期または同期更新要約するsetStat...

Mac で MySQL バージョン 5.6 のパスワードを設定する方法

MySQLはインストール時に設定できますが、それより低いバージョンは設定できないようで、インストール...

効果的なウェブフォームのための 8 つのルール

ユーザーから情報を収集する場合、Web フォームを使用するより簡単で直接的な方法はありません。適切に...

MySQL 検査スクリプト (必読)

以下のように表示されます。 #!/usr/bin/env python3.5 psutilをインポー...