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 相关文章推荐
JavaScript 创建运动框架的实现代码
May 08 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
小程序转发探索示例
Feb 19 Javascript
js面试题之异步问题的深入理解
Sep 20 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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实现的php代码加密解密类完整实例
2016/10/12 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
js中日期的加减法
2015/05/06 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
python遍历数组的方法小结
2015/04/30 Python
Python虚拟环境项目实例
2017/11/20 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
python中数据库like模糊查询方式
2020/03/02 Python
Python中生成ndarray实例讲解
2021/02/22 Python
毕业生欢送会主持词
2014/03/31 职场文书
结对共建工作方案
2014/06/02 职场文书
运动会加油稿100字
2014/09/19 职场文书
交通安全横幅标语
2014/10/07 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
React配置子路由的实现
2021/06/03 Javascript
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python