屏幕尺寸變化時如何更改 vue.js 數據值？

Question

<div id="app">
    <ul>
        <!-- On mobile devices use short heading -->
        <template v-if="mobile == 1">
            <li><a href="#">Heading</a></li>
        </template>
        <!-- Else use long heading -->
        <template v-else-if="mobile == 0">
            <li><a href="#">Heading Long</a></li>
        </template>
    </ul>
</div>

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script>
    var app = new Vue({
            el: '#app',
            data: {
                mobile: 0
            }
});

當 (max-width: 547px) 的屏幕斷點變為活動時，我正在尋找一種方法來更改 'mobile' 的值。 並在此移動斷點變為非活動狀態（屏幕超過 547 像素）時將其更改回來。 我通常使用 skel ( https://github.com/ajlkn/skel ) 來處理屏幕斷點，但我無法從 Vue 內部訪問 skel，反之亦然。 我會放棄使用 Vue 來完成這個特定的任務，但是 display: none 和 display: block 會破壞我的演示文稿——將我的元素變成一個塊。

Answer 1

如果您正在使用Vuetify ，您可以根據 xs、sm、md、lg、xl（在Material Design 中指定）的內置breakpoints以編程方式調整數據值，如下所示：

computed: {
  mobile() {
    return this.$vuetify.breakpoint.sm
  },
}

當屏幕寬度小於 600px 時， mobile將變為true 。

您的代碼將是這樣的（我還將if語句直接移到<li>元素上）：

<div id="app">
    <ul>
        <!-- On mobile devices use short heading -->
        <li v-if="mobile"><a href="#">Heading</a></li>
        <!-- Else use long heading -->
        <li v-else><a href="#">Heading Long</a></li>
    </ul>
</div>

Answer 2

您可以使用如下所示的 onorientationchange事件：

methods: {
   detectOrientationChange() {
      switch(window.orientation) {  
         case -90 || 90:
            // landscape
            this.mobile = false;
            break; 
         default:
            // portrait
            this.mobile = true;
            break; 
      }
   }
},
mounted() {
   this.$nextTick(() => {
      window.addEventListener('onorientationchange', this.detectOrientationChange)
   }
},
created() {
   this.detectOrientationChange(); // when instance is created
}

注意：由於該事件已被棄用，因此在撰寫本文時它只能與移動瀏覽器一起使用。

---

要檢測當前瀏覽器的屏幕方向， 請查看這篇文章。

Answer 3

檢查這個庫： https : //github.com/apertureless/vue-breakpoints

<div id="app">
    <ul>
        <!-- On mobile devices use short heading -->
        <hide-at breakpoint="medium">
        <template v-if="mobile == 1">
            <li><a href="#">Heading</a></li>
        </template>
        </hide-at>
        <!-- Else use long heading -->
        <show-at breakpoint="mediumAndAbove">
        <template v-else-if="mobile == 0">
            <li><a href="#">Heading Long</a></li>
        </template>
        </show-at>
    </ul>
</div>

或者干脆使用media queries （ https://www.w3schools.com/css/css3_mediaqueries_ex.asp ）

CSS :

@media screen and (max-width: 600px) {
    #app ul il:first-of-type {
        visibility: visible;
    }
    #app ul il:last-of-type {
        visibility: hidden;
    }
}


@media screen and (max-width: 992px) {
    #app ul il:first-of-type {
        visibility: hidden;
    }
    #app ul il:last-of-type {
        visibility: visible;
    }
}

當然，由您決定在什么斷點上顯示什么以及隱藏什么，我希望這會有所幫助。