menduner/src/views/mall/components/navbar.vue

<template>
  <div class="stickyBox py-5">
    <div class="default-width d-flex align-center justify-space-between">
      <div class="header-link">
        <span class="cursor-pointer" :class="{'active-route' : isActive('/mall')}" @click="router.push('/mall')">首页</span>
        <span class="cursor-pointer mx-8" :class="{'active-route' : isActive('/mall/user', true)}" @click="handleTo('/mall/user')">
          <v-icon>mdi-account-circle-outline</v-icon>
          我的
        </span>
        <span class="cursor-pointer">
          <v-icon size="20">mdi-cart-outline</v-icon>
          购物车
        </span>
      </div>
      <div class="search d-flex align-center">
        <v-text-field
          v-model="inputVal"
          placeholder="请输入关键词"
          color="primary"
          variant="plain"
          density="compact"
          clearable
          :hide-details="true"
          class="ml-3 px-2"
          style="height: 100%; line-height: 100%;"
          @keyup.enter="handleSearch"
        ></v-text-field>
        <v-btn class="searchBtn" prepend-icon="mdi-shopping-search-outline" @click="handleSearch">搜索</v-btn>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'formPage'})
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getToken } from '@/utils/auth'
import Snackbar from '@/plugins/snackbar'

const emit = defineEmits(['login'])
const router = useRouter()
const isActive = computed(() => (path, hasChild) => {
  const currentPath = router.currentRoute.value.path
  return hasChild ? currentPath.includes(path) : currentPath === path
})

const handleTo = (path) => {
  if (!getToken()) {
    Snackbar.warning('请先登录')
    emit('login', path)
    return
  }
  router.push(path)
}

const inputVal = ref('')
const handleSearch = () => {}
</script>

<style scoped lang="scss">
.stickyBox {
  position: sticky;
  top: 48px;
  z-index: 999;
  background-color: #fff;
}
.active-route {
  position: relative;
  color: var(--v-primary-base);
  &::before {
    content: '';
    width: 100%;
    height: 3px;
    position: absolute;
    bottom: -8px;
    left: 0;
    background-color: var(--v-primary-base);
  }
}
.header-link span:hover {
  color: var(--v-primary-base);
}
.search {
  height: 50px;
  width: 350px;
  border: 2px solid var(--v-primary-base);
  border-radius: 5px;
  .searchBtn {
    width: 100px;
    height: 49px;
    line-height: 48px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background-color: var(--v-primary-base);
    cursor: pointer;
  }
}
</style>