この記事の例では、参考までに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 でローカル データベースにアクセスするにはどうすればよいでしょうか? 127.0....
1. フレックスレイアウト 。父親 { ディスプレイ: フレックス; コンテンツの中央揃え: 中央;...
div がネストされているときに margin が機能しない問題の解決策を次に示します。さて、マージ...
パフォーマンスの黄金律:エンドユーザーの応答時間のわずか 10% ~ 20% が HTML ドキュメ...
1. 実験環境シリアルナンバープロジェクトソフトウェアとバージョン1オペレーティング·システムCen...
(1) HTML: ハイパーテキストマークアップ言語。主に「ヘッダー」と「ボディ」の2つの部分で構...
目次背景DHCPの設定DHCP ファイル (動的ホスト構成プロトコル) の編集tftp 設定sysl...
1. ベクターマップベクター グラフィックスは直線と曲線を使用してグラフィックスを表します。これらの...
この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...
1. ホストMacbookにHOSTをセットアップする前回のドキュメントでは仮想マシンの静的 IP ...
1. 動的コンポーネント <!DOCTYPE html> <html> &l...
Apache Log4j2 が核レベルの脆弱性を報告し、スタックリーダーの友人たちは大騒ぎになりまし...
覗き見の問題サーバーでは、IIS サービスが複数のサイトを展開していると仮定すると、サイトの 1 つ...
MySQLはインストール版と無料インストール版に分かれていますインストール版の拡張子はmsi、無料イ...
BFCコンセプト:ブロック フォーマット コンテキストは、BFC 内の要素を外部の要素から分離する独...