92 lines
2.0 KiB
Vue
92 lines
2.0 KiB
Vue
<template>
|
|
<uni-nav-bar :statusBar="true" :fixed="true" backgroundColor="#39ac4f" :border="false" color="#fff"
|
|
v-if="$slots.left && $slots.right">
|
|
<block v-slot:left>
|
|
<slot name="left"></slot>
|
|
</block>
|
|
<view>{{title}}</view>
|
|
<block v-slot:right>
|
|
<slot name="right"></slot>
|
|
</block>
|
|
</uni-nav-bar>
|
|
<uni-nav-bar :statusBar="true" :fixed="true" backgroundColor="#39ac4f" :border="false" color="#fff"
|
|
v-else-if="$slots.left">
|
|
<block v-slot:left>
|
|
<slot name="left"></slot>
|
|
</block>
|
|
<view>{{title}}</view>
|
|
</uni-nav-bar>
|
|
<uni-nav-bar :statusBar="true" :fixed="true" backgroundColor="#39ac4f" :border="false" color="#fff"
|
|
v-else-if="$slots.right">
|
|
<block v-slot:left>
|
|
<view class="nav-bar-city" v-if="left" @click="onClickLeft">
|
|
<uni-icons type="uni-icon uniui-back" />
|
|
<text class="uni-nav-bar-text">{{leftText}}</text>
|
|
</view>
|
|
</block>
|
|
<view>{{title}}</view>
|
|
<block v-slot:right>
|
|
<slot name="right"></slot>
|
|
</block>
|
|
</uni-nav-bar>
|
|
<uni-nav-bar :statusBar="true" :fixed="true" backgroundColor="#39ac4f" :border="false" color="#fff" v-else>
|
|
<block v-slot:left>
|
|
<view class="nav-bar-city" v-if="left" @click="onClickLeft">
|
|
<uni-icons type="uni-icon uniui-back" />
|
|
<text class="uni-nav-bar-text">{{leftText}}</text>
|
|
</view>
|
|
</block>
|
|
<view>{{title}}</view>
|
|
</uni-nav-bar>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "custom-nav-bar",
|
|
emit: ["leftClick"],
|
|
components: {},
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "",
|
|
required: true
|
|
},
|
|
left: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
leftText: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
leftClick: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {
|
|
onClickLeft() {
|
|
if (this.leftClick) {
|
|
this.$emit("leftClick");
|
|
} else {
|
|
uni.navigateBack();
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.nav-bar-city {
|
|
.uni-icons {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.uni-nav-bar-text {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
</style> |