37 div 移除范围之后 自动保存小组件

前言

这里的主要的需求是 一个目标组件内有多个 表单输入

然后 当我们这边移出 目标组件 之后, 便进行一个 自动保存

如果 目标组件 的目标表单数据 无任何输入, 则不进行提交 

这里的控制, 主要是 交给子组件, 子组件这边 维护 表单的状态, 维护用户是否存在输入, 然后 移出之后 提交数据通知到父组件

父组件, 这边则是主要 负责主要的业务控制 

测试用例

业务组件如下

<template>

  <div>
    <div-leave-item style="position: relative;top: 100px;left: 300px; border: 1px green solid;" @onSelectionChanged="onItemChanged" >
    </div-leave-item>

    <div-leave-item style="position: relative;top: 200px;left: 300px; border: 1px blue solid;" @onSelectionChanged="onItemChanged" >
    </div-leave-item>
  </div>

</template>

<script>

  import divLeaveItem from "./divLeaveItem";

    export default {
        name: "divLeave",
      components : {
        divLeaveItem
      },
      methods: {
        onItemChanged(formItem) {
          console.log(" save item : " + JSON.stringify(formItem))
          alert(" save item : " + JSON.stringify(formItem))
        }
      }
    }
</script>

<style scoped>

</style>

目标组件如下

<template>

  <div style="width: 200px;height: 100px" @mouseleave="onMouseLeave" @mouseenter="onMouseEnter" >
    <el-select v-model="form.classChoosed" @change="innerSelectChanged">
      <el-option :label="item.name" :value="item.code" v-for="item in list" :key="item.code"></el-option>
    </el-select>

    <el-select v-model="form.studentsChoosed" multiple @change="innerSelectChanged" >
      <el-option :label="item.name" :value="item.code" v-for="item in students" :key="item.code"></el-option>
    </el-select>
  </div>

</template>

<script>
    export default {
      name: "divLeaveItem",
      data() {
          return {
            isFormChanged: false,
            form: {
              classChoosed: "",
              studentsChoosed: [],
            },
            list: [
              {
                code: "class1",
                name: "班级1"
              },{
                code: "class2",
                name: "班级2"
              },{
                code: "class3",
                name: "班级3"
              }
            ],
            students: [
              {
                code: "zs",
                name: "张三"
              },{
                code: "ls",
                name: "李四"
              },{
                code: "ww",
                name: "王五"
              }
            ]
          }
      },
      methods: {
        onMouseLeave() {
          if(!this.isFormChanged) {
            return
          }

          this.$emit("onSelectionChanged", this.form)
          this.isFormChanged = false
        },
        onMouseEnter() {
          // this.isFormChanged = false
        },
        innerSelectChanged() {
          this.isFormChanged = true
        }
      }
    }
</script>

<style scoped>

</style>

演示效果

有输入切换之后, 移出 div 会触发 子组件这边的事件提交, 提交回调, 以及业务数据给父组件 

然后 父组件 这边进行业务处理, 比如提交 保存接口 等等

完