在 Vue 3 框架内使用 SweetAlert2库，修改提示框

步骤一：安装SweetAlert

使用npm或者yarn来安装，二者选其一

npm install sweetalert2
或
yarn add sweetalert2

步骤二：全局注册或局部导入

1.全局注册使用

main：

import Swal from 'sweetalert2';
app.config.globalProperties.$swal = Swal;

使用的组件中：

<template>
  <div>
    <button @click="showAlert">显示提示框</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const successMessage = ref("操作成功！");

const showAlert = () => {
  try {
  // 在整个应用中通过 $swal 访问 SweetAlert2
    this.$swal.fire({
       title: 'SweetAlert2提示',  //提示框标题
      text: successMessage.value ||"操作失败！",  // 提示文本内容，可以是变量也可以是文本
      confirmButtonText: '确定'
    });
  } catch (error) {
    console.error("SweetAlert2 调用出错:", error);
  }
};
</script>

2.局部导入使用

使用的组件中：

<template>
  <div>
    <button @click="showAlert">显示提示框</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 导入 sweetalert2 库
import Swal from 'sweetalert2';

const successMessage = ref("操作成功！");

const showAlert = () => {
  try {
    Swal.fire({
      title: 'SweetAlert2提示',  //提示框标题
      text: successMessage.value ||"操作失败！",  // 提示文本内容，可以是变量也可以是文本
      confirmButtonText: '确定'
    });
  } catch (error) {
    console.error("SweetAlert2 调用出错:", error);
  }
};
</script>