The reason

Recently, WHEN I was writing the business code of the company, I met such a requirement that I needed to add a pop-up window to write this part for secondary confirmation. The component library used is the older Ant Desgin Vue 1.2.4. There is no custom HTML section like elementUI’s $confirm method. But I have very little content.

So if you use the traditional double check method of writing popover directly

Disadvantage 1: The business code becomes too much

Weakness 2: I’m creating an interface interception on top of what someone else has already done, and the arguments are passed to another function. To use the popover component, I need to define cancel and close functions, and I have to throw the assembled data globally. And then when you confirm it, you take it back and throw it back.

If I could wrap my component like the $Confirm callback function or primose, there would be no arguments thrown around and functions written less. Code can be written in half.

I’ve actually written a wrapper like this before, when I was writing a small program. But I didn’t write it for so long that I forgot. The heart is not willing to, then Saturday back to try. A success

Related to knowledge

1. Dirty data detection

2. Callback functions

3. Vue data transfer mode

The first is data monitoring

I’m going to use the elementUI popover here to simplify things

The principle comes from my earliest part: juejin.cn/post/684490…

A way of listening for data


1, popover part of the code

<template>
  <el-dialog title="Tip" :visible.sync="dialogVisible" width="30%"<span> This is a piece of information </span> <span slot="footer" class="dialog-footer">
      <el-button @click="colse"</el-button> <el-buttontype="primary" @click="colse"</el-button> </span> </el-dialog> </template> <script>export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    confirm() {
      this.dialogVisible = true;
    },
    colse() {
      this.dialogVisible = false;
      if(this.callback ! = null) { this.callback(false);
      }
    },
    coloseWin(callback) { this.callback = callback; }}}; </script>Copy the code

2. Use part

<template>
  <div class="test">
    <el-button @click="ceshi"</el-button> <DialogConfirm ref="DialogConfirm" />
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  components: {
    DialogConfirm: () =>
      import("@/backstage/components/dialog_confirm/dialogConfirm.vue")
  },
  methods: {
    ceshi() {
      const Confirm = this.$refs["DialogConfirm"];
      Confirm.confirm();
      Confirm.coloseWin(e => { console.log(e); }); }}};Copy the code



The second way: the promise way

1. Change the popover part like this

<template>
  <el-dialog title="Tip" :visible.sync="dialogVisible" width="30%"<span> This is a piece of information </span> <span slot="footer" class="dialog-footer">
      <el-button @click="colse"</el-button> <el-buttontype="primary" @click="queding"</el-button> </span> </el-dialog> </template> <script>export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    confirm() {
      this.dialogVisible = true;
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },
    colse() {
      this.dialogVisible = false;
      this.resolve(111);
    },
    queding() {
      this.dialogVisible = false;
      this.reject(true); }}}; </script>Copy the code

2. Use partial code

<template>
  <div class="test">
    <el-button @click="ceshi"</el-button> <DialogConfirm ref="DialogConfirm" />
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  components: {
    DialogConfirm: () =>
      import("@/backstage/components/dialog_confirm/dialogConfirm.vue")
  },
  methods: {
    ceshi() {
      const Confirm = this.$refs["DialogConfirm"]; Confirm.confirm() .then(e => { console.log(e); }) .catch(e => { console.log(e); }); }}}; </script>Copy the code