<template>
<div class="nav_bar_container" :style="{ height: state.height + 'px' }">
<div v-if="isShowNavBar" ref="navbarRef" class="nav_bar_wrap" :style="{
background,
position: isFixed ? 'fixed' : '',
paddingTop: state.paddingTop + 'px',
height: navHeight
}">
<div class="nav_bar_content">
<div class="nav_bar_content_box" :style="{
height: navHeight,
lineHeight: navHeight,
color: textColor ? textColor : theme === 'dark' ? '#16142d' : '#ffffff'
}">
<!-- 左边 -->
<div v-if="showNavLeft" ref="navLeftRef" class="left_box">
<slot name="navLeft">
<div class="left" @click="onback(hanldeGoBack)">
<slot name="navBackButton">
<img v-if="theme == 'dark'" src="@/assets/images/arrow-left-dark.png" alt="" />
<img v-if="theme == 'light'" src="@/assets/images/arrow-left-light.png" alt="" />
</slot>
</div>
</slot>
</div>
<!-- 中间 -->
<div v-if="!hideCenter" class="center_box" :style="{
marginLeft: state.marginNum + 'px',
marginRight: state.marginNum + 'px',
width: `calc(100% - ${state.marginNum}px - ${state.marginNum}px)`
}">
<slot>
<span>{{ title }}</span>
</slot>
</div>
<!-- 右边 -->
<div v-if="showNavRight" ref="navRightRef" class="right_box">
<slot name="navRight">
<div @click="showShare = true">
<img v-if="theme == 'dark'" src="@/assets/images/more-dark.png" alt="" />
<img v-if="theme == 'light'" src="@/assets/images/more-light.png" alt="" />
</div>
</slot>
</div>
</div>
</div>
</div>
<van-popup v-model="showShare" round position="bottom" :style="{ height: '30%' }">
<h1>分享是最高级的浪漫</h1>
<ul class="shareBtn">
<li @click="handleShare('微信好友')">
<img src="@/assets/images/WeChat.png" alt="" />
<span>微信好友</span>
</li>
<li @click="handleShare('朋友圈')">
<img src="@/assets/images/circleFriends.png" alt="" />
<span>朋友圈</span>
</li>
<li @click="handleShare('企业微信')">
<img src="@/assets/images/wecom.png" alt="" />
<span>企业微信</span>
</li>
</ul>
</van-popup>
</div>
</template>
<script>
import { get } from '@/api/server.js'
import wx from 'weixin-js-sdk'
import { sign } from "@/util/sign.js"
export default {
props: {
showNavLeft: {
type: Boolean,
default: true
},
showNavRight: {
type: Boolean,
default: false
},
isFixed: {
type: Boolean,
default: true
},
hideCenter: {
type: Boolean,
default: false
},
background: {
type: String,
default: '#f6f7fa'
},
navHeight: {
type: String,
default: '44px'
},
title: {
type: [String],
default: () => window.document.title
},
//主题 默认两种 dark 黑色按钮黑色文字 light 白色按钮白色文字
theme: {
type: String,
default: 'dark'
},
//特殊文字颜色 不传默认主题颜色
textColor: {
type: String,
default: ''
},
isShowNavBar: {
type: Boolean,
default: true
},
onback: {
type: Function,
default: (fun) => fun(),
}
},
data() {
return {
showShare: false,
state: {
height: 0,
paddingTop: 0,
navLeftWidth: 0,
navRightWidth: 0,
marginNum: 0,
isTopPage: false
}
};
},
mounted() {
this.getSystemInfo()
},
methods: {
getSystemInfo() {
this.$nextTick(() => {
this.state.height = Number(this.$refs.navbarRef?.clientHeight ?? 0)
this.state.navLeftWidth = this.$refs.navLeftRef?.clientWidth ?? 0
this.state.navRightWidth = this.$refs.navRightRef?.clientWidth ?? 0
this.state.marginNum = this.state.navLeftWidth > this.state.navRightWidth ? this.state.navLeftWidth : this.state.navRightWidth
})
},
hanldeGoBack() {
window.history.go(-1)
},
//分享
async handleShare(type) {
if (type == '微信朋友') {
}
}
}
};
</script>
<style lang="scss">
.nav_bar_container {
font-size: 12px;
width: 100%;
height: 44px;
.nav_bar_wrap {
top: 0;
left: 0;
right: 0;
z-index: 20;
.nav_bar_content {
padding: 0 12px;
.nav_bar_content_box {
position: relative;
&>div {
height: 100%;
}
.left_box,
.right_box {
position: absolute;
top: 0;
bottom: 0;
}
.left_box {
left: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Courier New', Courier, monospace;
font-size: 20px;
color: #fff;
letter-spacing: 0;
text-align: center;
font-weight: 400;
&>div {
width: 44px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
img {
width: 20px;
height: 20px;
}
}
}
.center_box {
box-sizing: border-box;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
overflow: hidden;
span {
font-family: PingFangSC-Semibold;
font-size: 17px;
color: #000000;
}
}
.right_box {
right: 0;
display: flex;
align-items: center;
justify-content: center;
span {
font-family: PingFangSC-Regular;
font-size: 14px;
font-weight: bold;
color: #333;
}
&>div {
width: 44px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
img {
width: 24px;
}
}
}
}
}
}
.van-popup--bottom {
bottom: -1px;
box-sizing: border-box;
padding: 30px;
h1 {
font-family: 'KaiTi';
font-size: 16px;
text-align: center;
margin-bottom: 20px;
}
.shareBtn {
display: flex;
li {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 25%;
img {
width: 36px;
height: 36px;
}
span {
font-size: 14px;
margin-top: 5px;
}
}
}
}
}
</style>
移动端NavBar简单封装
于 2023-11-28 11:34:29 首次发布