为移动浏览器显示不同的 Vuejs 组件 [英] Display different Vuejs components for mobile browsers

问题描述

我正在使用 Vue 2.0 开发 SPA.目前开发的组件都是针对桌面"浏览器的，比如我有

I am developing an SPA using Vue 2.0. The components developed so far are for the "desktop" browsers, for example, I have

Main.vue，产品列表.vue,ProductDetail.vue,

Main.vue, ProductList.vue, ProductDetail.vue,

我想要移动浏览器的另一组组件，例如MainMobile.vue,产品列表Mobile.vue，ProductDetailMobile.vue，

I want another set of components for the mobile browsers, such as MainMobile.vue, ProductListMobile.vue, ProductDetailMobile.vue,

我的问题是，在移动浏览器中查看时，我应该在哪里以及如何让我的 SPA 呈现组件的移动版本?

My question is, where and how do I make my SPA render the mobile version of components when viewing in a mobile browser?

请注意，我明确希望避免使我的组件具有响应性.我想保留它们的两个独立版本.

Please note that I explicitly want to avoid making my components responsive. I want to keep two separate versions of them.

谢谢，

推荐答案

我有一个想法，使用 [mixin][1] 来检测浏览器是在移动设备还是桌面上打开(此 [answer] 中的 js 代码示例)][2] )..然后使用v-if，例如

I have an idea, use a [mixin][1] which detects if the browser is opened on mobile or desktop (example for js code in this [answer][2] ).. then use v-if, for example

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

所以这里有一个关于 https://jsfiddle.net/Ldku0xec/ 的例子[1]:https://vuejs.org/v2/guide/mixins.html[2]:检测移动浏览器

so here is an example on https://jsfiddle.net/Ldku0xec/ [1]: https://vuejs.org/v2/guide/mixins.html [2]: Detecting a mobile browser

这篇关于为移动浏览器显示不同的 Vuejs 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！