vue刘海屏兼容组件

vue 刘海屏兼容组件

/* 无返回按钮的标头 */

<template><div v-if="GLOBAL.evnType === GLOBAL.ENV_TYPES.APP_IOS || GLOBAL.evnType === GLOBAL.ENV_TYPES.APP_ANDROID" class='stateBox' :class="{'ios-head':(GLOBAL.evnType === GLOBAL.ENV_TYPES.APP_IOS)}"></div>
</template>
<script>
// 用于兼容 某些安卓机的 顶部安全区写法不支持
export default {name: 'stateBox'
}
</script>
<style lang="stylus" scoped>.stateBoxwidth 100%height 0.2rem.ios-headheight constant(safe-area-inset-top)height env(safe-area-inset-top)
</style>

vue刘海屏兼容组件相关推荐

uniapp兼容iPhoneX头部状态栏(刘海屏）和底部小横条
文章目录 (一)兼容 iphoneX 头部状态栏方式一:封装状态栏组件 statusBar.vue 方式二:不封装组件方式三:使用 Vuex 管理完整demo展示: (二)兼容 iPhoneX ...
android兼容小米xiaomi刘海屏解决方案
引用自小米官方文档,这里缩减了一些内容,捡取重要内容. 转载请标明出处: https://blog.csdn.net/DJY1992/article/details/80688376 本文出自:[奥特 ...
Vue首屏性能优化组件
Vue首屏性能优化组件简单实现一个Vue首屏性能优化组件,现代化浏览器提供了很多新接口,在不考虑IE兼容性的情况下,这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情,当然为了考 ...
cordova应用兼容iOS11+和iPhoneX刘海屏
前言最近开发的cordova应用需要兼容 iOS 11+ ,以及 iPhone X 的刘海屏,查了一些资料,这里做下总结. 首先看下正常打包后的App界面,上下有明显的黑色区域,并没有占满整个屏幕. ...
iPhoneX适配问题 iOS刘海屏安全区域处理 IOS小黑条处理 IOS兼容处理
IphoneX适配问题 iOS刘海屏安全区域处理前言适配前需要了解的几个关键字安全区域 viewport-fit env() 和 constant() 适配的方法第一步设置网页在可视区的布 ...
android兼容oppo手机刘海屏解决方案
引用自OPPO官方文档,这里缩减了一些内容,选取重要内容,包括oppo沉浸式的兼容. 转载请标明出处: https://blog.csdn.net/DJY1992/article/details/80 ...
vue中is属性搭配vuedraggable插件实现可拖动可视化大屏展示组件的自定义配置功能
最近有这样一个需求,将大屏上展示的东西都封装成独立的组件让用户自己可以自定义配置自己的组件位置及想要展示的组件,第一个我就想到通过is来实现,分享下我的思路及部分代码供大家参考. 先看下大概布局: 如 ...
android 兼容所有刘海屏的方案大全
转载请标明出处: https://blog.csdn.net/DJY1992/article/details/80689632 本文出自:[奥特曼超人的博客] 推荐: - ios兼容iphonex刘海 ...
Vue大屏可视化DataV组件库
前言最近需要做一个 Vue大屏数据可视化的项目,找资料的时候发现一个很棒的 vue大屏数据可视化插件DataV组件库,可使我们大屏看起来更高端. DataV介绍网站链接:http://datav. ...

vue刘海屏兼容组件

vue 刘海屏兼容组件

vue刘海屏兼容组件相关推荐

最新文章

热门文章