如何在vue中创建报警确认框

<template>
  <div>
    <button @click="showAlert = true">显示报警确认框</button>
    <div v-if="showAlert">
      <swal
        title="确认框标题"
        text="确认框内容"
        showCancelButton
        confirmButtonText="确认按钮"
        cancelButtonText="取消按钮"
        @confirm="handleConfirm"
        @cancel="handleCancel"
      ></swal>
    </div>
  </div>
</template>

<script>
import swal from 'vue-sweetalert2';

export default {
  components: {
    swal,
  },
  data() {
    return {
      showAlert: false,
    };
  },
  methods: {
    handleConfirm() {
      // 处理确认按钮点击逻辑
      // 可以在这里执行相应的操作，例如发送请求或更新数据
      this.showAlert = false; // 隐藏报警确认框
    },
    handleCancel() {
      // 处理取消按钮点击逻辑
      this.showAlert = false; // 隐藏报警确认框
    },
  },
};
</script>