148 lines
2.5 KiB
Vue
148 lines
2.5 KiB
Vue
<template>
|
||
<view :style="mixinVariableStr" >
|
||
<view class="placeholder"
|
||
v-if="fixedTop"
|
||
:class="{
|
||
'safe-area':safeAreaTop
|
||
}"
|
||
></view>
|
||
<view class="container"
|
||
:class="{
|
||
'safe-area':safeAreaTop,
|
||
'fixed':fixedTop
|
||
}"
|
||
>
|
||
<view class="nav-bar h-flex-x" :class="{
|
||
'show-line':showBottomLine
|
||
}">
|
||
<view class="side h-flex-x h-flex-left">
|
||
<view class="block minor" v-if="showLeft"></view>
|
||
</view>
|
||
<view class="h-flex-item-grow h-flex-x h-flex-center">
|
||
<view class="block general"></view>
|
||
</view>
|
||
<view class="side h-flex-x h-flex-right">
|
||
<view class="block general" v-if="showRight"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
/**
|
||
* NavBar 顶部导航
|
||
* @description 页面顶部的导航栏。
|
||
* @tutorial 待完善
|
||
*
|
||
* @property {Boolean} safeAreaTop 是否开启顶部安全区域 （默认 false ）
|
||
* @property {Boolean} fixedTop 是否开启顶部固定（默认 false ）
|
||
* @property {String | Number} zIndex 固定定位显示层级 （默认 1 ）
|
||
* @example <sk-nav-bar></sk-nav-bar>
|
||
*/
|
||
|
||
import cssVariable from "../mixin/css-variable.js";
|
||
|
||
export default {
|
||
mixins:[cssVariable],
|
||
props:{
|
||
safeAreaTop:{
|
||
type: Boolean,
|
||
default:false
|
||
},
|
||
fixedTop:{
|
||
type: Boolean,
|
||
default:false
|
||
},
|
||
zIndex:{
|
||
type: Number | String,
|
||
default:"1"
|
||
},
|
||
showBottomLine:{
|
||
type: Boolean,
|
||
default:false
|
||
},
|
||
showLeft:{
|
||
type: Boolean,
|
||
default:true
|
||
},
|
||
showRight:{
|
||
type: Boolean,
|
||
default:false
|
||
},
|
||
},
|
||
computed:{
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "../libs/global.scss";
|
||
|
||
.placeholder{
|
||
box-sizing: content-box;
|
||
width: 100%;
|
||
height: 88rpx;
|
||
}
|
||
|
||
.container{
|
||
background-color: var(--background);
|
||
}
|
||
|
||
.safe-area{
|
||
padding-top: var(--status-bar-height);
|
||
}
|
||
|
||
.nav-bar{
|
||
width: 100%;
|
||
padding: 0 30rpx;
|
||
height: 88rpx;
|
||
position: relative;
|
||
|
||
&.show-line::after{
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
height: 1px;
|
||
background-color: var(--general);
|
||
width: 100%;
|
||
z-index: 1;
|
||
transform: scaleY(.5);
|
||
}
|
||
|
||
.side{
|
||
width: 100rpx;
|
||
}
|
||
|
||
.block{
|
||
border-radius: 0;
|
||
height: 24rpx;
|
||
width: 70%;
|
||
}
|
||
|
||
.general{
|
||
background-color: var(--general);
|
||
}
|
||
|
||
.minor{
|
||
background-color: var(--general);
|
||
}
|
||
}
|
||
|
||
.fixed{
|
||
position: fixed;
|
||
z-index: var(--zIndex);
|
||
top: 0;
|
||
top:var(--window-top);
|
||
left: 0;
|
||
width: 100%;
|
||
}
|
||
</style>
|