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入门教程(3) js面向对象
Jan 31 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
JavaScript 程序编码规范
Nov 23 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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 如何向 MySQL 发送数据
2006/10/09 PHP
删除数组元素实用的PHP数组函数
2008/08/18 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
React优化子组件render的使用
2019/05/12 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
Python编写百度贴吧的简单爬虫
2015/04/02 Python
JSON Web Tokens的实现原理
2017/04/02 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
python实现取余操作的简单实例
2020/08/16 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
初婚初育证明
2014/01/14 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
旅游节目策划方案
2014/05/26 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
信访工作汇报材料
2014/10/27 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
如何利用python创作字符画
2022/06/25 Python