封装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

相关文章

hdu1171(母函数或多重背包)

题意:把物品分成两份,使得价值最接近 可以用背包,或者是母函数来解,母函数(1 + x^v+x^2v+.....+x^num*v)(1 + x^v+x^2v+.....+x^num*v)(1 + x^v+x^2v+.....+x^num*v) 其中指数为价值,每一项的数目为(该物品数+1)个 代码如下: #include<iostream>#include<algorithm>

C++操作符重载实例(独立函数)

C++操作符重载实例,我们把坐标值CVector的加法进行重载,计算c3=c1+c2时,也就是计算x3=x1+x2,y3=y1+y2,今天我们以独立函数的方式重载操作符+(加号),以下是C++代码: c1802.cpp源代码: D:\YcjWork\CppTour>vim c1802.cpp #include <iostream>using namespace std;/*** 以独立函数

函数式编程思想

我们经常会用到各种各样的编程思想,例如面向过程、面向对象。不过笔者在该博客简单介绍一下函数式编程思想. 如果对函数式编程思想进行概括,就是f(x) = na(x) , y=uf(x)…至于其他的编程思想,可能是y=a(x)+b(x)+c(x)…,也有可能是y=f(x)=f(x)/a + f(x)/b+f(x)/c… 面向过程的指令式编程 面向过程,简单理解就是y=a(x)+b(x)+c(x)

JavaSE——封装、继承和多态

1. 封装 1.1 概念      面向对象程序三大特性:封装、继承、多态 。而类和对象阶段,主要研究的就是封装特性。何为封装呢?简单来说就是套壳屏蔽细节 。     比如:对于电脑这样一个复杂的设备,提供给用户的就只是:开关机、通过键盘输入,显示器, USB 插孔等,让用户来和计算机进行交互,完成日常事务。但实际上:电脑真正工作的却是CPU 、显卡、内存等一些硬件元件。

利用matlab bar函数绘制较为复杂的柱状图,并在图中进行适当标注

示例代码和结果如下:小疑问:如何自动选择合适的坐标位置对柱状图的数值大小进行标注?😂 clear; close all;x = 1:3;aa=[28.6321521955954 26.2453660695847 21.69102348512086.93747104431360 6.25442246899816 3.342835958564245.51365061796319 4.87

OpenCV结构分析与形状描述符(11)椭圆拟合函数fitEllipse()的使用

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C++11 算法描述 围绕一组2D点拟合一个椭圆。 该函数计算出一个椭圆,该椭圆在最小二乘意义上最好地拟合一组2D点。它返回一个内切椭圆的旋转矩形。使用了由[90]描述的第一个算法。开发者应该注意,由于数据点靠近包含的 Mat 元素的边界,返回的椭圆/旋转矩形数据

Unity3D 运动之Move函数和translate

CharacterController.Move 移动 function Move (motion : Vector3) : CollisionFlags Description描述 A more complex move function taking absolute movement deltas. 一个更加复杂的运动函数,每次都绝对运动。 Attempts to

哈希表的封装和位图

文章目录 2 封装2.1 基础框架2.2 迭代器(1)2.3 迭代器(2) 3. 位图3.1 问题引入3.2 左移和右移?3.3 位图的实现3.4 位图的题目3.5 位图的应用 2 封装 2.1 基础框架 文章 有了前面map和set封装的经验,容易写出下面的代码 // UnorderedSet.h#pragma once#include "HashTable.h"

✨机器学习笔记(二)—— 线性回归、代价函数、梯度下降

1️⃣线性回归(linear regression) f w , b ( x ) = w x + b f_{w,b}(x) = wx + b fw,b​(x)=wx+b 🎈A linear regression model predicting house prices: 如图是机器学习通过监督学习运用线性回归模型来预测房价的例子,当房屋大小为1250 f e e t 2 feet^

封装MySQL操作时Where条件语句的组织

在对数据库进行封装的过程中,条件语句应该是相对难以处理的,毕竟条件语句太过于多样性。 条件语句大致分为以下几种: 1、单一条件,比如:where id = 1; 2、多个条件,相互间关系统一。比如:where id > 10 and age > 20 and score < 60; 3、多个条件,相互间关系不统一。比如:where (id > 10 OR age > 20) AND sco