iot-wap/src/components/CusNavigation.vue

<template>

  <div style="height: 36px; padding: 0px 0px 0px 0px; display: flex; align-items: center;">
    <!-- <div style="padding: 16px 0px 0px 24px;">
      <a-breadcrumb>
        <a-breadcrumb-item style="font-family: PingFangSC, PingFang SC;">首页</a-breadcrumb-item>
        <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
        <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
        <a-breadcrumb-item>An Application</a-breadcrumb-item>
      </a-breadcrumb>
    </div> -->
    <div style="line-height: 0px;" v-if="gobackabled" class="cus-goback" @click="onGoback">
      <van-icon name="static/images/icon-back.png" size="1.7rem" />
    </div>
    <div style="font-family: PingFangSC, PingFang SC;
      font-weight: bold;
      font-size: 1.1rem;
      color: #191A1A;
      line-height: 30px;
      text-align: justify;
      font-style: normal;">
      <span>{{ title }}</span>
    </div>
    
    <template v-if="searchabled">
    <div style="background-color: #eee; border-radius: 2.5rem; width: 0px; flex-grow: 1; margin: 0px 5px 0px 5px;">
      <van-field style="padding: 6px 16px;" v-model="keyWord" size="normal" clearable />
    </div>
    <div style="line-height: 0px;" @click="onSearch">
      <van-icon name="static/images/icon-search-black.png" size="2rem" />
    </div>
    </template>

  </div>
  
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Router, useRouter } from 'vue-router'



// 属性
defineProps({
  title: {
    type: String,
    default: undefined
  },
  gobackabled: {
    type: Boolean,
    default: false
  },
  searchabled: {
    type: Boolean,
    default: false
  }
})


// 事件
const emits = defineEmits(['onSearch'])
// 搜索
const keyWord = ref('');
const onSearch = () => {
  emits('onSearch', keyWord.value)
}

// 返回上一页
const router:Router = useRouter();
const onGoback = (event: any) => {
  console.log(event);
  router.go(-1)
}

</script>



<style scoped>
.cus-goback{
  margin-right: 3px;
}
.cus-goback:hover{
  cursor: pointer;
}

</style>