vue使用 this.$confirm时区分取消与右上角关闭和弹窗关闭
html代码
<template> <el-button type="text" @click="open">点击打开 Message Box</el-button> </template>
js代码
<script> export default { methods: { open() { this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', { distinguishCancelAndClose: true, confirmButtonText: '保存', cancelButtonText: '放弃修改' }) .then(() => { this.$message({ type: 'info', message: '保存修改' }); }) .catch(action => { this.$message({ type: 'info', message: action === 'cancel' ? '放弃保存并离开页面' : '停留在当前页面' }) }); } } } </script>
全部代码
<template> <el-button type="text" @click="open">点击打开 Message Box</el-button> </template> <script> export default { methods: { open() { this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', { distinguishCancelAndClose: true, confirmButtonText: '保存', cancelButtonText: '放弃修改' }) .then(() => { this.$message({ type: 'info', message: '保存修改' }); }) .catch(action => { this.$message({ type: 'info', message: action === 'cancel' ? '放弃保存并离开页面' : '停留在当前页面' }) }); } } } </script>
vue给this.$confirm设置多个按钮
Vue中使用this.confirm时，虽然默认只提供了确认和取消两个按钮，但您可以通过自定义Vue.prototype上的confirm方法或者直接使用第三方UI库（如Element UI、Vuetify等）提供的API来自定义对话框，以包含更多的操作按钮。以下是一个基于Element UI的示例，展示如何在this.$confirm中设置多个操作按钮：
使用Element UI自定义确认对话框
Element UI并没有直接提供在this.$confirm中设置多个按钮的选项，但您可以使用el-dialog组件来自定义一个具有多个操作按钮的对话框。下面是一个基本示例：
HTML代码
<template> <el-dialog :title="'系统提示'" :visible.sync="dialogVisible" width="30%" @close="handleClose" > <p>页面内已存在正在编辑的模型</p> <span slot="footer" class="dialog-footer"> <el-button @click="handleEdit">继续编辑</el-button> <el-button @click="handleCreateNew">创建新模型</el-button> <el-button @click="handleClose">关闭</el-button> </span> </el-dialog> </template>
js代码
<script> export default { data() { return { dialogVisible: false, }; }, methods: { // 显示自定义对话框 showDialog() { this.dialogVisible = true; }, // 继续编辑操作 handleEdit() { this.$emit('update', { page_id: this.page_id }); this.dialogVisible = false; }, // 创建新模型操作 handleCreateNew() { this.add_page(); this.dialogVisible = false; }, // 关闭对话框 handleClose() { this.dialogVisible = false; }, }, }; </script>
全部代码
<template> <el-dialog :title="'系统提示'" :visible.sync="dialogVisible" width="30%" @close="handleClose" > <p>页面内已存在正在编辑的模型</p> <span slot="footer" class="dialog-footer"> <el-button @click="handleEdit">继续编辑</el-button> <el-button @click="handleCreateNew">创建新模型</el-button> <el-button @click="handleClose">关闭</el-button> </span> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, }; }, methods: { // 显示自定义对话框 showDialog() { this.dialogVisible = true; }, // 继续编辑操作 handleEdit() { this.$emit('update', { page_id: this.page_id }); this.dialogVisible = false; }, // 创建新模型操作 handleCreateNew() { this.add_page(); this.dialogVisible = false; }, // 关闭对话框 handleClose() { this.dialogVisible = false; }, }, }; </script>
