164 lines
3.6 KiB
Vue
164 lines
3.6 KiB
Vue
<template>
|
|
<view class="fu-navbar" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px',color: color,background:bg,paddingRight:PR +'px',top:top + 'px'}]">
|
|
<view class="flex align-center fu-content" :style="[{height: CustomBar-StatusBar+'px'}]">
|
|
<view class="fu-back text-xl text-lg flex align-center" v-if="isBack" @tap="back">
|
|
<text class="cuIcon-back"></text>
|
|
<text class="text-lg" v-if="isBackText">{{$t('返回')}}</text>
|
|
</view>
|
|
<view class="cu-bar search fu-search" :style="[{minHeight: CustomBar-StatusBar+'px'}]" v-if="isSearch">
|
|
<view class="search-form round">
|
|
<text class="cuIcon-search"></text>
|
|
<input @confirm="handleConfirm" v-model="keywords" :adjust-position="false" type="text" :placeholder="placeholder" confirm-type="search"></input>
|
|
<view class="action" @click="clearKeywords" v-if="keywords.length > 0">
|
|
<text class="cuIcon-close text-666"></text>
|
|
<!-- <text>取消</text> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fu-title text-lg text-center text-cut" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px',lineHeight:CustomBar-StatusBar+'px'}]" v-if="!isSearch">
|
|
{{title}}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
/**
|
|
* @author 邓东方
|
|
* @description 头部导航组件
|
|
*
|
|
*/
|
|
export default {
|
|
name:"fu-navbar",
|
|
props:{
|
|
// 是否使用背景图 https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg
|
|
bgImage:{
|
|
type:String,
|
|
default:''
|
|
},
|
|
// 字体颜色
|
|
color: {
|
|
type:String,
|
|
default:'#333333'
|
|
},
|
|
// 背景色 当背景图存在时，背景色不再显示
|
|
bgColor:{
|
|
type:String,
|
|
default:'#ffffff'
|
|
},
|
|
//是否显示返回箭头和左边的文字
|
|
isBack: {
|
|
type: [Boolean, String],
|
|
default: true
|
|
},
|
|
//开启显示左边的文字
|
|
isBackText: {
|
|
type: [Boolean, String],
|
|
default: false
|
|
},
|
|
// 搜索关键字
|
|
placeholder:{
|
|
type:String,
|
|
default(){
|
|
return global.i18n.t('请输入搜索关键字')
|
|
}
|
|
},
|
|
// 是否显示搜索
|
|
isSearch:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
// 标题
|
|
title:{
|
|
type:String,
|
|
default(){
|
|
return global.i18n.t('标题')
|
|
}
|
|
},
|
|
top:{
|
|
type:[String,Number],
|
|
default:0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
StatusBar: this.StatusBar,
|
|
CustomBar: this.CustomBar,
|
|
keywords:''
|
|
};
|
|
},
|
|
computed:{
|
|
// 导航背景
|
|
bg(){
|
|
let bg = `url('${this.bgImage}') no-repeat top/cover`;
|
|
return this.bgImage ? bg : this.bgColor;
|
|
},
|
|
// 右侧padding值 兼容小程序
|
|
PR(){
|
|
let pr = uni.upx2px(32);
|
|
let w = 0;
|
|
// #ifdef MP-WEIXIN
|
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
|
w = menuButtonInfo.width;
|
|
// #endif
|
|
console.log(pr,w)
|
|
return pr + w;
|
|
}
|
|
},
|
|
methods:{
|
|
/**
|
|
* @description 返回
|
|
*/
|
|
back(){
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
},
|
|
clearKeywords(){
|
|
this.keywords = '';
|
|
this.$emit('change',this.keywords);
|
|
},
|
|
/**
|
|
* @description 搜索事件
|
|
*/
|
|
handleConfirm(){
|
|
this.$emit('change',this.keywords);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.fu-navbar{
|
|
padding-left: 32rpx;
|
|
box-sizing: border-box;
|
|
position: sticky;
|
|
z-index:99999;
|
|
}
|
|
.fu-back{
|
|
margin-right: 32rpx;
|
|
height: 100%;
|
|
}
|
|
.fu-search {
|
|
width: 100%;
|
|
flex-basis: 1;
|
|
.search-form{
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
}
|
|
.fu-content{
|
|
position: relative;
|
|
}
|
|
.fu-title{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 50%;
|
|
}
|
|
.cu-bar .action:last-child{
|
|
margin-right:16rpx;
|
|
}
|
|
</style>
|