vue实现表单未编辑或未保存离开弹窗提示功能


Posted in Javascript onApril 08, 2020

说明

UI组件是使用 Quasar Framework 。

最近做一个表单弹出框,表单保存提交,但是,产品提出,用户不保存,而关闭弹出框时,要给出一个弹窗提示。这个功能,可以用watch监听表单数据。当数据表单发生变化,用户点击了关闭按钮,则根据监听结果来判断用户输入或编辑了数据,进而出现弹窗提示,让用户选择是否离开;当数据没发生变化,则不必提示。

确认离开提示框

实现效果

先实现一个确认离开提示框,效果如下:

vue实现表单未编辑或未保存离开弹窗提示功能 

实现代码:

<template>
 <div>
  <q-dialog :persistent="true" v-model="alert">
   <q-card style="width:340px;">
    <q-card-section>
     <q-btn icon="close" flat round dense v-close-popup class="float-right" />
    </q-card-section>

    <q-card-section class="q-pt-none text-center" style="margin-top: 10px;">
     当前数据未保存,是否离开?
    </q-card-section>

    <q-card-actions align="right">
     <q-btn
      flat
      label="是"
      color="primary"
      v-close-popup
      @click="handleConfirm"
     />
     <q-btn flat label="否" v-close-popup />
    </q-card-actions>
   </q-card>
  </q-dialog>
 </div>
</template>

<script>
export default {
 name: 'LeaveTipDialog',
 props: {
 },
 data () {
  return {
   alert: false
  }
 },
 methods: {
  init () {
   this.alert = true
  },
  handleConfirm () {
   // 提交父组件的事件
   this.$emit('handleConfirm')
  }
 }
}
</script>

<style lang="stylus">

</style>

监听代码

监听代码如下:

watch: {
  datas: {
   handler (val) {
    if (val) {
     this.count++
    }
   },
   deep: true
  }
 },

判断数据变化的次数,因为刚加载数据未完全加载的时候,datas是空对象,待加载完之后,则出现一次数据变化, deep主要是深层次监听,因为数据是层层对象,比较复杂

创建/编辑 表单弹出框

代码,表单省略了,大致抽象为:

<template>
 <div>
  <q-dialog :persistent="true" v-model="visible">
   <q-card class="card">
    <q-card-section
     transition-hide="flip-up"
     class="row items-center q-pb-none"
     style="padding-top: 10px;"
    >
     <div class="text-h6">{{ isEdit ? "编辑" : "创建" }}xxxx</div>
     <q-space />
     <q-btn icon="close" flat round dense @click="close" />
    </q-card-section>
    <q-card-section class="form">
     <div class="line"></div>
     <q-form ref="form">
     <!-- 省略了表单行 -->
     </q-form>
    </q-card-section>
   </q-card>
  </q-dialog>
  
    <!-- 弹窗 关闭 编辑/创建时 确认离开-->
  <LeaveTipDialog
   v-if="leave"
   ref="leave"
   @handleConfirm="handleLeave"
  ></LeaveTipDialog>
 </div>
</template>

引入上面写好的确认离开提示框组件:

import LeaveTipDialog from 'components/LeaveTipDialog'
props: {
  isEdit: {
   type: Boolean,
   required: true,
   default: false
  }
 },
 components: {
  LeaveTipDialog
 },
 data () {
  return {
   visible: false,
   form: {
   // .... 具体省略
   },
   count: 0, // form数据修改的数量
   leave: false
  }
 },
 watch: {
  form: {
   handler (val) {
    if (val) {
     this.count++
    }
   },
   deep: true
  }
 },

关闭时判断的代码逻辑:

注意,监听获取到的 count ,分为两种情况:

1、当打开的是新建数据的表单,那么一开始, form 的数据是空内容或者默认值,当用户输入了内容,点击关闭按钮,获取到的 this.count 是1或者更大的值。所以, isEdit 为 fasle 时,判断条件是 !this.isEdit && this.count > 0 时弹出提示,否则不提示直接关闭表单弹出框。

2、当打开的是编辑数据的表单,那么一开始, form 的数据是空内容或者默认值,当打开表单弹框时,先获取了数据详情内容并赋值费表单 form 数据,此时 this.count 的值已经是1了。这时,当用户编辑了表单内容,点击关闭按钮,获取到的 this.count 是大于1的值。所以, isEdit 为 true 时,判断条件是 this.isEdit && this.count > 1 时弹出提示,否则不提示直接关闭表单弹出框。

methods: {
  close () {
   // console.log(`isEdit:${this.isEdit}:${this.count}`)
   if (this.isEdit && this.count > 1) {
    // 编辑 数据有修改弹出提示
    this.leave = true
    this.$nextTick(() => {
     this.$refs.leave.init()
    })
   } else if (!this.isEdit && this.count > 0) {
    // 新建 数据有修改弹出提示
    this.leave = true
    this.$nextTick(() => {
     this.$refs.leave.init()
    })
   } else {
    this.resetForm()
    this.leave = false
    this.visible = false
   }
  },
  handleLeave () {
   this.resetForm()
   this.leave = false
   this.visible = false
  },
  resetForm(){
    // this.form.xxxx = '' // 表单数据清空
    this.count = 0
  }
 }

实现效果

1、新建数据表单弹出框:

1)表单有输入,未保存点击关闭,给出一个弹窗提示“当前数据未保存,是否离开?”,选择是,关闭表单弹出框;选择否,表单弹出框不关闭;

2)表单没有输入任何值,直接点击关闭,直接表单弹出框;

vue实现表单未编辑或未保存离开弹窗提示功能 

2、编辑详情的数据表单弹出框:

1)表单内容有编辑情况,未保存点击关闭,给出一个弹窗提示“当前数据未保存,是否离开?”,选择是,关闭表单弹出框;选择否,表单弹出框不关闭;

2)表单内容没有编辑任何值,直接点击关闭,直接表单弹出框;

vue实现表单未编辑或未保存离开弹窗提示功能 

总结

到此这篇关于vue实现表单未编辑或未保存离开弹窗提示功能的文章就介绍到这了,更多相关vue表单离开弹窗提示内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
javascript实现随机抽奖功能
Dec 30 Javascript
JS快速实现简单计算器
Apr 08 #Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 #Javascript
vue-cli3单页构建大型项目方案
Apr 07 #Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 #Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 #Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 #Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 #Javascript
You might like
php $_SERVER当前完整url的写法
2009/11/12 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
PHP实现微信对账单处理
2018/10/01 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
webpack4简单入门实例
2018/09/06 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
Django开发的简易留言板案例详解
2018/12/04 Python
python绘制地震散点图
2019/06/18 Python
PyTorch实现AlexNet示例
2020/01/14 Python
python画图常规设置方式
2020/03/05 Python
python requests.get带header
2020/05/05 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
Python如何定义一个函数
2015/09/01 面试题
社会保险接收函
2014/01/12 职场文书
个人委托书范本
2014/04/02 职场文书
人代会简报
2015/07/21 职场文书