123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182 |
- <template>
- <uni-nav-bar :title="title" :left-text='leftText' :right-text='rightText' :left-icon="goBack ? leftIcon : ''"
- :right-icon="rightIcon" :color="color" :backgroundColor="backgroundColor" :fixed="fixed" :statusBar="statusBar"
- :border="border" :shadow="shadow" :height="height" :dark="dark" :leftWidth="leftWidth" :rightWidth="rightWidth"
- :stat="stat" @clickRight="onClickRight" @clickLeft="onClickLeft" @clickTitle="onClickTitle">
- <template v-slot:default>
- <slot name="default" />
- </template>
- <template v-slot:left>
- <slot name="left" />
- </template>
- <template v-slot:right>
- <slot name="right" />
- </template>
- </uni-nav-bar>
- </template>
- <script>
- // https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html
- const app = getApp().globalData;
- export default {
- name: "nav-bar",
- props: {
- // 是否显示返回按钮
- goBack: {
- type: Boolean,
- default: false
- },
- title: {
- type: String,
- default: ''
- },
- leftText: {
- type: String,
- default: ''
- },
- rightText: {
- type: String,
- default: ''
- },
- leftIcon: {
- type: String,
- default: 'back'
- },
- rightIcon: {
- type: String,
- default: ''
- },
- color: {
- type: String,
- default: app.navBarFsColor || '#000000',
- },
- backgroundColor: {
- type: String,
- default: app.navBarBgColor || '#FFFFFF'
- },
- fixed: {
- type: Boolean,
- default: true
- },
- statusBar: {
- type: Boolean,
- default: true
- },
- shadow: {
- type: Boolean,
- default: false
- },
- border: {
- type: Boolean,
- default: false
- },
- height: {
- type: [Number, String],
- default: app.navBarHeight || 44,
- },
- dark: {
- type: Boolean,
- default: false
- },
- leftWidth: {
- type: [Number, String],
- default: "120rpx",
- },
- rightWidth: {
- type: [Number, String],
- default: "120rpx",
- },
- stat: {
- type: Boolean,
- default: false,
- },
- // 返回配置
- backCallBack: {
- type: Function,
- default: null,
- },
- // tab 页面
- backTabPage: {
- type: String,
- default: '',
- },
- // 需要返回的普通页面
- backPage: {
- type: String,
- default: '',
- },
- },
- // :backgroundColor="navBarBgColor" :color="navBarFsColor"
- data() {
- return {
- };
- },
- methods: {
- onClickLeft() {
- if (!this.goBack) return
- console.log('点击 nav 左侧')
- try {
- const pages = getCurrentPages();
- const path = pages[pages.length - 1].route;
- // 自定义返回事件
- if (this.backCallBack) {
- this.backCallBack()
- } else if (this.backTabPage) {
- // 需要返回的 Tab 页面
- uni.switchTab({
- url: this.backTabPage,
- fail: () => {
- throw new Error()
- }
- });
- } else if (this.backPage) {
- // 需要返回的 普通 页面
- uni.redirectTo({
- url: this.backPage,
- fail: () => {
- throw new Error()
- }
- });
- } else if (path === 'pages/login/index') {
- // 如果是登录页面,直接返回首页
- throw new Error()
- } else if (pages.length > 1) {
- // 返回上一页
- uni.navigateBack({
- fail: () => {
- throw new Error()
- }
- });
- } else {
- // #ifdef H5
- history.back();
- // #endif
- throw new Error()
- }
- } catch (e) {
- // 返回过程中出错,直接返回首页
- uni.reLaunch({
- url: '/pages/home'
- });
- }
- },
- onClickRight() {
- console.log('点击 nav 右侧')
- this.$emit("clickRight");
- },
- onClickTitle() {
- this.$emit("clickTitle");
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- ::v-deep .uni-navbar__content{
- // background-color: red ;
- // background: url("@/static/images/page-bg.png") no-repeat center center;
- // background-size: 100% 100%;
-
- }
- </style>
|