如何兼容PC和移动端

因为PC和移动端的视窗大小不同，导致UI和UE存在差异，所以在开发自定义组件的时候，往往需要同时兼顾两种设备。

前提

在学习如何调试自定义组件之前，您需要知道：

1. 自定义组件是基于 javascript 体系开发的
2. 自定义组件是基于 vue 体系开发的

兼容方式

开发两个的组件，分别使用在PC和移动端上

该方式强烈推荐。

PC

<template>
	<div>
    	这是PC端
  	</div>
</template>
<script>
    export default {
        props: ['data']
    }
</script>

移动端

<template>
	<div>
    	这是移动端
  	</div>
</template>
<script>
    export default {
        props: ['data']
    }
</script>

最后，分别在不同端的布局上使用与之对应的自定义组件。

开发一个组件，运行时适配多端

<template>
	<div :class="{'wrap-pc': isPC, 'wrap-mobile': !isPC}">
    	{{isPC ? '这是PC端' : '这是移动端'}}
  	</div>
</template>
<script>
    var UA = typeof window !== 'undefined' && window.navigator && window.navigator.userAgent.toLowerCase()
    var isAndroid = (UA && UA.indexOf('android') > 0);
    var isIOS = (UA && /iphone|iPhone|ipad|ipod|ios/.test(UA));
    var isPC = !isAndroid && !isIOS;
    export default {
        props: ['data'],
        data() {
            return {
                isPC: isPC
            }
        }
    }
</script>

最后，在不同端的布局上使用同一个自定义组件。