[移动开发]h5头部组件封装

H5头部组件封装

<div>
<div :style="`padding-top:${paddingTop}px`">
<van-nav-bar />
</div>
</div>
setup(){
const paddingTop = computed(()=>{
return store.state.height
}

创建utils文件夹，env.js

export const getSafeAreaHeight=()=>{
let result = /headervieWheight=(\d+)/.exec(navigator.userAgent.toLowerCase());
if(result){
return parseInt(result[1]);
}else{
return 0
}}
//判断是安卓还是ios

export const getSysName = ()=>{
let ua = navigator.userAgent.toUpperCase();
if(ua.indexOf("ANDROID" !==-1"){
return "ANDROID"
}else if(ua.indexOf("IPHONE" !==-1 || ua.indexOf("IPAD") !==-1){
return "IOS"
}else{
return "UNKOWN";
}

store中引入

import {getSafeAreaHeight} from "@utils/env.js"
state(){
return{
height:getSafeAreaHeight()
}
}