幽灵资源网 Design By www.bzswh.com

说明

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,表单弹窗提示

幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?