designer-hub/packages/merchant/src/components/navbar-evo.vue

<script lang="ts" setup>
import { ConfigProviderThemeVars } from 'wot-design-uni'
import {
  type CSSProperties,
  computed,
  getCurrentInstance,
  nextTick,
  onMounted,
  ref,
  watch,
} from 'vue'

const props = withDefaults(
  defineProps<{
    transparent?: boolean
    title?: string
    dark?: boolean
    placeholder?: boolean
    isShowBack?: boolean
  }>(),
  { isShowBack: true },
)
const slots = defineSlots<{
  prepend(): any
}>()
const aa = computed(() => (slots.prepend ? 'left' : 'capsule'))
const pages = computed(() => getCurrentPages())
const themeVars = computed<ConfigProviderThemeVars>(() => ({
  navbarColor: props.dark ? 'white' : 'black',
  // buttonIconSize: '100rpx',
}))
const handleToHome = () => {
  uni.reLaunch({ url: '/pages/home/index' })
}
const handleBack = () => {
  uni.navigateBack()
}
onMounted(() => {})
</script>
<template>
  <div>
    <wd-config-provider :themeVars="themeVars">
      <wd-navbar
        fixed
        left-arrow
        safe-area-inset-top
        :bordered="false"
        :custom-class="`${transparent ? 'bg-transparent!' : ''} `"
        v-bind="{ title }"
      >
        <template v-slot:[aa]>
          <div class="flex items-center gap-4.5 w-full h-full">
            <div class="flex items-center justify-center overflow-hidden" v-if="isShowBack">
              <wd-icon
                v-if="pages.length === 1"
                name="home"
                size="50rpx"
                :color="dark ? 'white' : 'blacak'"
                @click="handleToHome"
              ></wd-icon>
              <wd-icon
                v-else
                name="arrow-left"
                size="48rpx"
                :color="dark ? 'white' : 'blacak'"
                @click="handleBack"
              ></wd-icon>
            </div>
            <slot name="prepend"></slot>
          </div>
        </template>
      </wd-navbar>
      <template v-if="props.placeholder">
        <wd-navbar
          safe-area-inset-top
          :bordered="false"
          :custom-class="`${transparent ? 'bg-transparent!' : ''} `"
        ></wd-navbar>
      </template>
    </wd-config-provider>
  </div>
</template>