|
@@ -0,0 +1,253 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="cm-header-nav" :style="[headerNavStyle, { backgroundColor: bgColor }]">
|
|
|
|
+ <view class="cm-header" :style="[headerStyle]">
|
|
|
|
+ <!-- 左侧按钮组 -->
|
|
|
|
+ <view class="header-left" :style="[headerLeftStyle]">
|
|
|
|
+ <view
|
|
|
|
+ class="button-group"
|
|
|
|
+ :class="{ border: border }"
|
|
|
|
+ :style="[
|
|
|
|
+ buttonCount === 1 ? buttonGroupStyleOne : buttonGroupStyleTwo,
|
|
|
|
+ { backgroundColor: groupBgColor, borderColor: borderColor }
|
|
|
|
+ ]"
|
|
|
|
+ >
|
|
|
|
+ <view
|
|
|
|
+ class="btn iconfont"
|
|
|
|
+ v-if="groupLeftButton"
|
|
|
|
+ :class="groupLeftButton.icon"
|
|
|
|
+ :style="{ color: groupLeftButton.color }"
|
|
|
|
+ @click.stop="handleLeftClick(0)"
|
|
|
|
+ ></view>
|
|
|
|
+ <view class="btn iconfont icon-vertical_line" v-if="buttonCount > 1"></view>
|
|
|
|
+ <view
|
|
|
|
+ class="btn iconfont"
|
|
|
|
+ v-if="groupRightButton"
|
|
|
|
+ :class="groupRightButton.icon"
|
|
|
|
+ :style="{ color: groupRightButton.color }"
|
|
|
|
+ @click.stop="handleLeftClick(1)"
|
|
|
|
+ ></view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <!-- 标题 -->
|
|
|
|
+ <view class="header-title" :class="align">
|
|
|
|
+ <text>{{ title | formatTitle }}</text>
|
|
|
|
+ <text
|
|
|
|
+ class="btn iconfont icon-sousuo"
|
|
|
|
+ :class="rightButton.icon"
|
|
|
|
+ :style="{ color: rightButton.color }"
|
|
|
|
+ v-if="rightButton"
|
|
|
|
+ @click.stop="handleRightClick"
|
|
|
|
+ ></text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+export default {
|
|
|
|
+ props: {
|
|
|
|
+ // 导航标题
|
|
|
|
+ title: {
|
|
|
|
+ type: String,
|
|
|
|
+ default: '页面标题页面标题页面标题'
|
|
|
|
+ },
|
|
|
|
+ align: {
|
|
|
|
+ type: String,
|
|
|
|
+ default: 'center'
|
|
|
|
+ },
|
|
|
|
+ // 是否显示按钮组边框
|
|
|
|
+ border: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: true
|
|
|
|
+ },
|
|
|
|
+ // 按钮组数据
|
|
|
|
+ leftButtonGroup: {
|
|
|
|
+ type: Array,
|
|
|
|
+ default: () => [
|
|
|
|
+ {
|
|
|
|
+ icon: 'icon-daohangfanhui',
|
|
|
|
+ color: '#333'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ icon: 'icon-fanhuishouye',
|
|
|
|
+ color: '#333'
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ },
|
|
|
|
+ // 标题按钮数据
|
|
|
|
+ rightButton: {
|
|
|
|
+ type: Object,
|
|
|
|
+ default: () => ({
|
|
|
|
+ icon: 'icon-sousuo',
|
|
|
|
+ color: '#333'
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 按钮组背景色
|
|
|
|
+ groupBgColor: {
|
|
|
|
+ type: String,
|
|
|
|
+ default: '#fff'
|
|
|
|
+ },
|
|
|
|
+ // 按钮组边框颜色
|
|
|
|
+ borderColor: {
|
|
|
|
+ type: String,
|
|
|
|
+ default: '#ccc'
|
|
|
|
+ },
|
|
|
|
+ // 导航栏背景色
|
|
|
|
+ bgColor: {
|
|
|
|
+ type: String,
|
|
|
|
+ default: '#fff'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ filters:{
|
|
|
|
+ formatTitle(title){
|
|
|
|
+ if(!title) return '页面标题'
|
|
|
|
+ return title.substring(0,6) + '...'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ height: 0,
|
|
|
|
+ menuButtonInfo: {},
|
|
|
|
+ systemInfo: {}
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.getSystemInfo()
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ groupLeftButton() {
|
|
|
|
+ return this.leftButtonGroup[0]
|
|
|
|
+ },
|
|
|
|
+ groupRightButton() {
|
|
|
|
+ return this.leftButtonGroup[1]
|
|
|
|
+ },
|
|
|
|
+ buttonCount() {
|
|
|
|
+ return this.leftButtonGroup.length
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 导航栏样式
|
|
|
|
+ headerNavStyle() {
|
|
|
|
+ const { height, top } = this.menuButtonInfo
|
|
|
|
+ return {
|
|
|
|
+ height: height + 'px',
|
|
|
|
+ paddingTop: top + 'px',
|
|
|
|
+ lineHeight: height + 'px'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 导航栏可用
|
|
|
|
+ headerStyle() {
|
|
|
|
+ const { height, width, right, left } = this.menuButtonInfo
|
|
|
|
+ const { screenWidth } = this.systemInfo
|
|
|
|
+ return {
|
|
|
|
+ width: left + 'px',
|
|
|
|
+ height: height + 'px',
|
|
|
|
+ padding: `0 ${screenWidth - right}px`
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 导航左侧样式
|
|
|
|
+ headerLeftStyle() {
|
|
|
|
+ const { height, width, right } = this.menuButtonInfo
|
|
|
|
+ const { screenWidth } = this.systemInfo
|
|
|
|
+ return {
|
|
|
|
+ width: width + 'px',
|
|
|
|
+ height: height + 'px',
|
|
|
|
+ marginRight: `${screenWidth - right}px`
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 一个按钮时的样式
|
|
|
|
+ buttonGroupStyleOne() {
|
|
|
|
+ const { height, width, right } = this.menuButtonInfo
|
|
|
|
+ return {
|
|
|
|
+ width: height + 'px',
|
|
|
|
+ height: height + 'px',
|
|
|
|
+ borderRadius: height / 2 + 'px'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 两个按钮时的样式
|
|
|
|
+ buttonGroupStyleTwo() {
|
|
|
|
+ const { height, width, right } = this.menuButtonInfo
|
|
|
|
+ const { screenWidth } = this.systemInfo
|
|
|
|
+ return {
|
|
|
|
+ width: width + 'px',
|
|
|
|
+ height: height + 'px',
|
|
|
|
+ borderRadius: height / 2 + 'px',
|
|
|
|
+ padding: `0 ${screenWidth - right}px`
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 获取系统信息
|
|
|
|
+ getSystemInfo() {
|
|
|
|
+ this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
|
|
+ this.systemInfo = uni.getSystemInfoSync()
|
|
|
|
+
|
|
|
|
+ console.log(this.menuButtonInfo)
|
|
|
|
+ },
|
|
|
|
+ // 按钮组点击事件
|
|
|
|
+ handleLeftClick(index) {
|
|
|
|
+ this.$emit('leftClick', { index })
|
|
|
|
+ },
|
|
|
|
+ // 标题按钮点击事件
|
|
|
|
+ handleRightClick() {
|
|
|
|
+ this.$emit('rightClick')
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.cm-header-nav {
|
|
|
|
+ width: 100%;
|
|
|
|
+ position: relative;
|
|
|
|
+ z-index: 100000;
|
|
|
|
+ background: #fff;
|
|
|
|
+
|
|
|
|
+ .cm-header {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .button-group {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ background: #eee;
|
|
|
|
+
|
|
|
|
+ &.border {
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .btn {
|
|
|
|
+ text-align: center;
|
|
|
|
+ flex: 1;
|
|
|
|
+ &.icon-vertical_line {
|
|
|
|
+ flex: unset;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .header-title {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex: 1;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ justify-content: center;
|
|
|
|
+
|
|
|
|
+ .btn {
|
|
|
|
+ margin-left: 4px;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &.left {
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|