1.less自动化导入
安装一个vue-cli插件，自动导入less文件
vue add style-resources-loader2. 头部分类导航组件渲染
-
实现头部一级分类和二级分类的渲染
基本步骤：
-
定义一个常量数据和后台保持一致，这样不请求后台就能展示一级分类，不至于白屏
-
定义接口函数
-
在pinia的category模块，基于常量定义list，定义修改分类列表函数，定义获取数据函数
-
在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并不能在路由跳转的时候关闭二级分类弹窗
实现逻辑：
-
配置路由支持分类跳转
-
鼠标进入一级分类就展示对应的二级分类弹窗
-
点击一级分类或者二级分类，或者离开一级分类和二级分类，都要隐藏二级分类弹窗
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()