Initial commit
This commit is contained in:
tanxin
@@ -0,0 +1,361 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user