创建setIOSAreaMixin.js文件
import {
mapState,
mapMutations
} from 'vuex'
export default {
computed: {
...mapState("ios_area", ["globalAreaClass", 'isSafeAreaCalculated'])
},
mounted() {
if (!this.isSafeAreaCalculated) {
this.calculateSafeAreaClass();
this.setSafeAreaCalculated(true)
}
},
methods: {
...mapMutations("ios_area", ["setSafeAreaCalculated", 'setGlobalClass']),
calculateSafeAreaClass() {
// 获取设备信息
let result = uni.getSystemInfoSync().osName
// 判断设备类型
if (result == 'ios' ) {
// 计算安全区域类名
const safeAreaClass = 'setIosArea'; // 根据你的需求定义类名
// 更新 Vuex 中的数据
this.setGlobalClass(safeAreaClass)
} else {
// 非iOS设备时清空类名
this.setGlobalClass('')
}
},
},
};import {
mapState,
mapMutations
} from 'vuex'
export default {
computed: {
...mapState("ios_area", ["globalAreaClass", 'isSafeAreaCalculated'])
},
mounted() {
if (!this.isSafeAreaCalculated) {
this.calculateSafeAreaClass();
this.setSafeAreaCalculated(true)
}
},
methods: {
...mapMutations("ios_area", ["setSafeAreaCalculated", 'setGlobalClass']),
calculateSafeAreaClass() {
// 获取设备信息
let result = uni.getSystemInfoSync().osName
// 判断设备类型
if (result == 'ios' ) {
// 计算安全区域类名
const safeAreaClass = 'setIosArea'; // 根据你的需求定义类名
// 更新 Vuex 中的数据
this.setGlobalClass(safeAreaClass)
} else {
// 非iOS设备时清空类名
this.setGlobalClass('')
}
},
},
};
Vuex中存储
export default {
namespaced: true,
state: {
isSafeAreaCalculated: false,
globalAreaClass: '',
},
mutations: {
setSafeAreaCalculated(state, value) {
state.isSafeAreaCalculated = value;
},
setGlobalClass(state, value) {
state.globalAreaClass = value;
},
},
}
main.js中全局混入
import setIOSAreaMixin from './mixin/setIOSAreaMixin'
Vue.mixin(setIOSAreaMixin);
页面中使用
css
.setIosArea {
padding-bottom: calc(constant(safe-area-inset-bottom)/(1.5)) !important;
padding-bottom: calc(env(safe-area-inset-bottom)/(1.5)) !important;
}
推荐文章
发表评论