quick/components/global/GNavbar.vue
2022-10-26 18:37:54 +08:00

131 lines
2.6 KiB
Vue

<template>
<uni-nav-bar
:title="title"
:fixed="fixed"
:left-icon="leftIcon"
:right-icon="rightIcon"
:right-text="rightText"
:leftText="leftText"
:leftWidth="leftWidth"
:rightWidth="rightWidth"
:border="border"
:status-bar="true"
:class="title ? '' : 'uni-navbar-hide-title'"
:background-color="backgroudColor"
:color="color"
@clickLeft="clickLeftHandler"
@clickRight="clickRightHandler"
>
<template slot="left">
<slot name="left"></slot>
</template>
<template slot="default">
<slot name="default"></slot>
</template>
<template slot="right">
<slot name="right"></slot>
</template>
</uni-nav-bar>
</template>
<script>
/**
* 导航栏
* @description 这里也是一个组件描述r
* @日期 2021-5-28 16:30:56
* @property {String} type = [button|input|...值域] 这里是属性描述
* @event {Function} tap 这是是事件描述
* @example https://ext.dcloud.net.cn/plugin?id=52 参考地址
*/
export default {
name: 'GNavbar',
props: {
leftExitMP: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
},
leftText: {
type: String,
default: ''
},
leftIcon: {
type: String,
default: 'arrowleft'
},
rightIcon: {
type: String,
default: ''
},
rightText: {
type: String,
default: ''
},
fixed: {
type: Boolean,
default: true
},
border: {
type: Boolean,
default: false
},
customLeftFn: {
type: Boolean,
default: false
},
backgroudColor: {
type: String,
default: '#fff'
},
leftWidth: {
type: Number | String,
default: '120rpx'
},
rightWidth: {
type: Number | String,
default: '120rpx'
},
color: {
type: String,
default: ''
}
},
data() {
return { routerLength: [] };
},
created() {
this.routerLength = getCurrentPages().length;
},
methods: {
clickLeftHandler() {
if (this.customLeftFn) {
this.$emit('clickLeft');
} else {
// #ifdef H5
if (window.history.length > 1) {
window.history.back();
} else {
window.location.href = '/pages/live/index';
}
// #endif
// #ifndef H5
uni.navigateBack();
// #endif
}
},
/**
* @description 右边按钮的事件
* @日期 2021-5-31 14:23:17
* @params {String} 参数描述
*/
clickRightHandler() {
this.$emit('clickRight');
}
}
};
</script>