Vue 및 부트스트랩:미디어 중단점에 따라 다른 컴포넌트를 표시하는 방법최신 컨센서스란?

Vue 및 부트스트랩:미디어 중단점에 따라 다른 컴포넌트를 표시하는 방법최신 컨센서스란?

앱에 대한 첫 번째 "모바일 우선" 접근법(보통 데스크톱에서 시작하여 과거에는 CSS Media 쿼리를 사용하여 작업)을 실행하고 있으며, 오늘날의 응답성 높은 개발 환경에서 다음과 같은 시나리오를 처리하는 가장 좋은 방법이 무엇인지 고민하고 있습니다.

다음과 같은 컴포넌트가 있습니다.

<b-form-spinbutton id="sb-vertical" v-model="value" inline></b-form-spinbutton>

위의 컴포넌트는 디바이스가 특정 브레이크 포인트(720px 이하)보다 낮은 경우에만 표시되도록 합니다.

그 후, 그 이상의 뷰포트는 다음 컴포넌트를 표시합니다.

<b-form-spinbutton id="sb-vertical" v-model="value" vertical></b-form-spinbutton>

주의:vertical그리고.inline상기 코드의 소품.

기존 CSS 미디어 쿼리에 맡기는 것이 가장 좋습니까, 아니면 템플릿 조건(v-if)을 사용할 수 있습니까?등)을 클릭합니다.

저는 이 퀴즈톤에 대한 피드백을 바탕으로 앱을 처음부터 구축하기 때문에 컨센서스를 얻을 수 있을 것이라고 생각했습니다.감사해요!

오브젝트를 만드는 기본적 활용도(개선할 여지가 있는 것)를 썼습니다.Import하여 템플릿에서 사용할 수 있습니다.현재 중단점을 기준으로 소품을 다시 바꾸고 싶을 때 사용합니다.

개체에는 다양한 중단점과 현재 활성 중단점인지 여부가 포함됩니다.마찬가지로 네스트된 것이 포함되어 있습니다.lt(미만) 및gt(than) 오브젝트: 특정 중단점 위 또는 아래에 무언가를 표시할 때 사용할 수 있습니다.

SSR(Nuxt 및 Simliar)에 대해서는 테스트되지 않았으며 액세스하기 때문에 작동하지 않을 수 있습니다.window.

브레이크 포인트 Util.js

import Vue from "vue";

const state = Vue.observable({
  screen: {}
});

/* This assumes you're using default bootstrap breakpoint names */
/* You need to hardcode the breakpoint values if you want to support IE11 */
const style = getComputedStyle(document.body);
const xs = style.getPropertyValue("--breakpoint-xs").replace("px", "");
const sm = style.getPropertyValue("--breakpoint-sm").replace("px", "");
const md = style.getPropertyValue("--breakpoint-md").replace("px", "");
const lg = style.getPropertyValue("--breakpoint-lg").replace("px", "");
const xl = style.getPropertyValue("--breakpoint-xl").replace("px", "");

function onResize() {
  const width = window.innerWidth;

  /* Not really sure how to properly define gt or lt */
  state.screen = {
    xs: width >= xs && width < sm,
    sm: width >= sm && width < md,
    md: width >= md && width < lg,
    lg: width >= lg && width < xl,
    xl: width >= xl,
    /* Greater than */
    gt: {
      xs: width >= xs,
      sm: width >= sm,
      md: width >= md,
      lg: width >= lg,
      xl: width >= xl
    },
    /* Less than */
    lt: {
      xs: width < sm,
      sm: width < md,
      md: width < lg,
      lg: width < xl,
      xl: width < 9999
    }
  };
}

/* Might want to debounce the event, to limit amount of calls */
window.onresize = onResize;
onResize();

export default state;

이렇게 Import할 수 있습니다(템플릿에 표시하여 반응성을 유지할 수 있는 가장 좋은 방법을 찾을 수 없습니다).

랜덤 컴포넌트표시하다

<template>
 <!-- Some HTML -->
</template>

<script>
import breakpoints from "@/utils/breakpoints";

export default {
  computed: {
    breakpoints: () => breakpoints.screen
  }
};
</script>

샘플 스니펫(스니펫에 맞도록 약간 고쳐쓰기)

/* BreakpointUtil.js */
const state = Vue.observable({
  screen: {}
});

/* This assumes you're using default bootstrap breakpoint names */
/* You need to hardcode the breakpoint values if you want to support IE11 */
const style = getComputedStyle(document.body);
const xs = style.getPropertyValue("--breakpoint-xs").replace("px", "");
const sm = style.getPropertyValue("--breakpoint-sm").replace("px", "");
const md = style.getPropertyValue("--breakpoint-md").replace("px", "");
const lg = style.getPropertyValue("--breakpoint-lg").replace("px", "");
const xl = style.getPropertyValue("--breakpoint-xl").replace("px", "");

function onResize() {
  const width = window.innerWidth;

  /* Not really sure how to properly define gt or lt */
  state.screen = {
    xs: width >= xs && width < sm,
    sm: width >= sm && width < md,
    md: width >= md && width < lg,
    lg: width >= lg && width < xl,
    xl: width >= xl,
    /* Greater than */
    gt: {
      xs: width >= xs,
      sm: width >= sm,
      md: width >= md,
      lg: width >= lg,
      xl: width >= xl
    },
    /* Less than */
    lt: {
      xs: width < sm,
      sm: width < md,
      md: width < lg,
      lg: width < xl,
      xl: width < 9999
    }
  };
}

/* Might want to debounce the event, to limit amount of calls */
window.onresize = onResize;
onResize();
/* BreakpointUtil.js END */

new Vue({
  el: "#app",
  computed: {
    screen: () => state.screen 
  }
});

<link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-card no-body>
    <b-tabs pills card :vertical="screen.lt.sm">
      <b-tab title="Tab 1" active>
        <b-card-text>Tab contents 1</b-card-text>
      </b-tab>
      <b-tab title="Tab 2"><b-card-text>Tab contents 2</b-card-text></b-tab>
      <b-tab title="Tab 3"><b-card-text>Tab contents 3</b-card-text></b-tab>
    </b-tabs>
  </b-card>
</div>

언급URL : https://stackoverflow.com/questions/62674742/vue-and-bootstrap-how-to-show-different-components-based-on-media-breakpoint-w