所有表单路由跳转时，弹出二次确认框

简述

在表单页面，用户点击按钮跳转时，需要弹出二次确认框来进行二次确认，由于有很多这种需求，从而写了一个统一的确认框，统一调用。

1. 二次确认框代码 notSave.vue

<template>
<el-dialog
:visible.sync="visible"
width="400px"
class="remove-confirm"
:before-close="handleClose"
@click="handleClose"
>
<div slot="title">
<span>提示</span>
</div>
<div class="content">
<div class="content-first">{{ contentTop
}}</div>
<div class="content-second">{{ contentBottom }}</div>
</div>
<div class="footer">
<el-button plain @click="handleClose" class="ml20">取消</el-button>
<el-button type="primary" class="ml20" @click="submitForm">确定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'secondConfirm',
data () {
return {
contentTop: '确定退出吗？',
contentBottom: '退出后已填信息将不保存',
next: '',
cancel: '',
visible: false
}
},
methods: {
show () {
this.visible = true
},
submitForm () {
this.next()
this.visible = false
},
handleClose () {
if (this.cancel) {
this.cancel()
}
this.visible = false
}
}
}
</script>
<style lang="less" scoped>
.remove-confirm {
.content {
text-align: left;
}
.content-first {
margin-top: 16px;
font-size: 14px;
font-weight: 500;
color: #333333;
}
.content-second {
margin-top: 16px;
margin-bottom: 28px;
font-size: 14px;
font-weight: 400;
color: #666666;
}
.footer {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
.ml20 {
width: 68px;
height: 32px;
border-radius: 2px;
font-size: 12px;
}
}
</style>
<style lang="less" scoped>
.remove-confirm {
}
</style>

2. 导出二次确认框的js文件 notSave.js

import Vue from 'vue'
import secondConfirm from '../components/notSave'
const notSaveBox = Vue.extend(secondConfirm)
secondConfirm.install = function (data) {
let instance = new notSaveBox({
data
}).$mount()
document.body.appendChild(instance.$el)
Vue.nextTick(() => {
// show方法是我们自己写在二次确认框里面的方法，目的是将visible置为true
instance.show()
})
}
export default secondConfirm

3. 在其他文件调用

import secondConfirm from './js/notSave'
router.beforeEach((to, from, next) => {
// 可以在store层加一个验证，如果是完成表单合法跳转，则直接next()
secondConfirm.install({
next: next // 传入自己想执行的方法
})
})

最后

以上就是勤恳溪流为你收集整理的所有表单路由跳转时，弹出二次确认框的全部内容，希望文章能够帮你解决所有表单路由跳转时，弹出二次确认框所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。