모바일에서만 클래스 추가 - Vuej 및 부트스트랩

모바일에서만 클래스 추가 - Vuej 및 부트스트랩

모바일로만 클래스를 추가하고 싶습니다.이전에 vuetify를 사용한 적이 있지만 vue에서는 더 어려울 것 같습니다.

코드:

<div class="{'mobileSnackBar': breakpoint.xs}">
  <p> This is my snackbar </p>
</div>

Vuetify로 당신이 가지고 있는$vuetify.breakpoint.xs하지만 부트스트랩에서 어떻게 비슷한 효과를 얻을 수 있을까요?아니면 다른 방법을 추천해 주세요.

vuetify를 사용하면 다음 작업을 수행할 수 있습니다.

computed: {
    is_screen_small() {
        return this.$vuetify.breakpoint.smOnly
    },
}

그리고 다음과 같이 조합합니다.

<div class="{'mobileSnackBar': is_screen_small}">
  <p> This is my snackbar </p>
</div>

중단점에 대한 자세한 내용은 vuetify 문서를 참조하십시오.

그러나 부트스트랩에서는 미디어 쿼리를 사용하는 방법밖에 없는 것으로 알고 있습니다.

// Small devices 
@media (max-width: 760px) { 
  //Add your style here
 }

단, 부트스트랩과 관련이 없는 솔루션이 있습니다.

computed: {
  is_mobile() {
    const isMobile = window.matchMedia("only screen and (max-width: 760px)")
    return isMobile.matches ? true : false
  }
}

다음과 같이 조합합니다.

<div class="{'mobileSnackBar': is_mobile}">
  <p> This is my snackbar </p>
</div>

부트스트랩의 또 다른 방법은 다음과 같은 요소를 표시/숨기기 위해 브레이크포인트 클래스를 사용하는 것입니다.

<div class="mobileSnackBar d-sm-none">
   <p> This is my snackbar </p>
</div>
<div class="d-none d-sm-block">
   <p> This is my snackbar </p>
</div>

html보다는 컴포넌트에 더 적합합니다.또, 가장 깨끗한 솔루션은 아닐지도 모르지만, 동작합니다.

언급URL : https://stackoverflow.com/questions/53361181/add-class-only-on-mobile-vuejs-and-bootstrap