vue-iphonex

    1.0.1 • Public • Published

    安装

    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监听initrotate事件 init事件会返回Boolean类型,true表示是iPhoneX rotate事件会返回String类型,分别为left:刘海在左,right:刘海在右,''空字符串为垂直方向

    License

    The MIT License

    效果图

    是iPhoneX时,为底部添加34px

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

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

    Install

    npm i vue-iphonex

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • yongmaple