You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
2.8 KiB
Vue
130 lines
2.8 KiB
Vue
<template>
|
|
<view class="w-navbar" :style="{'--w-top':$w.top+'px'}" >
|
|
<view class="w-navbar-body" :class="{'w-navbar-body-fixed':props.fixed}">
|
|
<view v-if="!props.leftHide && (props.leftBack || props.leftHome)" class="w-navbar-body-left"><slot name="left">
|
|
<view class="w-navbar-left" :class="{'w-navbar-left-bg':props.leftBg,'w-navbar-left-icon-margin':props.leftBack && props.leftHome}">
|
|
<view v-if="props.leftBack" @tap.stop.prevent="$w.back()" class="icon"><u-icon name="arrow-left" color="currentColor" size="18"></u-icon></view>
|
|
<view v-if="props.leftHome" @tap.stop.prevent="$w.uni.reLaunch({url:props.leftHomePage})" class="icon"><u-icon name="home" color="currentColor" size="18"></u-icon></view>
|
|
</view>
|
|
</slot></view>
|
|
<view v-if="!props.rightHide" class="w-navbar-body-right"><slot name="right"></slot></view>
|
|
<view class="w-navbar-body-title"><slot>{{props.title}}</slot></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
const props = defineProps({
|
|
fixed:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
|
|
title:{
|
|
type:String,
|
|
default:"页面标题",
|
|
},
|
|
leftHide:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
rightHide:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
leftBg:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
leftBack:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
leftHome:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
leftHomePage:{
|
|
type:String,
|
|
default:"/pages/index/index",
|
|
},
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.w-navbar {
|
|
position: relative;
|
|
--h:var(--height,44px);
|
|
height: calc(var(--h) + var(--w-top));
|
|
font-size: var(--font-size,calc(var(--h) * .4));
|
|
color: var(--color,var(--w-bg));
|
|
z-index: var(--z-index,var(--w-z-index));
|
|
|
|
&-body {
|
|
position: relative;
|
|
height: var(--h);
|
|
box-sizing: content-box;
|
|
padding-top: var(--w-top);
|
|
background-image: linear-gradient(to right,var(--color-1,var(--w-main)),var(--color-2,var(--w-main-light)),var(--color1,var(--w-main)));
|
|
display: flex;
|
|
|
|
&-fixed {
|
|
position: fixed;
|
|
top:0;
|
|
left:0;
|
|
right:0;
|
|
}
|
|
|
|
&-title {
|
|
height: var(--h);
|
|
width: 100%;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
pointer-events: none;
|
|
text-shadow: 1px 1px 0 #0006;
|
|
font-weight: bold;
|
|
letter-spacing: .2em;
|
|
}
|
|
&-left,&-right {
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
&-right {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
&-left {
|
|
box-sizing: content-box;
|
|
height: 20px;
|
|
min-width: 20px;
|
|
padding: 5px;
|
|
background-color: #0000;
|
|
margin-left: 5px;
|
|
border-radius: 100px;
|
|
border: solid 1px #FFF0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
&-icon-margin .icon {
|
|
margin: 0 5px;
|
|
}
|
|
&-bg {
|
|
border: solid 1px #FFF8;
|
|
background-color: #0007;
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |