CSSメディアクエリは素晴らしいです。 ブラウザのビューポートのサイズに基づいて、コンポーネントのスタイルを変更できます。 しかし、それらは必ずしもあなたが必要とするものではありません。 ウィンドウの幅ではなく、コンポーネント自体の幅に基づいてコンポーネントのスタイルを変更したい場合があります。 これで、CSS Element Queriesが最終的に最終的な仕様になり、常緑のブラウザーで出荷されるまで待つことができますが、Vue.jsコンポーネントには、はるかに少ない待機時間を必要とするはるかに簡単なソリューションがあります: vue-sensitive-component [X243X ]。

このガイドは、Vue.jsプロジェクトがすでに設定されていることを前提としています。 そうでない場合は、先に進み、 vue-cli3.0とデフォルトのオプションを使用して新しいVueプロジェクトを開始します。 $ vue create my-new-projectとEnterキーを数回押すだけで十分です。

vue-sensitive-componentsをインストールします

vue-responsive-componentsは、 ResizeObserver を使用して( MutationObserver ベースのポリフィルを介して)要素のサイズが変更されるタイミングをパフォーマンス的に判断するライブラリです。 さあ、今すぐライブラリを入手してください。

$ npm install --save vue-responsive-components

レスポンシブコンポーネント

先に進んで、コンポーネントディレクトリにResponsive.vueというファイルを作成しましょう。 はい、それは私が考えることができる最も創造的な名前についてです。

components / Responsive.vue
<template>
  <!--
    v-responsive takes a set of objects
    where the keys are class names and the values are
    functions that take an element and return a boolean.
    If the functions return true, then the classes will be applied.

    In this case, if the component is less than 800 pixels wide,
    the `small` class will be applied.
    If the component is less than 400 pixels wide, both the `small`
    and `tiny` classes will be applied.
  -->
  <div class="responsive-component" v-responsive="{
    tiny: el => el.width < 400,
    small: el => el.width < 800
  }">
  </div>
</template>

<script>
import { ResponsiveDirective } from "vue-responsive-components"

export default {
  directives: {
    responsive: ResponsiveDirective
  }
}
</script>

<style scoped>
.responsive-component {
  height: 200px;
  background: red;
}

/* Applied when the component is less than 800px wide. */
.responsive-component.small {
  background: green;
}

/* Applied when the component is less than 400px wide. */
.responsive-component.tiny {
  background: blue;
}
</style>

了解しました。これは、世界で最も退屈なコンポーネントです。 要素のサイズが800ピクセル未満でない限り、これは大きな赤いボックスになります。800ピクセル未満の場合は緑色のボックスになり、さらに小さくなった場合、たとえば400ピクセルの場合は青いボックスになります。 イッピー。

もちろん、これらの各クエリは引数として関数を受け取るため、それらを使用してはるかに高度なことを行うことができます。

では…コンポーネントをどのようにテストしますか?

先に進み、App.vue(またはレスポンシブコンポーネントを内部に埋め込みたいコンポーネント)を開きます

App.vue
<template>
  <!--
    This gives us convenient resize handles to shrink and resize
    the parent of the responsive component.
  -->
  <div id="app" style="resize: horizontal; overflow: hidden;">
    <Responsive></Responsive>
  </div>
</template>

<script>
import Responsive from './components/Responsive.vue'

export default {
  components: {
    Responsive
  }
}
</script>

これで、色付きのボックスコンポーネントが、親コンポーネントのサイズを変更すると色が変わることがわかります。

これはあらゆる種類のものに使用できます! レイアウトに関係なく、環境に動的に適応するカードなどを一覧表示します。 想像力を使って!

vue-sensitive-componentsの詳細については、公式ドキュメントをご覧ください。