feiniao-farm-h5/src/components/customHeader.vue

<template>
    <div class="custom-header" :style="{background:bgColor}">
        <div class="back" @click="goback" v-if="!isClose">
            <el-icon class="icon" color="rgba(0, 0, 0, 0.9)"><ArrowLeftBold /></el-icon>
        </div>
        <div class="close" @click="close" v-if="isClose && showClose">
            <el-icon class="icon" color="rgba(0, 0, 0, 0.9)"><CloseBold /></el-icon>
        </div>
        <div class="title">{{name}}</div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter} from "vue-router";
const router = useRouter();
const props = defineProps({
    name:{
        type:String,
        defalut:''
    },
    bgColor:{
        type:String,
        defalut:'#fff'
    },
    isGoBack:{
        type:Boolean,
        defalut:false
    },
    isClose:{
        type:Boolean,
        defalut:false
    },
    showClose:{
        type:Boolean,
        defalut: true
    }
})

const emit = defineEmits(['close', "goback"])


const goback = () => {
  if(!props.isGoBack){
    router.go(-1);
  }else{
    emit('goback')
  }
};

const close = () => {
    emit('close')
}

</script>

<style lang="scss" scoped>
.custom-header{
    background: #fff;
    width: 100%;
    height: 40px;
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 12;
    .back,.close{
        display: flex;
        align-items: center;
        color: #656565;
        position: absolute;
        left: 12px;
        z-index: 10;
    }
    .title{
        font-weight: bold;
    }
}
</style>