confirm使用方法

定义和使用方法

confirm() 方法用于显示一个带有指定消息和 OK 及取消button的对话框。

语法

confirm(message)
參数 描写叙述
message 要在 window 上弹出的对话框中显示的纯文本(而非 HTML 文本)

说明

假设用户点击确定button,则 confirm() 返回 true。假设点击取消button,则 confirm() 返回 false。

在用户点击确定button或取消button把对话框关闭之前,它将阻止用户对浏览器的全部输入。

在调用 confirm() 时,将暂停对 JavaScript 代码的运行。在用户作出响应之前,不会运行下一条语句。

提示和凝视

提示:对话框button的文字是不可改变的。因此请小心地编写问题或消息,使它适合用确认和取消来回答。

实例代码例如以下:

<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
  {
  alert("You pressed OK!");
  }
else
  {
  alert("You pressed Cancel!");
  }
}
</script>
</head>
<body>

<input type="button" onclick="show_confirm()" value="Show a confirm box" />

</body>
</html>



### 实现和使用 Vue3 中的全局 `$confirm` 方法 在 Vue3 项目中实现并使用全局 `$confirm` 方法涉及几个重要步骤。为了使任何组件能够通过 `this.$confirm()` 调用确认对话框,需先创建一个可复用的确认对话框组件,并将其注册为全局方法。 #### 创建 Confirm 组件 首先构建一个简单的确认对话框组件 `ConfirmDialog.vue`: ```vue <template> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <div class="modal-header"> <slot name="header">默认标题</slot> </div> <div class="modal-body"> <slot name="body">默认消息内容</slot> </div> <div class="modal-footer"> <button @click="$emit('close')">取消</button> <button @click="$emit('confirm')">确定</button> </div> </div> </div> </div> </template> <script setup> defineEmits(['close', 'confirm']) </script> <style scoped> /* 添加样式 */ .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); display: table; transition: opacity .3s ease; } .modal-wrapper { display: table-cell; vertical-align: middle; } </style> ``` #### 注册全局方法 为了让所有实例都能访问该功能,在应用入口文件(通常是 `main.js` 或者 `main.ts`)里扩展 Vue 的原型链或者利用 Composition API 来提供此服务[^4]。 对于 Vue3 使用 Composition API 方式如下所示: ```javascript import { createApp } from 'vue' import App from './App.vue' // 导入 confirm 对话框组件 import ConfirmDialog from '@/components/ConfirmDialog.vue'; const app = createApp(App); app.config.globalProperties.$confirm = (options) => new Promise((resolve, reject) => { const instance = document.createElement('div'); document.body.appendChild(instance); let propsData = Object.assign({ visible: true, title: '', message: '' }, options) const Comp = { render() { return h(ConfirmDialog, { ...propsData, onConfirm: () => resolve(true), onClose: () => resolve(false) }) } } const mountedComp = app.mount(Comp, instance); }); export default app.use(/* 插件 */).mount('#app') ``` 上述代码片段展示了如何将 `$confirm` 函数作为全局属性添加到应用程序上下文中,允许开发者以编程方式显示模态窗口并处理用户的交互响应。 #### 使用 $confirm 方法 一旦完成了以上设置工作,则可以在任意地方轻松调用 `this.$confirm({title:'警告!',message:'您真的要删除吗?'})` 并接收返回的结果来进行后续操作[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值