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 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
Javascript节点关系实例分析
May 15 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 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 nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
python列表去重的二种方法
2014/02/14 Python
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
2014年安全生产目标责任书
2014/07/23 职场文书
硕士论文致谢范文
2015/05/14 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server