vue-cli でレスポンシブレイアウトを実装する方法

フロントエンド開発を行うと、PCとモバイル端末の適応に必然的に直面することになります。このような問題に直面して、一部の企業はモバイルはモバイル、PCはPCの2つのページを用意し、レスポンシブレイアウトはユーザーの異なるモデルに応じて異なるページを表示します。これ以上面倒なことはせずに、コードを貼り付けるだけです。

まず、この機能は vuex を利用して実装されています。まだダウンロードしていない場合は、まずダウンロードしてください。

糸を追加するvuex

レスポンシブレイアウトなので、PC側用のCSSとモバイル側用のCSSの2セットを用意する必要があります。とりあえず、PC側をコンピュータスタイル、モバイル側をモバイルスタイルと呼ぶことにします。

まず最初にやるべきことは、現在の画面の幅です

州： {
  画面幅: document.documentElement.clientWidth、
  画面の高さ: document.documentElement.clientHeight
 }

これはvuexの状態です。後で画面の幅をリアルタイムで監視するため、screenWidthを変更するメソッドも用意する必要があるため、別のミューテーションを書きました。

突然変異:
  setWidth(状態, 値) {
   state.screenWidth = 値
  },
  setHeight (状態、値) {
   state.screenHeight = 値
  }
 }

このようにして、vuexファイルが書き込まれ、APP.vueになります。このファイルの下にwindow.onresizeイベントを追加して、vuexのscreenWidth値をリアルタイムで更新する必要があります。ここでは、補助関数を使用します。

'vuex' から { mapState, mapMutations } をインポートします。

マウントされたフック関数にイベントを追加する

マウントされた（）{
  ウィンドウのサイズ変更 = () => { 
   this.setWidth(document.documentElement.clientWidth) 
  }
}

例えば、ウェブページのナビゲーションはモバイルでは下部、PCでは上部に表示する必要があるので、watchまたはcomputedを使用してnav.vueコンポーネントのscreenWidthの値を監視することができます。ここではcomputedを使用します。

<ul :class="computedPhone">//screenWidth に応じて異なるクラス名を指定します<router-link to='/file' tag="li" active-class="active">Movie</router-link>
   <router-link to='/cinma' tag="li" active-class="active">映画</router-link>
   <router-link to='/center' tag="li" active-class="active">パーソナルセンター</router-link>
</ul>

計算: {
  ...mapState('スタイルシート', ['画面幅']),
  計算された電話() {
   （this.screenWidth < 1024）の場合{
    'モバイル'を返す
   } それ以外 {
    'コンピュータ'を返す
   }
  }
 }

このように、2セットのCSSを記述することでレスポンシブレイアウトを実現できます。

これで、vue-cli でレスポンシブレイアウトを実装する方法に関するこの記事は終了です。vue-cli レスポンシブレイアウトに関する関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: