caimei-applets-hehe/components/cm-module/cm-header-nav/cm-header-nav.vue

<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" :style="{fontSize: systemInfo.fontSizeSetting + 'px'}">
                <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: '#eee'
        },
        // 导航栏背景色
        bgColor: {
            type: String,
            default: '#fff'
        }
    },
    filters:{
        formatTitle(title){
            if(!title) return '页面标题'
            return title.substring(0,6) + (title.length > 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
			this.$emit('init', { height: height + top })
            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;
        justify-content: center;

        .btn {
            margin-left: 4px;
            height: 100%;
        }

        &.left {
            justify-content: space-between;
        }
    }
}
</style>