封装hook函数【便于复用】

2023-12-02 21:44
文章标签 函数 封装 复用 hook 便于

本文主要是介绍封装hook函数【便于复用】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

  • 一般函数封装
  • 封装hook函数

一般函数封装

普通的删除逻辑封装函数—子组件点击删除-通过 defineEmits 通知父组件(自定义事件)进行删除

const deleteLoading = ref(false)
const emits = defineEmits<{(e: 'click-delete', id: string): void
}>()
const deleteConsultOrder = async (item: ConsultOrderItem) => {try {deleteLoading.value = trueawait deleteOrder(item.id)showSuccessToast('删除成功')emits('click-delete', item.id)} catch (error) {showFailToast('删除失败')} finally {deleteLoading.value = false}
}

父组件ConsultItem.vue

<div class="foot" v-if="item.status === OrderType.ConsultComplete"><consult-more :disabled="!item.prescriptionId" @on-delete="deleteConsultOrder(item)"@on-preview="onShowPrescription(item.prescriptionId)"></consult-more>
</div>

子组件ConsultMore.vue

<template><div class="more"><van-popover placement="top-start" v-model:show="showPopover" :actions="actions" @select="onSelect"><template #reference> 更多 </template> </van-popover></div>
</template><script setup lang="ts">
import { computed, ref } from 'vue'
import { showConfirmDialog } from 'vant'const props = defineProps<{disabled: boolean
}>()
const showPopover = ref(false)
const actions = computed(() => [{ text: '查看处方', disabled: props.disabled },{ text: '删除订单' },
])const emit = defineEmits<{(e: 'on-delete'): void(e: 'on-preview'): void
}>()const onSelect = (actions: { text: string }, index: number) => {console.log(index, 9090);if (index === 0) {emit('on-preview')}if (index === 1) {emit('on-delete')}
};
</script>

封装hook函数

src/composable/index.ts

①封装hook函数
模板:

// 封装逻辑,规范 useXxx,表示使用某功能
export const useFollow = (cb: () => void) => {
const xxx = () => {}
return { xxx }
}
②调用hook函数
模板:
const emits = defineEmits<{
(e: 'click-delete', id: string): void
}>()
const { xxx } = usexxx(() => {
emits('click-delete', props.item.id)
})

import { ref } from 'vue'
import { followOrUnfollow, getPrescriptionOrder, cancelOrder, deleteOrder } from '@/services/consult'
import type { FollowType, ConsultOrderItem } from '@/types/consult'
import { showImagePreview, showFailToast, showSuccessToast } from 'vant';
import { OrderType } from '@/enums'
import { defineEmits } from 'vue'// 封装逻辑,规范 useXxx,表示使用某功能
export const useFollow = (type: FollowType = 'doc') => {const loading = ref(false)// {a, b} 类型,传值得时候 {a, b, c} 也可以,这是类型兼容:多的可以给少的const follow = async (item: { id: string; likeFlag: 0 | 1 }) => {loading.value = truetry {await followOrUnfollow(item.id, type)item.likeFlag = item.likeFlag === 1 ? 0 : 1} finally {loading.value = false}}return { loading, follow }
}// 封装查看处方hook函数
export const useShowPrescription = () => {const onShowPrescription = async (id: string) => {const res = await getPrescriptionOrder(id)console.log(res.data.url);// 预览处方showImagePreview([res.data.url])}return { onShowPrescription }
}// 封装取消问诊hook函数
export const useCancelConsultOrder = () => {const loading = ref(false)const cancelConsultOrder = async (item: ConsultOrderItem) => {try {loading.value = trueconst res = await cancelOrder(item.id)console.log(res, '取消问诊');item.status = OrderType.ConsultCancelitem.statusValue = '已取消'showSuccessToast('取消成功')} catch (error) {showFailToast('取消失败')} finally {loading.value = false}}return { loading, cancelConsultOrder }
}// 封装删除问诊hook函数
export const useDeleteConsultOrder = (cb: () => void) => {const deleteLoading = ref(false)const deleteConsultOrder = async (item: ConsultOrderItem) => {try {deleteLoading.value = trueawait deleteOrder(item.id)showSuccessToast('删除成功')// 成功,做其他业务cb && cb()} catch (error) {showFailToast('删除失败')} finally {deleteLoading.value = false}}return { deleteLoading, deleteConsultOrder }
}

User/components/ConsultItem.vue

import { useShowPrescription, useCancelConsultOrder, useDeleteConsultOrder } from '@/composable'
const { onShowPrescription } = useShowPrescription()
const { loading, cancelConsultOrder } = useCancelConsultOrder()const emits = defineEmits<{(e: 'click-delete', id: string): void
}>()
const { deleteLoading, deleteConsultOrder } = useDeleteConsultOrder(() => {emits('click-delete', props.item.id)
})<!--//样式 -->
<div class="foot" v-if="item.status === OrderType.ConsultComplete"><consult-more :disabled="!item.prescriptionId" @on-delete="deleteConsultOrder(item)"@on-preview="onShowPrescription(item.prescriptionId)"></consult-more>
</div>

这篇关于封装hook函数【便于复用】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/446940

相关文章

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

MySQL字符串常用函数详解

《MySQL字符串常用函数详解》本文给大家介绍MySQL字符串常用函数,本文结合实例代码给大家介绍的非常详细,对大家学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql字符串常用函数一、获取二、大小写转换三、拼接四、截取五、比较、反转、替换六、去空白、填充MySQL字符串常用函数一、

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

PostgreSQL中rank()窗口函数实用指南与示例

《PostgreSQL中rank()窗口函数实用指南与示例》在数据分析和数据库管理中,经常需要对数据进行排名操作,PostgreSQL提供了强大的窗口函数rank(),可以方便地对结果集中的行进行排名... 目录一、rank()函数简介二、基础示例:部门内员工薪资排名示例数据排名查询三、高级应用示例1. 每

全面掌握 SQL 中的 DATEDIFF函数及用法最佳实践

《全面掌握SQL中的DATEDIFF函数及用法最佳实践》本文解析DATEDIFF在不同数据库中的差异,强调其边界计算原理,探讨应用场景及陷阱,推荐根据需求选择TIMESTAMPDIFF或inte... 目录1. 核心概念:DATEDIFF 究竟在计算什么?2. 主流数据库中的 DATEDIFF 实现2.1

MySQL中的LENGTH()函数用法详解与实例分析

《MySQL中的LENGTH()函数用法详解与实例分析》MySQLLENGTH()函数用于计算字符串的字节长度,区别于CHAR_LENGTH()的字符长度,适用于多字节字符集(如UTF-8)的数据验证... 目录1. LENGTH()函数的基本语法2. LENGTH()函数的返回值2.1 示例1:计算字符串

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》:本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客

Python函数作用域示例详解

《Python函数作用域示例详解》本文介绍了Python中的LEGB作用域规则,详细解析了变量查找的四个层级,通过具体代码示例,展示了各层级的变量访问规则和特性,对python函数作用域相关知识感兴趣... 目录一、LEGB 规则二、作用域实例2.1 局部作用域(Local)2.2 闭包作用域(Enclos