vue3项目之骨架屏与异步组件、抽屉功能的实现

订单模块开发过程

6.1 抽屉功能的实现

抽屉：https://element-plus.gitee.io/zh-CN/component/drawer.html

• 在 vuex 里面定义一个全局的变量 orderDrawer 用于抽屉的显示与隐藏

state: {
    
    
    orderDrawer: false
},

fetchorderDrawer(state, value) {
    
    
    state.orderDrawer = value
}

• 在 order 组件中使用：**使用计算属性来控制 orderDrawer ** v-model 双向绑定

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useStore } from '@/store'
import ClientOnly from '@duannx/vue-client-only'

const store = useStore()

// 显示与隐藏
const orderDrawer: any = computed({
    get() {
        return store.state.orderDrawer
    },
    set(newValue) {
        store.commit('fetchorderDrawer', newValue)
    }
})


</script>

<template>
    <client-only>
    <el-drawer v-model="orderDrawer" title="I am the title" :with-header="false">
        <span>Hi there!</span>
    </el-drawer>
    </client-only>
</template>

• 在头部组件中只需要负责开启即可！！

if (key == 'orders') {
    
    
    // 开启订单侧边栏
    store.commit('fetchorderDrawer', true)
}

<!-- 订单侧边栏（放在头部组件中） -->
<Order />

6.2 骨架屏与异步组件

骨架屏样式：https://element-plus.gitee.io/zh-CN/component/skeleton.html

这里正好介绍一下如何使用异步组件并且百分百搭配骨架屏！

• 父组件使用异步组件模板

// 引入异步组件方式
import {
    
     defineAsyncComponent } from 'vue'

const orderBody = defineAsyncComponent(() => import('./components/orderBody.vue'))

<Suspense>
    <template v-slot:default>
        <orderBody @openDrawer="openDrawer" />
    </template>

    <template v-slot:fallback>
		// 骨架屏作为 loading 效果
        <div class="loading" v-for="item in 3"><el-skeleton :rows="5" animated /></div>
    </template>
</Suspense>

• orderBody：异步组件

内部必须调用一个存在异步请求的函数！

1、模拟一个延迟接口：

// 延迟效果接口
export async function delayFetchOrderApi() {
    
    

    // 延迟加载
    return new Promise(function (resolve) {
    
    
        setTimeout(() => {
    
    
            resolve( true )
        }, 1500)
    })
}

2、组件内使用

// 制造延迟效果
await delayFetchOrderApi()

6.3 实现三个 mock 接口

分别是查询订单、添加订单、删除订单

@/api/order/index.ts

6.4 orderList 动态获取

1、将 orderList 存入 vuex 中，并设置 commit

2、给抽屉实现每次打开抽屉调用其回调函数 @open="openDrawer" 获取 orderList

// 抽屉打开的回调
async function openDrawer() {
    
    

    // 获取订单列表
    let result: any = await fetchOrderApi()
    store.commit('fetchOrderList', result.data)
}

3、在子组件中实现删除功能

let orderList: any = computed(() => store.state.orderList)

// 删除订单
async function delOrder(orderId: Number) {
    
    
    await deleteOrderApi(orderId)
    
    ElMessage({
    
    
        message: `删除订单成功`,
        type: 'success',
        duration: 1000
    })

    // 获取订单列表
    let result: any = await fetchOrderApi()
    store.commit('fetchOrderList', result.data)

}