7 

<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
            }
});

当（最大宽度：547px）的屏幕断点变为活动状态时，我正在寻找一种更改“移动”值的方法。并在此移动断点变为非活动状态（屏幕超过 547 像素）时将其更改回来。我通常使用 skel ( https://github.com/ajlkn/skel ) 来处理屏幕断点，但我无法从 Vue 内部访问 skel，反之亦然。我会放弃使用 Vue 来完成这个特定的任务，但是 display: none 和 display: block 会抛出我的演示文稿——将我的元素变成一个块。

4

3 回答 3

7

如果您使用的是Vuetifybreakpoints ，您可以根据xs、sm、md、lg、xl的内置（在Material Design中指定）以编程方式调整数据值，如下所示：

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

mobiletrue屏幕宽度小于 600 像素时将更改为。

然后您的代码将是这样的（我还将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>
于 2020-09-22T08:00:21.757 回答
3

您可以使用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
}

注意：由于该事件已被弃用，在撰写本文时它只能用于移动浏览器。

要检测当前浏览器上的屏幕方向，请查看这篇文章。

于 2018-03-21T19:14:10.643 回答
2

检查这个库：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;
    }
}

当然，由您决定在断点上显示什么以及隐藏什么，我希望这会有所帮助。

于 2018-03-21T19:19:34.347 回答