<template>
    <div ref="nav" class="cjc-nav">
        <div class="nav-left">
            <div class="back-area" id="back" @click="back()">
                <Button type="text" icon="chevron-left" class="left-btn">返回</Button>
            </div>
            <span class="click-size size" id="btn2click" @click="btn2click">{{btn2}}</span>
        </div>
        <div class="nav-middle">
            <span class="title">{{title}}</span>
        </div>
        <div class="nav-right">
            <slot>
                <div class="nav-right-content" id="btn3click" @click="btn3clcik">
                    <span class="click-size size" id="btn3">{{btn3}}</span>
                </div>
            </slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CJCNav',
    props: ['title', 'btn2', 'btn3'],
    methods: {
        /**
         * 触发btn2按钮自定义函数
         */
        btn2click() {
            this.$emit('btn2click')
        },
        /**
         * 触发btn3按钮自定义函数
         */
        btn3clcik() {
            this.$emit('btn3click')
        },
        /**
         * 触发返回按钮自定义函数
         */
        back() {
            this.$emit('customRouter')
        }
    }
}
</script>
