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

简述

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

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 // 传入自己想执行的方法
    })
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风吹过你怎么样了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值