关闭模态-在Vue.Js中单击“确定”后的对话框

<template>
  <div>
    <!-- 模态对话框 -->
    <div v-if="isModalVisible" class="modal">
      <div class="modal-content">
        <p>这是一个模态对话框</p>
        <button @click="handleConfirm">确定</button>
        <button @click="isModalVisible = false">取消</button>
      </div>
    </div>

    <!-- 触发模态对话框的按钮 -->
    <button @click="isModalVisible = true">打开模态对话框</button>
  </div>
</template>

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

export default {
  setup() {
    const isModalVisible = ref(false);

    function handleConfirm() {
      // 处理确认逻辑
      console.log('用户点击了确定');
      isModalVisible.value = false; // 关闭模态对话框
    }

    return {
      isModalVisible,
      handleConfirm
    };
  }
};
</script>

<style>
.modal {
  /* 样式代码 */
}
.modal-content {
  /* 样式代码 */
}
</style>