Vueカードのフリップカルーセル表示、フリップ時にデータを切り替えながら、参考までに、具体的な内容は次のとおりです。 効果とコード コード: <テンプレート> <div class="リストコンテナ"> <div class="reason" v-if="リスト1.length > 0 || リスト2.length > 0"> <div class="logo"> <svg-icon class="center-svg" icon-class="centerLogo"></svg-icon> <div class="echart"> <echart :option="オプション" echartId="道路P" /> </div> </div> <RoadComponent :list="list1[0]" :style="{ display: show1 }"></RoadComponent> <RoadComponent :list="list2[0]" :style="{ display: show2 }"></RoadComponent> <RoadComponent :list="list1[1]" :style="{ display: show3 }"></RoadComponent> <RoadComponent :list="list2[1]" :style="{ display: show4 }"></RoadComponent> <RoadComponent :list="list1[2]" :style="{ display: show5 }"></RoadComponent> <RoadComponent :list="list2[2]" :style="{ display: show6 }"></RoadComponent> </div> </div> </テンプレート> <スクリプト> 'vue' から、defineComponent、inject、onMounted、reactive、onUnmounted、toRefs } をインポートします。 '@/apis/fullView' から {congestionPredict } をインポートします。 '@/components/common/echart' から echart をインポートします。 '@/assets/icons/fullView/westToEast.svg' をインポートします。 '@/assets/icons/fullView/eastToWest.svg' をインポートします。 '@/assets/icons/fullView/northToSouth.svg' をインポートします。 '@/assets/icons/fullView/southToNorth.svg' をインポートします。 '@/assets/icons/fullView/centerLogo.svg' をインポートします。 '@/views/fullView/left/RoadComponent' から RoadComponent をインポートします。 エクスポートデフォルトdefineComponent({ 名前: 'RoadP'、 コンポーネント: { echart, RoadComponent }, 設定() { echarts = inject('ec'); とします。 constデータマップ = リアクティブ({ 間隔: null、 間隔1: null、 リスト1: [], リスト2: [], リスト: [], オプション: {}、 タイムアウト: 10, 表示1: 'ブロック'、 表示2: 'なし'、 表示3: 'ブロック'、 表示4: 'なし'、 show5: 'ブロック', 表示6: 'なし'、 }); マウント時(() => { データを取得します。 dataMap.interval = setInterval(() => { データを取得します。 }, 60 * 1000); dataMap.interval1 = setInterval(() => { (dataMap.timeout > 8 && dataMap.timeout < 11) の場合 { データマップのタイムアウト = データマップのタイムアウト - 1; dataMap.show1 = 'ブロック'; dataMap.show3 = 'ブロック'; dataMap.show5 = 'ブロック'; dataMap.show2 = 'なし'; dataMap.show4 = 'なし'; dataMap.show6 = 'なし'; } そうでない場合 (dataMap.timeout === 8) { データマップのタイムアウト = データマップのタイムアウト - 1; dataMap.show1 = 'なし'; dataMap.show3 = 'ブロック'; dataMap.show5 = 'ブロック'; dataMap.show2 = 'ブロック'; dataMap.show4 = 'なし'; dataMap.show6 = 'なし'; } そうでない場合 (dataMap.timeout === 7) { データマップのタイムアウト = データマップのタイムアウト - 1; dataMap.show1 = 'なし'; dataMap.show3 = 'なし'; dataMap.show5 = 'ブロック'; dataMap.show2 = 'ブロック'; dataMap.show4 = 'ブロック'; dataMap.show6 = 'なし'; } そうでない場合 (dataMap.timeout < 7 && dataMap.timeout > 3) { データマップのタイムアウト = データマップのタイムアウト - 1; dataMap.show1 = 'なし'; dataMap.show3 = 'なし'; dataMap.show5 = 'なし'; dataMap.show2 = 'ブロック'; dataMap.show4 = 'ブロック'; dataMap.show6 = 'ブロック'; } そうでない場合 (dataMap.timeout === 3) { データマップのタイムアウト = データマップのタイムアウト - 1; dataMap.show1 = 'ブロック'; dataMap.show3 = 'なし'; dataMap.show5 = 'なし'; dataMap.show2 = 'なし'; dataMap.show4 = 'ブロック'; dataMap.show6 = 'ブロック'; } そうでない場合 (dataMap.timeout === 2) { データマップのタイムアウト = データマップのタイムアウト - 1; dataMap.show1 = 'ブロック'; dataMap.show3 = 'ブロック'; dataMap.show5 = 'なし'; dataMap.show2 = 'なし'; dataMap.show4 = 'なし'; dataMap.show6 = 'ブロック'; } そうでない場合 (dataMap.timeout === 1) { データマップのタイムアウト = データマップのタイムアウト - 1; dataMap.show1 = 'ブロック'; dataMap.show3 = 'ブロック'; dataMap.show5 = 'ブロック'; dataMap.show2 = 'なし'; dataMap.show4 = 'なし'; dataMap.show6 = 'なし'; } それ以外 { データマップのタイムアウト = 10; } }, 1000); }); マウント解除時(() => { 間隔をクリアします(dataMap.interval); 間隔をクリアします(dataMap.interval1); }); 定数getData = () => { 輻輳予測() .then((res) => { res && res.code === 0 && res.data の場合 { データマップ.list1 = []; データマップ.list2 = []; (i = 0、i < 6、i = i + 2 とします) { データマップ.list1.push([ { 名前: res.data[i].name, 方向: res.data[i].direction、 値: res.data[i].index.toFixed(1)、 アイコン: res.data[i].englishDirection、 }, { 名前: res.data[i + 1].name, 方向: res.data[i + 1].direction、 値: res.data[i + 1].index.toFixed(1)、 アイコン: res.data[i + 1].englishDirection、 }, ]); } (j = res.data.length - 1、j > res.data.length - 6、j = j - 2 とします) { データマップ.list2.push([ { 名前: res.data[j].name, 方向: res.data[j].direction、 値: res.data[j].index.toFixed(1)、 アイコン: res.data[j].englishDirection、 }, { 名前: res.data[j - 1].name、 方向: res.data[j - 1].direction、 値: res.data[j - 1].index.toFixed(1)、 アイコン: res.data[j - 1].englishDirection、 }, ]); } } }) .catch((エラー) => { コンソールログ(エラー); }) .finally(() => { dataMap.option = getOption(); }); }; 定数getOption = () => { 戻る { シリーズ: [ { タイプ: 'liquidFill', 名前: ''、 半径: '85%', 中央: ['50%', '45%'], データ: [0.55, 0.5, 0.5], 色: ['rgba(0,118,255,0.5)', 'rgba(0,102,255,0.5)', 'rgba(0,185,255,0.6)'], アウトライン: { 表示: 偽、 }, 背景スタイル: { 色: '透明'、 境界線の色: '透明'、 境界線の幅: 1, 影の色: '透明'、 影ぼかし: 0, }, ラベル: { 表示: 偽、 }, }, ]、 }; }; 戻る { ...toRefs(データマップ)、 }; }, }); </スクリプト> <style スコープ lang="less"> .リストコンテナ{ 幅: 100%; 高さ: 280px; } 。理由 { 幅: 696ピクセル; マージン: 16px 自動; 高さ: 228px; 位置: 相対的; リストスタイル: なし; .ロゴ { 幅: 150ピクセル; 高さ: 150px; 位置: 絶対; 左: 0; 右: 0; 上: 0; 下部: 0; マージン: 自動; 背景: url('~@/assets/img/fullView/centerGround.dynamic.png'); 背景サイズ: 100% 100%; } .echart{ 幅: 158ピクセル; 高さ: 158px; 位置: 絶対; 左: -4px; 上: 4px; } } .center-svg { 幅: 90ピクセル; 高さ: 100px; 位置: 絶対; 左: 30px; 上: 25px; zインデックス: 15; } </スタイル> カードのコンポーネント <テンプレート> <div class="goBack" v-if="list.length > 0"> <div class="top"> <svg-icon class="svg" :icon-class="list[0].icon"></svg-icon> <div> <div> <p class="span-container text-overflow">{{ list[0].name }}</p> <p class="index" :style="{ color: switchColor(list[0].value) }">{{ list[0].value }}</p> </div> <div> <p class="span-container text-overflow">{{ リスト[1].name }}</p> <p class="index" :style="{ color: switchColor(list[1].value) }">{{ list[1].value }}</p> </div> </div> <svg-icon class="svg" :icon-class="list[1].icon"></svg-icon> </div> </div> </テンプレート> <スクリプト> 'vue' から defineComponent をインポートします。 エクスポートデフォルトdefineComponent({ 名前: 'RoadComponent', 小道具: { リスト: {}, }, 設定() { const switchColor = (値) => { 値 > 0 && 値 <= 2 の場合 { '#00DBEB' を返します。 } それ以外の場合 (値 > 2 && 値 <= 3) { '#FFD200' を返します。 } それ以外の場合 (値 > 3 && 値 <= 4) { '#FF7309' を返します。 } それ以外の場合 (値 > 4 && 値 <= 5) { '#FF0000' を返します。 } }; 戻る { スイッチカラー、 }; }, }); </スクリプト> <style lang="less" スコープ> .戻る{ 変換スタイル: 3D を保持します。 アニメーション: 0.5 秒戻る リニア 1; } .back:hover { アニメーション再生状態: 一時停止; } @keyframes 戻る { 0% { 変換: rotateZ(0deg) rotateY(0deg) rotateX(-90deg); } 100% { 変換: rotateZ(0deg) rotateY(0deg) rotateX(0deg); } } .span-コンテナ{ 幅: 150ピクセル; マージン: 0 0 5px 5px; 色: var(--text-blue); フォントサイズ: var(--font-traffic-size); } .svg { 幅: 41ピクセル; 高さ: 41px; } .トップ{ ディスプレイ: フレックス; flex-wrap: nowrap; パディング: 0 20px; マージン: 0 0 14px 0; コンテンツの両端揃え: スペースの間; アイテムの位置を中央揃えにします。 高さ: 68px; 境界線の半径: 10px; 不透明度: 0.9; 背景: 線形グラデーション( 89度、 RGBA(0, 76, 169, 0.5) 0%, RGBA(0, 76, 169, 0) 46%, RGBA(0, 76, 169, 0) 49%, RGBA(0, 76, 169, 0) 52%, RGBA(0, 76, 169, 0.5) 100% ); } .top > div { 幅: 640ピクセル; ディスプレイ: フレックス; テキスト配置: 中央; アイテムの位置を中央揃えにします。 flex-wrap: nowrap; コンテンツの両端揃え: スペースの間; & > div { 幅: 160ピクセル; スパン { 左マージン: 15px; } } 。索引 { 幅: 155ピクセル; 高さ: 28px; フォントサイズ: var(--font-size-chart-title); テキスト配置: 中央; マージン: 0; 行の高さ: 28px; } } </スタイル> vue.js コンポーネントのチュートリアルについては、特別な vue.js コンポーネント学習チュートリアルをクリックして学習してください。 素晴らしいトピックの共有: jQuery 画像カルーセル JavaScript 画像カルーセル Bootstrap 画像カルーセル 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: mysql 5.7.17 winx64.zip インストールと設定方法のグラフィックチュートリアル
>>: docker compose サービスの起動順序を制御する方法
Mac で開発されたプロジェクトがあり、パッケージ npm i がインストールされており、すべて正常...
目次序文開発環境新しいプロジェクトを作成するモバイルウェブプロジェクト角度付きJSONパブリックモジ...
MySQL をインストールした後、テーブル データを保存および削除しようとすると、常にエラー メッセ...
01. コマンドの概要Linux には充実したヘルプ マニュアルが用意されています。コマンドのパラメ...
目次1. スタック構造を理解する2. スタック構造のカプセル化3. 10進数を2進数に変換する1. ...
<br />友人と話し合っていたとき、フレームワークのレイヤー設計の中で最も核となるのは...
1. バックアップソースリストUbuntu のデフォルトのソースは国内サーバーではないため、更新され...
これまでの記事はすべて私自身の学習記録であり、主に以前に遭遇した落とし穴を忘れないようにするためのも...
序文lvm (論理ボリューム マネージャー) 論理ボリューム管理は、Linux システムのニーズを満...
目次1. マイクロタスクとは何ですか? 2. マクロタスクとは何ですか? 3. 事例3.1 結論4....
GreaseMokey (中国語では Grease Monkey Script と呼んでいます) は...
目次1 ユーザー変数の概要2 ユーザー変数の定義3 ユーザー変数の使用3.1 セットを通した例3.2...
この記事では、Navicatを使用してcsvデータをmysqlにインポートする方法を参考までに紹介し...
導入MySQL には、SELECT ステートメントを分析し、開発者が最適化できるように SELECT...
目次事前分析とは何ですか?変数と関数の準備の違いvar 変数の繰り返し宣言変数と関数の昇格の優先順位...