причина

Недавно столкнулся с такой потребностью при написании бизнес-кода компании, нужно добавить новое всплывающее окно для написания этой части для вторичного подтверждения. Используемая библиотека компонентов — старая версия ant desgin vue 1.2.4. В этой библиотеке компонентов нет способа настроить html-часть, как в методе $confirm elementUI. Но мой контент на самом деле очень мал.

Если вы используете традиционный метод вторичного подтверждения непосредственного написания всплывающего окна

Недостаток 1: бизнес-кода станет много

Недостаток 2: я добавляю перехват интерфейса на основе того, что сделали другие, а параметры передаются в другую функцию. Чтобы использовать компонент всплывающего окна, вам нужно определить функции отмены и закрытия, и я должен кинуть исходно собранные данные в файл global. Потом после подтверждения забрать обратно из глобалки и закинуть обратно.

Если моя инкапсуляция компонента может быть похожа на метод функции обратного вызова $confirm или метод primose, то параметры не будут перебрасываться, и функция может быть написана меньше. Кода можно написать вдвое меньше.

На самом деле, я уже писал подобный пакет в прошлом, и это было, когда я писал небольшую программу. Но я давно не писал, поэтому забыл. Не смирился, потом вернулся в субботу попробовать. удалось

предполагает знание

1. Обнаружение грязных данных данных

2. Функция обратного вызова

3. Метод передачи данных Vue

Первый: метод мониторинга данных

Здесь всплывающее окно elementUI используется для упрощения

Обоснование исходит из этой ранней части меня:nuggets.capable/post/684490…

способ мониторинга данных

1. Часть кода всплывающего окна

<template>
  <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="colse">取 消</el-button>
      <el-button type="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>

2. Используйте часть

<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);
      });
    }
  }
};

Второй: метод обещания

1. Измените всплывающее окно на это

<template>
  <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="colse">取 消</el-button>
      <el-button type="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>

2. Используйте часть кода

<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>