You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.1 KiB
53 lines
1.1 KiB
<template> |
|
<view class="mz-header-container" :style="{top:(offsetTop === '0')?offSetDefault:offsetTop,position:type}"> |
|
<view class="safe-area-top" :style="{height:safeHeight,display:((type !== 'sticky') || 'none')}"></view> |
|
<slot /> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import props from './props.js'; |
|
/** |
|
* header 头部 |
|
* @description 警告提示，展现需要关注的信息。 |
|
* |
|
* @property {String} title 显示的文字 |
|
*/ |
|
export default { |
|
name: 'mz-header', |
|
mixins: [props], |
|
data() { |
|
return { |
|
show: true, |
|
safeHeight:'' |
|
} |
|
}, |
|
computed: { |
|
offSetDefault(){ |
|
return uni.getSystemInfoSync().statusBarHeight+44+'px'; |
|
}, |
|
}, |
|
methods: { |
|
getSafeHeight(){ |
|
new Promise((resolve,reject) => { |
|
resolve(uni.getSystemInfoSync().statusBarHeight); |
|
}).then((height) => { |
|
this.safeHeight = height+'px'; |
|
}) |
|
}, |
|
}, |
|
mounted() { |
|
this.getSafeHeight(); |
|
}, |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.safe-area{ |
|
width:100%; |
|
} |
|
.mz-header-container{ |
|
width:100%; |
|
z-index: 997; |
|
} |
|
</style>
|
|
|