刘海屏兼容的处理

刘海屏兼容的处理

<template>
   <div>
       ...
       <div class="bottom" :class="{iphonex : isIphoneX }">
           <button>确定</button>
           <button>取消</button>
       </div>
   </div>
  
</template>
<script>
import base from 'base'
export default {
    data(){
        return{
            isIphoneX : false, //判断是否是苹果x等有刘海的系列,如果是就要在底部增加高度，给黑色控制条预留空间
        } 
    },
    beforeMount(){
        if(base.isIphoneX() || base.isIphoneXR() || base.isIphoneXSMax() ){
            this.isIphoneX = true
        }

    }

}
</script>

<style>
    .iphonex{
        margin-bottom: 30px;
    }
</style>

标签：isIphoneX,false,处理,兼容,base,isIphoneXSMax,刘海
来源： https://blog.csdn.net/weixin_43799793/article/details/117338715