この記事の例では、参考までに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 の知識ポイントの詳細な説明
序文以前、defineProperty を紹介したとき、オブジェクトの変更のみを監視でき、配列の変更...
目次MySQL マスタースレーブ同期原理の簡単な分析1. マスタースレーブとは何ですか? 2. 主従...
jquery-multiselect (ドロップダウン ボックスをチェックボックス付きの複数選択コン...
Linux のコマンドラインで他のユーザーにメッセージを送信するのは簡単です。これを行うコマンドは多...
目次MySQLマスタースレーブの基本原理3つのbinlog形式の比較混合形式のバイナリログが存在する...
序文インデックスの選択はオプティマイザ段階の作業であることはわかっていますが、オプティマイザは万能で...
目次序文APPメソッドにジャンプURLスキームメタタグユニバーサルリンクさまざまな使い方URLスキー...
以前にも同じような記事を書いたことがありますが、js スクリプトを使用しており、ファイルパスを表示で...
この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...
数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリック...
目次1. 概要2. Keepalivedを使用してNginxを自動的に再起動する2.1 シェルスクリ...
目次setStateを使用する理由setStateの使用法非同期または同期更新要約するsetStat...
MySQLはインストール時に設定できますが、それより低いバージョンは設定できないようで、インストール...
ユーザーから情報を収集する場合、Web フォームを使用するより簡単で直接的な方法はありません。適切に...
以下のように表示されます。 #!/usr/bin/env python3.5 psutilをインポー...