首先聲明一點：下面的內(nèi)容是從一個uniapp的程序中摘錄的，并非本人所寫，先做記錄，以免后續(xù)遇到相似需求抓耳撓腮。

效果圖

代碼——html部分

<template><view><cu-custom class="navBox" bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">在線選座</block></cu-custom><anil-seat title="皮皮魯與魯西西之罐頭小人"info="2021年10月22日 國語 奇幻 喜劇 兒童"room-name="5號廳":seat-data="seatData" :max="4" @confirm="onConfirmSeat"></anil-seat></view>
</template>

上面代碼中的cu-custom組件是全局注冊到main.js中的組件：

在main.js中的寫法：

// 此處為引用自定義頂部
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom);

cu-custom組件

<template><view><view class="cu-custom" :style="[{height:CustomBar + 'px'}]"><view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]"><view class="action" @tap="BackPage" v-if="isBack"><text class="cuIcon-back"></text><slot name="backText"></slot></view><view class="content" :style="[{top:StatusBar + 'px'}]"><slot name="content"></slot></view><slot name="right"></slot></view></view></view>
</template><script>export default {data() {return {StatusBar: this.StatusBar,CustomBar: this.CustomBar};},name: 'cu-custom',computed: {style() {var StatusBar= this.StatusBar;var CustomBar= this.CustomBar;var bgImage = this.bgImage;var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;if (this.bgImage) {style = `${style}background-image:url(${bgImage});`;}return style}},props: {bgColor: {type: String,default: ''},isBack: {type: [Boolean, String],default: false},bgImage: {type: String,default: ''},},methods: {BackPage() {uni.navigateBack({delta: 1});}}}
</script>

anil-seat組件

由于內(nèi)容過多，暫不進行展示，有需要的可以評論區(qū)留下郵箱。

代碼——js+css部分

<script>import anilSeat from '@/components/anil-seat/components/anil-seat/anil-seat.vue'import {seatData} from '@/common/seat-data.js'export default {components: {anilSeat},data() {return {seatData: seatData};},methods: {onConfirmSeat (items) {console.log(items)}}}
</script><style lang="scss">
page {background-color: #eee;height: 100%;
}
</style>

完成！！！多多積累，多多收獲！！！