vue pc端 兼容 移动端

最近开发一个项目 pc端已经开发差不多了,结果又要说兼容移动端。UI给了图后 我吐了,移动端的页面呈现和pc端有些页面差不多,有些就不一样了。

怎么办呢,秉者办法总比困难多,开始思考。

一般兼容移动端,如果你的移动端的内容只是提取了pc端主要功能,很多东西都是差不多的,只是布局不同,那么你可以直接使用media 媒体查询,来解决。

如果你的pc端和移动端,完全呈现的是不一样的,没办法,你就需要写两套了,同时需要提供两个域名,移动端和pc端部署在不同的域名上。这样是可以,但是工作量就比较大了。

我现在的情况是属于两者之间,有差不多的页面,有差距很大的。我又不想写两套,这样太麻烦了而且给的开发时间也不多。

这个时候vue的内置组件 component 就起到了很的作用。一个渲染动态组件的东西,很棒棒!

首先 你必须要判断当前是移动端还是pc端 定义一个全局方法:

  

然后 在需要展示不通页面的地方判断 当前是什么端:

同时引入移动端的组件和pc端的组件

 

最后在页面上使用component 来动态渲染需要的组件 (这里PMGathering是在data需要一个初始化的,可以是pc端的组件)

然后就ok了,你就会发现在移动端和pc端的页面是不一样的。这个方法可以结合meida 最大限度不用修改原有的pc和移动端页面差不多的页面。相对来说是可以减少很多的工作量。

猜你喜欢

转载自www.cnblogs.com/liaoyanhui/p/11465023.html