Vue 大画面データ表示例

Vue 大画面データ表示例

効率的に要件を満たし、コンポーネント ライブラリの肥大化や車輪の再発明を避けるために、私は以前、大画面ディスプレイ プロジェクトを数多く行ってきました。今日は、大画面の実際のプロセスを皆さんと共有したいと思います。最初は、データビュー コンポーネント ライブラリを使用していましたが、その後、カプセル化されたコンポーネントはそれほど多くは必要ないことがわかりました。また、モバイル側では、スタイルの混乱という問題がありました。そこで、彼の実装方法を参考にして、大画面対応のコンポーネントを作りました。では、早速レンダリングを見てみましょう。

レンダリング

あらゆるサイズの大型ディスプレイ画面に適応する必要があり、携帯電話では効果を拡大したり縮小したりして表示できます。変形せずに全体的に適応する効果を実現するために、ボディを比例して拡大縮小するコードをここに追加しました。

 <スクリプト>
        //ページの拡大縮小 public function resizePage() {
          // ウィンドウの高さを取得します var clientW = window.innerWidth
          var clientH = window.innerHeight
          // 初期ウィンドウ対ボディ比 var bi = clientW / 1920
          // 本文の幅と高さを設定します - 実際の状況に応じて調整できます document.getElementsByTagName('body')[0].style.width = "1920px"
          document.getElementsByTagName('body')[0].style.height = "1080px"
          document.getElementsByTagName('body')[0].style.transform = 'scale(' + bi + ',' + bi + ')'
          document.getElementsByTagName('body')[0].style.transformOrigin = '左上 0'
          
        }
        ページサイズを変更する()
        // ページのサイズを変更します。
        window.onresize = 関数 () {
          タイムアウトを設定します(()=>{
          ページのサイズを変更します。

          },200)  
        }        
    </スクリプト>

コード実装:

大画面の背景画像と全体的な効果を設定できる、適応型の大型コンポーネントをカプセル化します。残りは、特別にカスタマイズされたアイコンは必要ないため、基本的に echart コンポーネント ライブラリを使用します。したがって、パーソナライズはあまり行われません。

<テンプレート>
  <div id="dv-full-screen-container">
    <テンプレート>
      <スロット></スロット>
    </テンプレート>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  
  マウントされた(){
  }
}
</スクリプト>

<スタイル lang="less">
#dvフルスクリーンコンテナ{
  位置: 固定;
  上: 0px;
  左: 0px;
  オーバーフロー: 非表示;
  変換の原点: 左上;
  zインデックス: 999;
  幅:100%;
  高さ:1080pxee
}
</スタイル>

<テンプレート>
  <div class="full">
    <dv-フルスクリーンコンテナref="full">
       コンテンツ
    </dv-フルスクリーンコンテナ>
  </div>
</テンプレート>
<スクリプト>
 
'./fullscreen' から fullScreenContainer をインポートします。
エクスポートデフォルト{
  コンポーネント:{
    'dv-フルスクリーンコンテナ':fullScreenContainer
  },
  マウントされた(){
   
  },
  作成された(){
  },
  方法:{
    
  }
}
</スクリプト>
<スタイル lang="less">
。満杯 {
  #dvフルスクリーンコンテナ{
    背景:#000222 url(../assets/images/bg.png);
    背景サイズ: 100% 100%;
    オーバーフロー:自動;
    
    .full-big-border {
      。コンテンツ {
        パディング: 0 38px 0 38px;
        幅: calc(100% - 76px);
        ディスプレイ: フレックス;
      }
    }
  }
  
}
</スタイル>

要約:

以上が、大画面への全体的な適応を自分で実現する効果と方法です。最初は面倒くさがってデータビューを直接使用したいかもしれませんが、必要なときに実現するのが難しい場合や、肥大化したコンポーネントライブラリのセットをインストールしたい場合など、強迫性障害を和らげるのが難しい場合があります。もっと良いカプセル化方法があればいいのですが。私は表面のほんの少しだけ実装しましたが、これから始める学生の役に立つことを願っています。

Vue 大画面データ表示例の記事はこれで終了です。Vue 大画面データに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue+echarts+datav 大画面データ表示と中国地図の省、市、郡のドリルダウン機能の実装
  • vueはデータの問題を修正し、リアルタイムで操作を表示します
  • VueでdataV大画面を使用する方法

<<:  ウェブサイトのパフォーマンスを向上させるためのコンテンツ関連の10の原則

>>:  DOCTYPE宣言の機能と使い方の詳しい説明

推薦する

JavaScript データ型の詳細な説明

目次1. リテラル1.1 数値リテラル1.2 浮動小数点リテラル1.3 特別な値1.4 文字列リテラ...

Linuxでテキスト比較を実現するコツを教えます

序文コードを書く過程で、必然的にコードに何らかの変更を加えることになります。しかし、変更を加えるとき...

Node.js で Bash スクリプトを書くための究極のソリューション

目次序文zxライブラリ$`コマンド` CD()フェッチ()質問()寝る()スローしない()チョークフ...

JavaScript はクリックして画像の形状を変更する (変換アプリケーション) を実装します。

JavaScriptをクリックすると画像の形状が変わります(変形の応用)。参考までに具体的な内容は...

CSS 共通スタイルで二重矢印を描画するサンプルコード

1. 単一の矢印への複数の呼び出し単一の矢印を実装したら、二重矢印を実装するのは簡単です。上では、単...

MySQL データベース アカウントの作成、認証、データのエクスポートおよびインポート操作の例

この記事では、MySQL データベースでのアカウントの作成、認証、データのエクスポートおよびインポー...

Vueの監視プロパティの詳細

目次1.watchは一般的なデータ(数値、文字列、ブール値)の変更を監視します。 1. 数値2. 文...

CSS3の新しい背景プロパティの詳細な説明

これまで、CSS の背景の属性には、color、image、repeat、attachment、po...

MySql データ型チュートリアル例の詳細な説明

目次1. 概要2. MySQLデータ型の詳細な説明1) 文字列型2) 整数型3) 浮動小数点型4) ...

CentOS 7でsambaを使用してフォルダーを共有するための完全な手順

序文Samba は、サーバー プログラムとクライアント プログラムで構成され、Linux システム上...

JavaScriptプロトタイプチェーンを理解する

目次1. プロトタイプとプロトタイプチェーンの平等関係を理解する2: プロトタイプとプロトタイプ チ...

sqlite3 から mysql に移行するときに起こりうる問題のコレクション

簡単な説明適切な読者: モバイル開発sqlite3 データを mysql に移行する場合、多くの構文...

DOM操作テーブルの例(DOMはテーブルを作成します)

1. HTML タグを使用してテーブルを作成します。コードをコピーコードは次のとおりです。 <...

例によるMySql CURRENT_TIMESTAMP関数の分析

時間フィールドを作成するときデフォルトのCURRENT_TIMESTAMPデータを挿入する際、このフ...

Dockerの基本的なネットワーク構成の詳細な説明

外部アクセスポートをランダムにマップする -P フラグを使用すると、Docker は 49000 か...