vue-iphonex

安装

npm安装:

 
$ npm install vue-iphonex --save
 

使用

//main.js
 
import VueIphonex from 'vue-iphonex'
 
Vue.use(VueIphonex)

<div id="root" v-iphonex>
        <div class="playground">
            <div :class="['left',fringeDirection == 'left' ? 'fringe_left' : '']"></div>
            <div :class="['right',fringeDirection == 'right' ? 'fringe_right' : '']"></div>
            <div :class="['bottom',isIphonex && !fringeDirection ? 'x_bottom' : '']"></div>
        </div>
    </div>
    <script>
        Vue.use(VueIphonex)
        new Vue({
            el: '#root',
            data(){
                return {
                    isIphonex: false,
                    fringeDirection: ''
                }
            },
            mounted: function() {
                let _this = this
                this.$iphonex.$on('init', (v) => {
                    _this.isIphonex = v
                })
                this.$iphonex.$on('rotate',(v)=>{
                    _this.fringeDirection = v
                })
            }
        })
    </script> 

注意加上v-iphonex指令 使用this.$iphonex.$on监听init和rotate事件 init事件会返回Boolean类型，true表示是iPhoneX rotate事件会返回String类型，分别为left：刘海在左，right：刘海在右，''空字符串为垂直方向

License

The MIT License

效果图

是iPhoneX时，为底部添加34px

是iPhoneX且刘海在左时，为左边添加44px

是iPhoneX且刘海在右时，为右边添加44px