订单模块开发过程
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)
}