$message组件onclose执行了 但是里面调用其他函数无效
时间: 2023-12-02 17:06:03 浏览: 18
可能是因为在onclose事件中调用其他函数时,该函数所依赖的资源已经被释放掉了,导致函数执行失败。你可以尝试在onclose事件中添加一些延迟代码,让该函数在一定时间后再执行,或者在onclose事件中调用该函数的父级组件的方法来执行该函数。另外,你也可以在函数中添加一些错误处理的代码,以防止出现错误导致程序崩溃。
相关问题
this.$message({ message: "操作成功", type: "success", duration: 1500, onClose: () => { this.parent.showFlag = true; this.parent.addOrUpdateFlag = false; this.parent.banjiCrossAddOrUpdateFlag = false; this.parent.search(); this.parent.contentStyleChange(); } });
这是一段 Vue.js 的代码,它使用 `$message` 方法弹出一个成功提示框,并在提示框关闭时执行一些操作。具体来说,它使用了对象字面量的方式构造一个配置对象,其中 `message` 字段设置提示框的文本信息为“操作成功”,`type` 字段设置提示框的类型为“success”,`duration` 字段设置提示框的显示时长为 1500 毫秒。此外,它还定义了 `onClose` 回调函数,该函数会在提示框关闭时被调用,其中使用 `this.parent` 获取到当前组件的父组件对象,然后分别将 `showFlag`、`addOrUpdateFlag` 和 `banjiCrossAddOrUpdateFlag` 这三个属性设置为 `true`、`false` 和 `false`,然后分别调用 `search()` 和 `contentStyleChange()` 方法。这段代码可能用于在前端页面中完成某个操作(如添加或更新数据)后,弹出一个提示框并刷新页面。
解释以下代码shHandler(){ this.$confirm(`确定操作?`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { this.$http({ url: "ceshishenqing/update", method: "post", data: this.shForm }).then(({ data }) => { if (data && data.code === 0) { this.$message({ message: "操作成功", type: "success", duration: 1500, onClose: () => { this.getDataList(); this.shDialog() } }); } else { this.$message.error(data.msg); } }); }); },
这段代码实现了一个审核操作的功能。
首先,在 `shHandler()` 方法中,使用 `this.$confirm()` 方法弹出一个确认框,询问用户是否确认执行该操作。确认框中包含一个提示信息和两个按钮,分别是“确定”和“取消”。
如果用户点击了“确定”按钮,则会执行 `.then()` 方法中的代码。在该代码块中,使用 `this.$http()` 方法向服务器发送一个 POST 请求,请求的 URL 是 `ceshishenqing/update`,请求的数据是 `this.shForm`。请求成功后,会根据服务器返回的数据显示一个操作成功或者操作失败的提示信息。
如果操作成功,则需要在 `this.$message()` 的 `onClose` 回调函数中执行两个操作:调用 `this.getDataList()` 方法来刷新数据列表,调用 `this.shDialog()` 方法关闭审核对话框。
需要注意的是,`this.$confirm()` 和 `this.$message()` 都是 Element UI 中的组件,需要在使用之前先引入 Element UI 库。另外,`this.$http()` 方法是在 Vue.js 2.x 中使用的,如果你在使用 Vue.js 3.x,则需要使用 `axios` 或者其他类似的 HTTP 库来发送请求。