<template>
    <uni-nav-bar class="nav-bar"
                 title="title"
                 :backgroundColor="background"
                 @clickLeft="clickLeft"
                 @clickRight="clickRight"
                 color="#FFFFFF">
        <view slot="left" v-if="back" class="flex-hor-align ml-md">
            <uni-icons type="back" size="15px" color="#FFFFFF"></uni-icons>
        </view>
        <view slot="left" v-else class="flex-hor-align">
            <slot name="left"></slot>
        </view>
        <view slot="right" class="flex-hor-align">
            <slot name="right"></slot>
        </view>
        <view slot="default" style="margin: 0 auto">
            <slot name="center"></slot>
        </view>
    </uni-nav-bar>
</template>

<script>
export default {
    name: 'navBarCustom',
    props: {
        title: {
            type: String,
            default: '',
        },
        back: {
            default: false,
            type: Boolean,
        },
        background: {
            type: String,
            default: '#5555ff',
        },
    },
    data() {
        return {
        };
    },
    methods: {
        clickLeft() {
            uni.navigateBack()
        },
        clickRight() {
            this.$emit('clickRight')
        }
    },
    computed: {
    },
	created() {
		
	},
    onLoad() {
        
    }
}
</script>

<style scoped lang="scss">
.nav-bar {
    position: sticky;
    top: 0;
    z-index: 99;
    font-weight: 300;
    border: 0;
}
.icon-nav-back {
    width: 52rpx;
    height: 52rpx;
}
</style>
