import Vue from 'vue'
Vue.directive('isIphoneX', {
    bind: function (el, binding) {
        const _local = 'ios'
        let isIphoneX = false
        if (_local === 'ios' && window.screen.height) {
            isIphoneX = window.screen.height > 750 ? true : false
        }
        if (isIphoneX) {
            if (binding.value === 'margin') {
                console.log('use margin')
                el.setAttribute('style', 'margin-bottom: 8vw !important;')
            } else if (binding.value === 'height') {
                console.log('use height')
                el.setAttribute(
                    'style',
                    ` padding-bottom: 15vh !important;min-height: 85vh !important;`
                )
            } else {
                console.log('use padding')
                el.setAttribute('style', 'padding-bottom: 8vw !important;')
            }
        } else {
            if (binding.value === 'height') {
                el.setAttribute(
                    'style',
                    ` padding-bottom: 11vh !important;min-height: 89vh !important;`
                )
            }
        }
    },
    update: function (el, binding) { }
})

此CSS可兼容IPHONEX也没固定定位时出现的弹动：padding-bottom: env(safe-area-inset-bottom);

 <div v-isIphoneX class="iphoneX"/>

<style>
.iphoneX{
  padding-bottom: env(safe-area-inset-bottom);
}
</style>