Newer
Older
gasAlarmH5 / src / components / navBar / navBar.vue
liyaguang on 8 Sep 2023 1 KB 家用燃气
<!-- 导航栏 -->
<template>
  <t-navbar :title="props.title" :fixed="true" @left-click="back">
    <template #left v-if="props.title !== '首页' && props.title !== '我的设备'">
      <t-icon name="chevron-left" size="24px" />
    </template>
  </t-navbar>
  <!-- <t-navbar v-if="props.title !== '首页'" :title="props.title" :fixed="true" left-arrow @click="back"/> -->
</template>
<script lang="ts" name="NavBar" setup>
import { useRouter } from "vue-router";
// import useUserStore from "../../store/modules/user";
const props = defineProps({
  title: {
    type: String,
    default: "首页",
  },
});
const $router = useRouter(); // 路由实例
// const user = useUserStore(); // 用户信息
// 返回上一页
const back = () => {
  $router.back();
};

// 回首页
// const goHome = () => {
//   if (user.type === "administrator") {
//     const routeHistory = history.length - 1; // 拿到历史记录长度
//     if (routeHistory > 1) {
//       $router.go(-routeHistory);
//     }
//   }
// };
</script>
<style lang="less" scoped>
.t-navbar {
  margin-bottom: 16px;
}

.t-icon-close {
  margin: 0 8px;
}

.t-icon-home {
  margin-right: 8px;
}

.custom-capsule {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-capsule__icon {
  flex: 1;
  position: relative;
  margin: 0;
}

.custom-capsule :deep(.t-divider--vertical-center) :deep(.t-divider--vertical) {
  margin: 0;
}
</style>