vuejs3 - VueJs 检测移动设备的方式，当我们需要渲染两个不同的视图时，相对于设备类型

Question

我需要根据设备类型更改要在网格视图中显示的元素数量。对于移动视图和桌面视图。我经历了很多建议，比如

最后我最终检查了方法中的设备类型。

methods: {
  isMobile() {
    if (screen.width <= 760) {
      return true
    } else {
      return false
    }
  },
},

我使用 isMobile() 方法为每个设备定义我的条件。我的问题是如何将此 isMobile() 方法用作计算属性，因为我只返回一个布尔值。并且可以在没有均匀监听器的情况下像这样使用。因为它到目前为止工作正常。但是我正在寻找一个更统一的解决方案，因为我是 VueJs 的新手。提前致谢。

score 5 · Accepted Answer

您可以使用created钩子代替方法，它将在 DOM 加载之前执行isMobile函数，这意味着您可以在加载网格数之前识别设备类型

像这样：

created(){
 isMobile() {
    if (screen.width <= 760) {
      return true
    } else {
      return false
    }
  },    
}

score 1 · Accepted Answer

1

于 2020-02-20T15:15:07.583 回答

2 回答 2