Vuetify全局确认框的简单实现

## 前言

很久之前，由于 `Vuetify` 没有全局消息通知组件，所以基于 `v-alert` 自己封装了一个简单的 [全局消息通知工具](https://www.oldmoon.top/post/216)，有人一直诟病说没有全局确认框组件，最近终于抽空基于`v-dialog`也简单封装了一下，够用。

下面直接上代码，有不明白的欢迎评论交流。

## 代码组成

**提示：下面代码基于 `Vue3 + Nuxt3`，所以很多资源不需要手动引入，如 `ref` 等，如果你在非 `Nuxt3` 环境使用，请手动调试修改代码，相信这难不住你对吧~**

<!-- more -->

### GlobalConfirm.vue

- 组件核心代码

```html
<script setup lang="ts">
import {
  openConfirmDialogFlag,
  ThisConfirmModel,
  GlobalConfirmModels,
} from "~/utils/store";

const cancel = () => {
  if (ThisConfirmModel.value && ThisConfirmModel.value.cancel) {
    ThisConfirmModel.value.cancel();
  }
  closeConfirm();
};
const close = () => {
  if (ThisConfirmModel.value && ThisConfirmModel.value.close) {
    ThisConfirmModel.value.close();
  }
  closeConfirm();
};
const confirm = () => {
  ThisConfirmModel.value?.confirm();
  closeConfirm();
};
const closeConfirm = () => {
  openConfirmDialogFlag.value = false;
  // 原本想实现多层级确认框回显的，但使用有限，所以先注释掉不管了
  // ThisConfirmModel.value = model;
  // if (GlobalConfirmModels.value.length > 0) {
  //   setTimeout(() => {
  //     const model = GlobalConfirmModels.value.shift();
  //     openConfirmDialogFlag.value = true;
  //   }, 100);
  // }
};
</script>

<template>
  <v-dialog
    v-model="openConfirmDialogFlag"
    transition="dialog-bottom-transition"
    max-width="30rem"
    persistent
  >
    <v-card v-if="ThisConfirmModel">
      <v-card-title class="text-h5">
        {{ ThisConfirmModel.title }}
      </v-card-title>
      <v-card-text v-show="ThisConfirmModel?.content">
        {{ ThisConfirmModel.content }}
      </v-card-text>
      <v-card-actions>
        <v-btn color="" @click="cancel()">取消 </v-btn>
        <v-btn color="primary" @click="confirm()">确定 </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<style scoped></style>

```

### store.ts

- 这里用于存放一些全局变量

```ts

// 打开确认框标识
export const openConfirmDialogFlag = ref(false);
export const ThisConfirmModel = ref<ConfirmModel>();

// 单层级确认框用不到
// export const GlobalConfirmModels = ref<ConfirmModel[]>([]);

// ConfirmModel 如下
export interface ConfirmModel {
  title: string;
  content: string;
  confirm: Function;
  cancel?: Function;
  close?: Function;
}

```

### Confirm.ts

- 这里定义了弹出确认框的入口函数

```ts
export class Confirm {
  // 通过调用 Confirm.open 函数即可打开确认框
  static open = (model: ConfirmModel) => {
    if (openConfirmDialogFlag.value && ThisConfirmModel.value) {
      // 如果是弹窗接弹窗，延迟100ms再打开
      openConfirmDialogFlag.value = false;
      setTimeout(() => {
        ThisConfirmModel.value = model;
        openConfirmDialogFlag.value = true;
      }, 100);
    } else {
      // 如果是第一个弹窗，直接打开
      ThisConfirmModel.value = model;
      openConfirmDialogFlag.value = true;
    }
  };
}

```

## 使用方法

### 1. 在全局文件中引入组件

在普通的 `Vue` 项目中，可以在 `App.vue` 文件中引入组件 `GlobalConfirm.vue`，这样相当于使 GlobalConfirm 全局注册，使其全局可用。

> 如果不需要全局可用，在适当的地方引入即可，在 `Nuxt3` 中，可以在各个布局文件中引入。

### 2. 在需要使用确认框的地方调用 `Confirm.open`

如下代码，使用方法类似于 `Element` 中的 `ElMessageBox.confirm`：

```ts
// 打开确认框
Confirm.open({
    title: "提示", // 确认框标题
    content: "确定要删除吗？", // 确认框内容
    confirm: () => {
      openConfirm(); // 确定按钮回调事件
    },
    // cancel 函数可以自定义，也可以省略
    // close 函数暂时没用到，所以没封装，传入也没用
});
```

## 特别提醒

由于本人水平有限，不太会封装插件，因此采用这样简单的封装方式，本着能用就行的原则，暂时够用了，如果你的能力高超，完全可以将其拓展、封装成功能能全面的插件，感谢阅读~


相关内容：[使用vuetify实现全局v-alert消息通知](https://www.oldmoon.top/post/216)