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

网络编程 2024/11/16 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

说明

UI组件是使用 Quasar Framework 。

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

确认离开提示框

实现效果

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

实现代码：

<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）表单没有输入任何值，直接点击关闭，直接表单弹出框；

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

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

2）表单内容没有编辑任何值，直接点击关闭，直接表单弹出框；

总结

vue表单离开弹窗提示,vue,表单弹窗提示

标签：

vue表单离开弹窗提示,vue,表单弹窗提示

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

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

暂无vue实现表单未编辑或未保存离开弹窗提示功能的评论...

www.ioogu.com 极乐门资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

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

vue表单离开弹窗提示,vue,表单弹窗提示

《javascript设计模式》学习笔记五：Javascript面向对象程序设计工厂模式实例分析

JS快速实现简单计算器

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

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

vue表单离开弹窗提示,vue,表单弹窗提示

《javascript设计模式》学习笔记五：Javascript面向对象程序设计工厂模式实例分析

JS快速实现简单计算器

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

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存