【前端笔记】20191210-Vue通过表单变化来提醒用户是否要保存

1.【重点】Vue通过表单变化来提醒用户是否要保存

通过vue的监听去判断表单元素是否变化很省心，但是由于组件的值经常变化，这里需要特别注意赋值的影响，以及弄一些标识来进行判断是否有变化了

弄一个变化标识比如：isChange

初始化和第一次赋值都要注意 这个变量 isChange=false,再进行赋值后通过 changeNum=0,changeNum++来判断是什么情况的赋值，因为每次赋值，都能监听到表单的变化，所以这个需要注意，最开始的赋值可以保存一个变量来判断之后的表单有没有发生变化，可以通过vue的watch加入deep:true属性去监听到嵌套对象的变化

保存完之后，还要记得把isChange和一些初始化的值还原，核心思路：

监听表单变化：
formOperate字段里包含有些从后端拿来要转变的数据，所以两者都要监听一下变化

   watch:{
     dataFormEdit: { //监听给来保存
        handler(newValue, oldValue) {
          this.doIsChange('dataFormEdit');
        },
        deep: true
     }, 
     formOperate:{ //监听给来保存
      handler(newValue,oldValue){
        this.doIsChange('formOperate');
      },
      deep: true
     }           
   },

声明变化：

            assignChange(){  //声明变化空间
              this.generatePostData(); //重新生成
              this.postDataSaved = Object.assign({}, this.postData); //重新生成
              this.changeNum = 0;
              this.isChangeLaunch = false;  
            },

判断是否改变：

            doIsChange(changeFiled){
              if (this.luanchItemCurrentIndex != null) {  //正在打开编辑页面
                if (this.changeNum == -1) { //首次打开了编辑页面
                  this.changeNum++;  //此时changeNum = 0;
                } else {
                  //判断当前编辑元素是否改变过
                  this.generatePostData();
                  if (JSON.stringify(this.postDataSaved) == JSON.stringify(this.postData)) {
                    this.isChangeLaunch = false;
                  } else {
                    // console.log('changeFiled:', changeFiled);
                    this.isChangeLaunch = true;
                    this.changeNum++;
                    // console.log("没保存，要提示!!!!");
                  }

                }
              } else {  //没有打开过编辑页面，则将改变次数设置为-1
                this.changeNum = -1;
              } 
            },

未保存离开的提示：

            luanchItemselect(item, index) {
              this.luanchItemSkipIndex = index;
              if (this.isChangeLaunch) {
                if (!confirm("当前投放未保存,确认切换")) {
                  return false;
                }
              }              

              this.clearEditData();  //清理编辑数据

              this.luanchItemCurrentIndex = index;
              this.launchItemCurrentEdit = item;
              this.dataFormEdit = Object.assign({}, item);

              //将通过字符串拼接格式的转化为前端页面使用的数组
              this.formOperate.targetOSCheckboxData = this.adxCommon.fommaterVerticalVirgul.toArr(this.dataFormEdit.targetOS);
              this.formOperate.targetNetworkCheckboxData = this.adxCommon.fommaterVerticalVirgul.toArr(this.dataFormEdit.targetNetwork);
              this.formOperate.targetOperatorCheckboxData = this.adxCommon.fommaterVerticalVirgul.toArr(this.dataFormEdit.targetOperator);

              //回显是否选中All，如果选中All,那么则将其他复选框置灰
              this.checkboxDisabled(this.formOperate.targetOSCheckboxData, 'targetOS');
              this.checkboxDisabled(this.formOperate.targetNetworkCheckboxData, 'targetNetwork');
              this.checkboxDisabled(this.formOperate.targetOperatorCheckboxData, 'targetOperator');

              //转化日期开始时间和结束时间
              if (this.dataFormEdit.dateStart) {
                //格式必须严格要求，毫秒的话要3位不然回显不了，如果三位则， 
                this.formOperate.datePick = [this.dataFormEdit.dateStart, this.dataFormEdit.dateEnd];
              }

              //给来判断是否提示保存
              this.assignChange();

            }, 

保存的思路：
因为有些数据是自己转变了，所以需要自己手动生成要保存的数据postData

            doUpdate(formName){
              this.$refs[formName].validate(valid => {
                if (valid) {

                  this.formOperate.loadingSave = true;
                  this.generatePostData();  //生成要提交的数据 this.postData

                  updateDeliverInfo(this.postData).then(res => {
                    if (res.code === 200) {
                      this.$message({
                        message: "保存成功",
                        type: "success",
                        showClose: true,
                        duration: 3 * 1000
                      });

                      this.loadLaunchList();
                      // S将修改环境弄干净
                      this.assignChange();
                    } else {
                      this.$message({
                        message: res.msg,
                        type: "error",
                        showClose: true,
                        duration: 3 * 1000
                      })
                    }
                    this.formOperate.loadingSave = false;
                  }).catch(err => {
                    this.formOperate.loadingSave = false;
                  });                  
                }

              })
            },

只是记录一下思路，具体的业余还要灵活进行改变！！！

2.display:none和visible: hidden的区别
相同点: 两者都能把某个元素隐藏起来，而且DOM结构代码仍然在页面上

不同点:
display: none：不在视图占空间，当显示和隐藏时会影响父容器的大小发生改变

visible: hidden: 在视图占空间，当显示和隐藏时不会影响父容器的大小发生改变

参考：https://www.cnblogs.com/nicholas_f/archive/2009/03/27/1423207.html

3.v-if和v-show的区别
相同点： 两者都可以将元素隐藏和显示

不同点：
v-if: DOM结构代码会移除和新增，对绑定的事件可能也会产生影响
v-show: DOM结构代码不发生改变，始终在页面上

参考：https://www.cnblogs.com/echolun/p/7803943.html