简述
在表单页面,用户点击按钮跳转时,需要弹出二次确认框来进行二次确认,由于有很多这种需求,从而写了一个统一的确认框,统一调用。
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 // 传入自己想执行的方法
})
})