この記事では主に、2列の水平タイムラインを実現するためのVueのサンプルコードを紹介します。 まずは画像を見てみましょう。主に2列の横型タイムラインを実装しています。多くの人が実装したものを見たところ、横型は1列しかありません。しかも、elementUIのタイムラインは縦型のみで、横型には対応していません。結局、涙をのんで自分で実装するしかありませんでした。大丈夫とは思っていませんでした。ただし、データが多い場合のページめくりはまだ実装されていません。これを実装した友人は私にタグ付けしてください。 1.コンポーネントtimelineH.vueを実装するtimelineH.vue の H は水平方向を意味します。名前を付けるのは難しいですね、ハハ。 <テンプレート> <ul class="timelineHengBox"> <li class="timelineHengItem" v-for="(item,index) in timelineList" :key="index" :style="{left: index % 2 != 0 ? (liHalf*index)+52+'px':0,'border-right': index == timelineList.length - 2 ?'1px solid #FEFEFE' : 'none'}"> <div class="timeline_dot" :style="{top: index % 2 != 0 ? '-5px' : '93px'}"></div> <div class="timeline_dot" v-show="index == timelineList.length - 2" style="right: -6px;top:93px;left: unset;"></div> <div class="timeline_wapper flex" :class="{'mt20': index % 2 != 0}"> <img src="../../static/img/excelIcon.png" class="bjIcon" :style="{'margin': index % 2 != 0 ? '11px 44px 0 42px' :''}"> <div>{{item.content} </div> </div> <div class="timelineDate_bottom" :style="{'top': index % 2 != 0 ? '-20px' : '103px'}">{{item.dateTime}}</div> </li> </ul> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'timelineH', 小道具: { タイムラインリスト: { タイプ: 配列、 デフォルト: [] } }, データ () { 戻る { liWidth: 496, // li 全体の幅。下の li のスタイルと一致するようにする liHalf: 248, // これは li の幅の半分で、中央の水平線上の点が正しい位置を見つけられるようにする} } } </スクリプト> <スタイルスコープ> .timelineHengBox { 色: #fff; マージン: 0; パディング: 0 26px; 幅: 92%; パディング上部: 18px; パディング下部: 10px; 左マージン: 26px; 高さ: 87px; 下境界線: 3px 実線 #FEFEFE; } .timelineHengItem { リストスタイル: なし; 高さ: 97px; 幅: 496ピクセル; 左境界線: 1px 実線 #FEFEFE; フロート: 左; 下境界線: 3px 実線 #FEFEFE; 位置: 相対的; } .timelineHengItem:n番目の子(2n) { 位置: 絶対; 左: 248ピクセル; 下境界線: 0; 上: 115px; } .timeline_dot { 幅: 10px; 高さ: 11px; 背景: #FEFEFE; 位置: 絶対; 左: -5px; 上: 93px; } .timeline_dot:n番目の子(2n) { 上: -7px; } .timeline_wapper { 幅: 400ピクセル; テキスト配置: 左; フォントサイズ: 12px; 色: #FFFFFF; 行の高さ: 20px; } .mt20 { 上マージン: 20px; } .bjアイコン{ 幅: 32px; 高さ: 32px; マージン: 31px 44px 0 42px; } .timelineDate_bottom { 幅: 80ピクセル; 高さ: 20px; 位置: 絶対; 上: 103px; 左: -60px; テキスト配置: 左; フォントサイズ: 14px; フォントの太さ: 太字; 色: #FFBA00; 左マージン: 77px; } </スタイル> 実装のアイデア:
2. コンポーネントの呼び出し<div class="timelineHengContainer"> <timelineH :timelineList='timelineList' /> </div> js: 「@/components/timelineH.vue」からtimelineHをインポートします。 コンポーネント: タイムラインH }, データ() { 戻る { タイムラインリスト: [ { 日時: '2021-09', 内容: 「採掘へようこそ、毎日採掘して鉱石を手に入れよう、ハハハハ、採掘へようこそ、毎日採掘して鉱石を手に入れよう、ハハハハ、採掘へようこそ、毎日採掘して鉱石を手に入れよう、ハハハハ、採掘へようこそ、毎日採掘して鉱石を手に入れよう、ハハハハ。」 ' },{ 日時: '2021-10', 内容: 「冬は寒すぎるので、暖かくしてください。冬は寒すぎるので、暖かくしてください。冬は寒すぎるので、暖かくしてください。冬は寒すぎるので、暖かくしてください。冬は寒すぎるので、暖かくしてください。」 ' },{ 日時: '2021-11', 内容: 「30日間の投稿チャレンジが正式に始まりました。プロジェクターが欲しいです。ずっと買いたいと思っていたんです。」 ' },{ 日付時刻: '2021-12', 内容: 「もうすぐ月末、新しい年が始まります、明けましておめでとうございます、新しい年が始まります、明けましておめでとうございます、新しい年が始まります、明けましておめでとうございます。」 ' } ] } } css: .timelineHengコンテナ{ 幅: 100%; 高さ: 227px; 背景画像: url('../../static/img/timelineBg.png'); 背景サイズ: 100% 100%; 背景繰り返し: 繰り返しなし; } これで水平2列のタイムラインが実現できました。コードをコピーしてそのまま使えます(CV方式で~)。 2日間かけて取り組みました。elementuiの垂直タイムラインの描画方法を参考にしましたが、失敗しました。純粋なdivとcssで実装することもできませんでした。主な原因は、2つの列とノードの垂直線をどのように描画すればよいかがわからなかったことです。最終的に、liを使用して直接境界線を追加して実現することを考えました。 Vue で 2 列の水平タイムラインを実装するサンプルコードに関するこの記事はこれで終わりです。Vue の 2 列の水平タイムラインに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Dockerはポートマッピングを設定しますが、ソリューションにアクセスできません
最近、WeChat アプレットを作成しているのですが、いくつか問題が発生しました。インターネットでい...
目次CentOS 8にDockerをインストールする1. yumを更新する2. containerd...
この記事では、例を使用して、データベースを削除せずに MySQL 内のすべてのテーブルをすばやく削除...
目次まず、値の一部と一致させるために使用される特殊文字であるワイルドカードについて簡単に紹介します。...
MySQL 5.7.18 無料インストール版のインストールチュートリアルMySQL は現在、世界で最...
PHP Linux に XML 拡張機能をインストールする1. PHPインストールソースパッケージを...
考えてみてください。なぜcss 、 javascriptのようにbodyタグの末尾ではなく、 hea...
目次MySQL 5.6以前MySQL 5.6以降要約する知らせMySQL 5.6以前更新手順元のテー...
目次Linux ドライバーの共通機能 (copy_from_user open read write...
一般的に言えば、コンテナが起動した後、ポート マッピングを通じてコンテナが提供するサービスを使用...
ここでは、主に小さなプログラムの開発プロセスでよく使われる、非常に実用的な機能ポイントをいくつか整理...
MySQL では通常、limit を使用してページ上のページング機能を完了しますが、データ量が大きな...
この記事では、JavaScriptで画像のプリロードと遅延ロードを実装するための具体的なコードを参考...
コードを画像に変換するにはhtml2canvas は、ブラウザから Web ページのスクリーンショッ...
目次オブザーバーパターンとは何ですか?シナリオシミュレーションコードの実装コードのリファクタリング要...