140 lines
2.5 KiB
Vue
140 lines
2.5 KiB
Vue
|
<template>
|
|||
|
|
<view
|
|||
|
|
class="cl-topbar"
|
|||
|
|
:class="{
|
|||
|
|
'is-border': border,
|
|||
|
|
'is-fixed': fixed,
|
|||
|
|
'is-ios': isIos,
|
|||
|
|
'with-mp': withMp,
|
|||
|
|
}"
|
|||
|
|
:style="{
|
|||
|
|
backgroundColor,
|
|||
|
|
color,
|
|||
|
|
zIndex,
|
|||
|
|
paddingTop,
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
class="cl-topbar__content"
|
|||
|
|
:style="{
|
|||
|
|
color,
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<slot>
|
|||
|
|
<view class="cl-topbar__text" @tap="tapTitle">
|
|||
|
|
<text class="cl-topbar__title" v-if="title">{{ title }}</text>
|
|||
|
|
<text class="cl-topbar__description" v-if="description">{{ description }}</text>
|
|||
|
|
</view>
|
|||
|
|
</slot>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="cl-topbar__prepend">
|
|||
|
|
<view class="cl-topbar__icon" v-if="showBack" @tap="back">
|
|||
|
|
<text class="cl-icon-home" v-if="isFirst"></text>
|
|||
|
|
<text class="cl-icon-arrow-left" v-else></text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<slot name="prepend"></slot>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="cl-topbar__append">
|
|||
|
|
<slot name="append"></slot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
import { computed, defineComponent, onMounted, ref } from "vue";
|
|||
|
|
import { router } from "/@/cool";
|
|||
|
|
import { isIos } from "/@/cool/utils";
|
|||
|
|
|
|||
|
|
const { statusBarHeight } = uni.getSystemInfoSync();
|
|||
|
|
|
|||
|
|
export default defineComponent({
|
|||
|
|
name: "cl-topbar",
|
|||
|
|
|
|||
|
|
props: {
|
|||
|
|
// 标题
|
|||
|
|
title: String,
|
|||
|
|
// 描述
|
|||
|
|
description: String,
|
|||
|
|
// 是否显示下边框
|
|||
|
|
border: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true,
|
|||
|
|
},
|
|||
|
|
// 是否固定
|
|||
|
|
fixed: Boolean,
|
|||
|
|
// 是否兼容小程序
|
|||
|
|
withMp: Boolean,
|
|||
|
|
// 是否显示返回按钮
|
|||
|
|
showBack: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true,
|
|||
|
|
},
|
|||
|
|
// 背景色
|
|||
|
|
backgroundColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: "#fff",
|
|||
|
|
},
|
|||
|
|
// 字体颜色
|
|||
|
|
color: {
|
|||
|
|
type: String,
|
|||
|
|
default: "#000",
|
|||
|
|
},
|
|||
|
|
// 返回页面路径
|
|||
|
|
backPath: String,
|
|||
|
|
// 层级
|
|||
|
|
zIndex: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 99,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
setup(props, { emit }) {
|
|||
|
|
// 是否页面栈的第一个
|
|||
|
|
const isFirst = ref(false);
|
|||
|
|
|
|||
|
|
// 顶部内边距
|
|||
|
|
const paddingTop = computed(() => {
|
|||
|
|
return props.fixed ? `${statusBarHeight}px` : 0;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 返回
|
|||
|
|
function back() {
|
|||
|
|
if (isFirst.value) {
|
|||
|
|
// H5页面刷新或者分享页时，页面栈长度只有1。此时逐个验证返回的页面路径
|
|||
|
|
if (props.backPath) {
|
|||
|
|
router.push({
|
|||
|
|
path: props.backPath,
|
|||
|
|
mode: "reLaunch",
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
router.home();
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
router.back();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 点击标题
|
|||
|
|
function tapTitle(e: any) {
|
|||
|
|
emit("title", e);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
const pages = getCurrentPages();
|
|||
|
|
isFirst.value = pages.length == 1;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
isFirst,
|
|||
|
|
paddingTop,
|
|||
|
|
back,
|
|||
|
|
tapTitle,
|
|||
|
|
isIos,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|