显示用于移动浏览器的不同Vuejs组件

vue.js Vue.js

阿飞GilGreen

2020-03-13

我正在使用Vue 2.0开发SPA。到目前为止，开发的组件是针对“桌面”浏览器的，例如，

Main.vue，ProductList.vue，ProductDetail.vue，

我想要移动浏览器的另一组组件，例如MainMobile.vue，ProductListMobile.vue，ProductDetailMobile.vue，

我的问题是，在移动浏览器中查看时，我应该在哪里以及如何使SPA渲染组件的移动版本？

请注意，我明确希望避免使我的组件具有响应能力。我想保留两个单独的版本。

谢谢，

第1538篇《显示用于移动浏览器的不同Vuejs组件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
逆天前端 2020.03.13

我有一个主意，请使用可检测到浏览器是移动设备还是台式机的mixin（此答案中 js代码示例）。然后使用v-if，例如

<production-list v-if="!isMobile()"></production-list>
<production-list-mobile v-else></production-list-mobile>

所以这是https://jsfiddle.net/Ldku0xec/上的示例

Green小小 2020.03.13

我有Vue.js的简单解决方案：

<div v-if="!isMobile()">
  <desktop>
  </desktop>
</div>
<div v-else>
  <mobile>
  </mobile>
</div>

和方法：

methods: {
 isMobile() {
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
     return true
   } else {
     return false
   }
 }
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android