vue3项目-小兔鲜儿笔记-02-首页模块01

1.less自动化导入

安装一个vue-cli插件，自动导入less文件

vue add style-resources-loader

2. 头部分类导航组件渲染

• 实现头部一级分类和二级分类的渲染

基本步骤：

1. 定义一个常量数据和后台保持一致，这样不请求后台就能展示一级分类，不至于白屏

2. 定义接口函数

3. 在pinia的category模块，基于常量定义list，定义修改分类列表函数，定义获取数据函数

4. 在Layout组件调用actions获取数据，在头部导航组件渲染

// 一级分类
export const topCategory = [
  '居家',
  '美食',
  '服饰',
  '母婴',
  '个护',
  '严选',
  '数码',
  '运动',
  '杂货'
]

import { defineStore } from 'pinia'
import { topCategory } from '@/api/constants'
import { findAllCategories } from '@/api/category'

const useCategoryStore = defineStore('category', {
  state: () => {
    return {
      // 保证初始化时就有分类数据，不至于白屏等待请求
      list: topCategory.map((category, index) => {
        return { id: `${index}`, name: category }
      })
    }
  },
  actions: {
    setList(payload) {
      this.list = payload
    },
    async getList() {
      const { result } = await findAllCategories()
      // 给每个数据加上控制二级分类显示隐藏的数据
      result.forEach((category) => {
        category.open = false
      })
      this.setList(result)
      // 添加开启关闭标志，分类当鼠标移入时开启，当鼠标点击后关闭
    },
    // 修改当前一级分类下的二级分类显示窗口open为true
    show(item) {
      const category = this.list.find((category) => category.id === item.id)
      category.open = true
    },
    // 修改当前一级分类下的二级分类显示窗口open为false
    hide(item) {
      const category = this.list.find((category) => category.id === item.id)
      category.open = false
    }
  }
})

3. 头部分类导航交互

• 由于是单页面路由跳转不会刷新页面，由css控制的hover并不能在路由跳转的时候关闭二级分类弹窗

实现逻辑：

1. 配置路由支持分类跳转

2. 鼠标进入一级分类就展示对应的二级分类弹窗

3. 点击一级分类或者二级分类，或者离开一级分类和二级分类，都要隐藏二级分类弹窗

const routes = [
  {
    path: '/',
    name: 'Layout',
    component: () => import('@/views/Layout.vue'),
    children: [
      {
        path: '/',
        name: 'Home',
        component: () => import('@/views/home/index.vue')
      },
      {
        path: '/category/:id',
        name: 'TopCategory',
        component: () => import('@/views/category/index.vue')
      },
      {
        path: '/category/sub/:id',
        name: 'SubCategory',
        component: () => import('@/views/category/sub.vue')
      }
    ]
  }
]

    <template v-for="category in list" :key="category.id">
      <!-- 控制layer层的显示和隐藏 -->
      <li
        @mouseenter="show(category)"
        @mouseleave="hide(category)"
        @click="hide(category)"
      >
        <router-link :to="`/category/${category.id}`">
          {{ category.name }}
        </router-link>
        <div class="layer" :class="{ active: category.open === true }">
          <ul>
            <template
              v-for="subCategory in category.children"
              :key="subCategory.id"
            >
              <li>
                <router-link :to="`/category/sub/${subCategory.id}`">
                  <img :src="subCategory.picture" alt="" />
                  <p>{{ subCategory.name }}</p>
                </router-link>
              </li>
            </template>
          </ul>
        </div>
      </li>
    </template>

    // css 控制二级分类显示隐藏的时候，跳转页面不会自动隐藏窗口
    // 需要通过数据来进行控制
    const show = (category) => {
      categoryStore.show(category)
    }
    const hide = (category) => {
      categoryStore.hide(category)
    }
    
      // > .layer {
      //   height: 132px;
      //   opacity: 1;
      // }
    
    .active {
      height: 132px;
      opacity: 1;
    }

4. 吸顶头部-使用dom实现

在页面滚动到80px以上时，显示吸顶头部组件

<div class="app-header-sticky" :class="{ show: y >= 80 }">
    <!--  当卷去距离大于80时才显示container，否则会导致两个头部都显示，这是为了吸顶头部内容不遮住不吸顶的头部  -->
    <div class="container" v-show="y >= 80">
      <!--   logo   -->
      <h1 class="logo">
        <router-link to="/">小兔鲜儿</router-link>
      </h1>
      <!--   导航   -->
      <app-header-nav />
      <!--   其他   -->
      <ul class="other">
        <li>
          <a href="#">品牌</a>
        </li>
        <li>
          <a href="#">专题</a>
        </li>
      </ul>
    </div>

    // 监听滚动距离：document.documentElement.scrollTop
    // 使用dom的写法
    const y = ref(0)
    onMounted(() => {
      document.addEventListener('scroll', function (e) {
        y.value = e.target.documentElement.scrollTop
      })
    })

5. 吸顶头部组件-使用vueuse/core完成

安装@vueuse/core

npm install @vueuse/core

使用@vueuse/core的useWindowScroll函数

// 使用vueuse/core
const { y } = useWindowScroll()