362 lines
9.9 KiB
Plaintext
362 lines
9.9 KiB
Plaintext
<template>
|
||
<view style="flex-direction: row;padding-top: var(--status-bar-height);box-sizing: content-box;align-items: center;position: relative;">
|
||
<view style="height: 44px;align-items: center;justify-content: center;
|
||
<!-- #ifdef WEB -->
|
||
cursor: pointer
|
||
<!-- #endif -->
|
||
" class="uni-left-class-builtin" :class="leftClass">
|
||
<!-- 旋转边框的view实现返回箭头。因需要扩大点击区域，外面多套了一层 -->
|
||
<view v-if="!hideDefaultBack && slots['left']==null" style="width: 44px;height: 44px;justify-content: center;align-items: center;" @click="back">
|
||
<view style="width: 12px;height: 12px;transform: rotate(45deg);
|
||
border-left: 2px solid; border-bottom: 2px solid;" :style="backIconStyle"></view>
|
||
</view>
|
||
<slot name="left" v-else></slot>
|
||
</view>
|
||
|
||
<view style="position: absolute; height: 44px; flex-direction: row; align-items: center;" class="uni-mid-class-builtin" :class="midClass" flatten>
|
||
<text v-if="slots['mid']==null" :style="titleStyle" flatten> {{ title }} </text>
|
||
<slot name="mid" v-else></slot>
|
||
</view>
|
||
<view style="position: absolute; height: 44px; flex-direction: row; align-items: center;right: 0;" class="uni-right-class-builtin" :class="rightClass" flatten>
|
||
<slot name="right"></slot>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
/**
|
||
* 自定义导航栏
|
||
* @description 自定义导航栏组件
|
||
* @uniPlatform {
|
||
* "app": {
|
||
* "android": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.21"
|
||
* },
|
||
* "ios": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.11"
|
||
* },
|
||
* "harmony": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.07"
|
||
* }
|
||
* },
|
||
* "mp": {
|
||
* "weixin": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07"
|
||
* },
|
||
* "alipay": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.31"
|
||
* }
|
||
* },
|
||
* "web": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07"
|
||
* }
|
||
* }
|
||
*/
|
||
defineOptions({
|
||
// inheritAttrs: false,
|
||
externalClasses: ['left-class','mid-class','right-class']
|
||
})
|
||
const props = defineProps({
|
||
/**
|
||
* @description 是否隐藏默认的返回箭头。为 true 时需要通过 left 插槽自定义返回按钮
|
||
* @default false
|
||
* @uniPlatform {
|
||
* "app": {
|
||
* "android": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.21"
|
||
* },
|
||
* "ios": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.11"
|
||
* },
|
||
* "harmony": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.07"
|
||
* }
|
||
* },
|
||
* "mp": {
|
||
* "weixin": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07"
|
||
* },
|
||
* "alipay": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.31"
|
||
* }
|
||
* },
|
||
* "web": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07"
|
||
* }
|
||
* }
|
||
*/
|
||
hideDefaultBack: { type: Boolean, default: false },
|
||
/**
|
||
* @description 导航栏中间显示的标题文字，若使用 mid 插槽则该属性无效
|
||
* @default ""
|
||
* @uniPlatform {
|
||
* "app": {
|
||
* "android": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.21"
|
||
* },
|
||
* "ios": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.11"
|
||
* },
|
||
* "harmony": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.07"
|
||
* }
|
||
* },
|
||
* "mp": {
|
||
* "weixin": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07"
|
||
* },
|
||
* "alipay": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.31"
|
||
* }
|
||
* },
|
||
* "web": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07"
|
||
* }
|
||
* }
|
||
*/
|
||
title: { type: String, default: "" },
|
||
// navigationBarTextStyle: { type: "#000000" | "#ffffff" | "#000" | "#fff" | "black" | "white" | "", default: "" },
|
||
/**
|
||
* @description 导航栏前景色（文字和返回箭头颜色）。非小程序端未传入时会自动读取 pageStyle 的 navigationBarTextStyle
|
||
* @default ""
|
||
* @uniPlatform {
|
||
* "app": {
|
||
* "android": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.21"
|
||
* },
|
||
* "ios": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.11"
|
||
* },
|
||
* "harmony": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.07"
|
||
* }
|
||
* },
|
||
* "mp": {
|
||
* "weixin": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07"
|
||
* },
|
||
* "alipay": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.31"
|
||
* }
|
||
* },
|
||
* "web": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07"
|
||
* }
|
||
* }
|
||
*/
|
||
navigationBarTextStyle: { type: String as PropType<"white" | "black" | "">, default: "" },
|
||
/**
|
||
* @description 左侧区域的自定义样式类
|
||
* @default ""
|
||
* @uniPlatform {
|
||
* "app": {
|
||
* "android": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.21"
|
||
* },
|
||
* "ios": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.11"
|
||
* },
|
||
* "harmony": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.07"
|
||
* }
|
||
* },
|
||
* "mp": {
|
||
* "weixin": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07"
|
||
* },
|
||
* "alipay": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.31"
|
||
* }
|
||
* },
|
||
* "web": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07"
|
||
* }
|
||
* }
|
||
*/
|
||
leftClass: { type: String, default: "" },
|
||
/**
|
||
* @description 中间区域的自定义样式类
|
||
* @default ""
|
||
* @uniPlatform {
|
||
* "app": {
|
||
* "android": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.21"
|
||
* },
|
||
* "ios": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.11"
|
||
* },
|
||
* "harmony": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.07"
|
||
* }
|
||
* },
|
||
* "mp": {
|
||
* "weixin": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07"
|
||
* },
|
||
* "alipay": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.31"
|
||
* }
|
||
* },
|
||
* "web": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07"
|
||
* }
|
||
* }
|
||
*/
|
||
midClass: { type: String, default: "" },
|
||
/**
|
||
* @description 右侧区域的自定义样式类
|
||
* @default ""
|
||
* @uniPlatform {
|
||
* "app": {
|
||
* "android": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.21"
|
||
* },
|
||
* "ios": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.11"
|
||
* },
|
||
* "harmony": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07",
|
||
* "unixVaporVer": "5.07"
|
||
* }
|
||
* },
|
||
* "mp": {
|
||
* "weixin": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07"
|
||
* },
|
||
* "alipay": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.31"
|
||
* }
|
||
* },
|
||
* "web": {
|
||
* "uniVer": "x",
|
||
* "unixVer": "5.07"
|
||
* }
|
||
* }
|
||
*/
|
||
rightClass: { type: String, default: "" }
|
||
// stat: { type: Boolean, default: false }
|
||
})
|
||
const slots = useSlots();
|
||
const backIconStyle = computed(() : string => {
|
||
return props.navigationBarTextStyle == "" ? "" : `border-left-color: ${props.navigationBarTextStyle}; border-bottom-color: ${props.navigationBarTextStyle};`;
|
||
})
|
||
const titleStyle = computed(() : string => {
|
||
return props.navigationBarTextStyle == "" ? "" : `color: ${props.navigationBarTextStyle};`;
|
||
})
|
||
|
||
// #ifndef MP
|
||
// 获取pageStyle在web和app上都没有兼容theme.json的场景，这段代码注释掉。需要先修改底层bug。本组件使用了其他方案
|
||
/* const currentPage = getCurrentInstance()?.proxy?.$page
|
||
console.log("props.navigationBarTextStyle:",props.navigationBarTextStyle);
|
||
console.log("navigationBarTextStyle：",currentPage?.getPageStyle()["navigationBarTextStyle"]);
|
||
console.log("backgroundColorContent：",currentPage?.getPageStyle()["backgroundColorContent"]);
|
||
const foreColor = (props.navigationBarTextStyle=="") ? currentPage?.getPageStyle()["navigationBarTextStyle"] : props.navigationBarTextStyle; //如果外部没有传入前景色，从pageStyle获取
|
||
console.log("foreColor:",foreColor); */
|
||
// #endif
|
||
// #ifdef MP
|
||
// const foreColor = props.navigationBarTextStyle; //小程序端无法获取pageStyle，需要显式传入前景色
|
||
// #endif
|
||
|
||
/* const foreColor = computed(() : string => {
|
||
return props.navigationBarTextStyle;
|
||
}) */
|
||
|
||
// let statusBarHeight = ref(0)
|
||
onMounted(() => {
|
||
// #ifdef MP-WEIXIN
|
||
// TODO 部分小程序平台不支持getWindowInfo
|
||
// statusBarHeight.value = uni.getWindowInfo().statusBarHeight
|
||
// #endif
|
||
|
||
/* if (props.stat && props.title != '') {
|
||
uni.report({
|
||
name: 'title',
|
||
options: props.title
|
||
})
|
||
} */
|
||
})
|
||
|
||
const back = () => {
|
||
uni.navigateBack({});
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.uni-left-class-builtin {
|
||
width: 44px;
|
||
margin-left: 6px;
|
||
}
|
||
.uni-mid-class-builtin {
|
||
justify-content: center;
|
||
left: 52px; /* padding 6 + 44 = 52*/
|
||
right: 52px;
|
||
}
|
||
.uni-right-class-builtin {
|
||
width: 44px;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
</style>
|