外观搭建

# 外观搭建

# 顶部通栏布局

根据用户的登入信息切换导航菜单

<template v-if = 'profile.token'></template>

setup(){
    const store = useStore()
    // 带计算属性
    const profile = computed(()=>{
        return store.state.user.profile
    })
    
    // 不带计算属性
    // const {profile} = store.state.user
    return {profile}
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 头部布局

样式复制

# 底部布局

样式复制

# 头部导航

Layout.vue

setup(){
    const store = useStore();//导入vuex
    store.dispatch('category/getList')//异步获取分类
}

1
2
3
4

# `API`

# 常量数据 `api`

constants.js

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

1
2
3
4
5
6
7
8
9
10
11

# 分类相关 `api`

category.js

import request from '@/utils/request'

export const findAllCategoryAPI = ()=>{
    return request('/home/category/head',get)
}

1
2
3
4
5

# `vuex` 的存储模板

category.js

import {topCategory} from '@/api/consants'
import {findAllCategory} from '@/api/category'

export default{
    namespaced:true,
    state:()=>{
        return{
            //name
            list:topCategory.map(item=>({name:item}))
        }
    },
    mutations:{
        setList(state,payload){
            state.list = payload
        }
    },
    actions:{
        async getList({commit}){
            const {result} =await findAllCategory();
            commit('setList',result)
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 头部导航组件

app-header-nav.vue

setup(){
    const store = useStore();
    const list = computed(()=>{
        return store.state.category.list
    })
    return {list}
}

1
2
3
4
5
6
7

# 头部交互

路由跳转二级菜单关闭
鼠标移入移除对二级菜单的显示隐藏

# 吸顶组件

效果显示

# 使用组合`api` 实现

vueuse.org

{useMouse}组合api得到响应式鼠标滚动 x,y

编辑

上次更新: 2023/02/07, 14:51:48

← 项目搭建首页主体→