vue 自定義頂部欄元件

<template>
	<div class="goBack">
		<div class="goBackTop">
			<img class="back" @click="goback" src="static/images/my/searchCoin/[email protected]" alt="">
			<div  class="text">
                 <slot name="header"></slot>
            </div>
			<div class="jilu" @click="handleList">
				<!-- <img class="imgs" src="static/images/my/coinOperate/[email protected]" alt="">
				<p class="text">行情</p> -->
				<slot name="right"></slot>
			</div>
        </div>
	</div>
</template>

<script>

export default{
	methods: {
        goback(){
            this.$router.go(-1)
		},
		handleList() {
			this.$emit("click")
		}
    }
}
</script>

<style lang="less" scoped>
.goBack{
	.goBackTop{
		display: flex;
		color: #CFE4F3;
		width: 100%;
		height: 2.56rem;
		line-height: 2.56rem;
		background:rgba(6,29,46,1);
		padding-left: .8rem;
		box-sizing: border-box;
		box-shadow:0px 8px 18px 0px rgba(0,13,21,0.54);
		.back{
			width: .586667rem;
			height: .96rem;
			margin-top: .8rem;
		}
		.text{
			width: 100%;
			flex: 1;
			text-align: center;
		}
		.jilu{
			position: absolute;
			right: .8rem;
			.imgs{
				display: inline-block;
				width: .64rem;
				height: .693333rem;
				margin-top: 1.013333rem;
				float: left;
			}
			.text{
				display: inline;
				padding-left: .266667rem;
				font-size: .693333rem;
				color: #809AAD;
				line-height: 2.56rem;
			}
		}
	}
}
</style>
           

在元件中引用

<div>
    <go-back>
        <template v-slot:header>
            <span>USDT充值</span>
        </template>
        <template v-slot:right>
            <div @click="handleList">
                <img class="imgs" src="static/images/my/coinOperate/[email protected]" alt="">
                <p class="text">充币記錄</p >
            </div>
        </template>
    </go-back>
</div>
<script>
import goBack "@/components/goBack.vue";//頂部導航
components: {
			goBack 
		}
</script>
           

效果：