client-app/components/nav-back-bar/index.vue

<template>
  <view class="hc-nav-back-bar" :class="ui">
    <view class="back" @click="goToBack" v-if="isBack">
      <text un-i-material-symbols-chevron-left-rounded class="icon"/>
      <text class="text">返回</text>
    </view>
    <view class="title">{{titles}}</view>
    <view class="right">
      <slot/>
    </view>
  </view>
</template>

<script setup>
import {ref, watch} from "vue";

const props = defineProps({
  ui: String,
  title: String,
  back: {
    type: Boolean,
    default: true,
  },
});

const isBack = ref(props.back)
const titles = ref(props.title)

//监听
watch(() => [
  props.title,
  props.back,
], ([title, back]) => {
  titles.value = title
  isBack.value = back
})

//返回
const goToBack = () => {
  uni.navigateBack()
}
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>