封装confirm（Vue3+Ts）

文章目录

思路
createApp
封装confirm
下周计划

思路

封装confirm首先要在以前js封装confirm的基础上进行操作之前封装confirm的时候是通过调用自己写的confirm函数实现弹窗的出现以及消失并进行逻辑的那么在Vue3中怎么实现呢？
首先要进行调用函数进行传参的操作，而且组件还要接收，那怎么才能只在调用函数的情况，没有父组件子组件这种关系进行支撑的情况下对一个组件进行传参？
这里要用到createApp了我在网上查的时候查到的基本上都是这种方法，当时还在疑惑createApp怎么还会进行传参组件竟然还能接收，搜索之后才发现，还真能这样

附上一个大佬的掘金文章：一文带你学明白createApp创建Vue3应用对象

createApp

这里就简单的说一下createApp怎么用的具体还是看我附上的那篇文章吧

有的人会觉得一个单文件应用只能有一个createApp 实际上并不是，一个单文件应用是可以使用多个createApp的

function createApp(rootComponent: Component, rootProps?: object): App

通过类型可以看到createApp接收两个参数
1.第一个参数为根组件对象（可以是.vue单文件组件也可以是组件对象）必传参数
2.第二个参数为传递给根组件的props 第二个参数是可选参数

附上一小段源码：在这里插入图片描述
从上面可以看到createApp的第二个参数是props，当挂载时可以直接给组件传递参数组件用defineProps接收就行

封装confirm

组件文件

<script setup lang="ts">
import {AlertDialog,AlertDialogAction,AlertDialogCancel,AlertDialogContent,AlertDialogDescription,AlertDialogFooter,AlertDialogHeader,AlertDialogTitle,AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Icon } from "@iconify/vue";
import { ref } from "vue";const props = defineProps<{title?: string | undefined;content?: string | undefined;description?: string | undefined;confirmText?: string | undefined;cancelText?: string | undefined;onConfirm: Function;onCancel: Function;
}>();
const dialogVisible = ref(true);
</script><template><AlertDialog :open="dialogVisible"><AlertDialogTrigger as-child> </AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>{{ title ? title : "提示" }}</AlertDialogTitle><AlertDialogDescription class="info flex"><Icon icon="pajamas:status-alert" /><span id="content">{{content ? content : "你确定执行该操作吗？"}}</span><span id="description">{{ description ? `(${description})` : "" }}</span></AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel @click="onCancel()">{{cancelText ? cancelText : "取消"}}</AlertDialogCancel><AlertDialogAction @click="onConfirm()">{{confirmText ? confirmText : "确定"}}</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>
</template>
<style lang="scss" scoped>
.info {font-size: 16px;align-items: center;svg {color: #f1b357;font-size: 22px;margin-right: 10px;}#description {font-size: 14px;}
}
</style>

在代码中可以看到用defineProps 接收参数

函数useConfirm组件

import Confirm from "@/components/confirm/Confirm.vue";
import { createApp } from "vue";
export function showConfirm({title = "",content = "",description = "",confirmBtnTxt = "确定",cancelBtnTxt = "取消",
}) {return new Promise((resolve, reject) => {const app = createApp(Confirm, {title,content,description,confirmBtnTxt,cancelBtnTxt,onConfirm: () => {unmount();resolve(true);},onCancel: () => {unmount();reject(false);},});// 创建一个挂载容器const parentNode = document.createElement("div");document.body.appendChild(parentNode);// 卸载组件const unmount = () => {app.unmount();document.body.removeChild(parentNode);};// 挂载组件app.mount(parentNode);});
}