1.0.1 • Published 6 years ago
vue-iphonex v1.0.1
安装
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
表示是iPhoneXrotate
事件会返回String
类型,分别为left
:刘海在左,right
:刘海在右,''
空字符串为垂直方向