So verwenden Sie das V-Modell und versprechen, die Vue-Popup-Komponente zu implementieren

Dieses Mal zeige ich Ihnen, wie Sie V-Model verwenden, und verspreche, die Vue-Popup-Komponente zu implementieren. Was sind die Vorsichtsmaßnahmen bei der Verwendung von V-Model und verspreche, das Vue-Popup zu implementieren? Komponente, das Folgende ist ein praktischer Fall, schauen wir uns das an.

Vor Kurzem verfügt das Unternehmen über ein Back-End-Geschäft, das im bestehenden Back-End-System geschrieben ist. Es muss jedoch separat herausgezogen werden, um später ein neues Back-End-System für dieses Geschäft zu erstellen. Daher kann die Vue-Komponentenbibliothek im vorhandenen Back-End-System nicht mehr verwendet werden (da ich nicht weiß, auf welcher Komponentenbibliothek das zukünftige System basieren wird, um Probleme bei zukünftigen Transplantationsprojekten zu vermeiden). Die Popup-Fensterfunktion ist in meinem Unternehmen nicht vorhanden, daher kann ich nur eine manuell schreiben (obwohl die Popup-Fensterkomponente sehr einfach ist und ich sie selbst zusammenfassen möchte. Bitte weisen Sie darauf hin, wenn es Fehler gibt). Zuerst habe ich traditionelle Requisiten und $emit verwendet, aber ich hatte das Gefühl, dass die Logik, zwei Stornierungs- und Bestätigungsrückrufe zu erhalten, verstreut war, also habe ich verwendet. Das Zusammenschreiben der beiden Rückrufe anstelle von zwei Versprechensrückrufen ist nicht unbedingt eine gute Idee, aber es liefert eine Idee.

1. Übersicht

Sehen wir uns zuerst die endgültige Aufrufmethode an

props $emit-Methode

<chat-modal ref="chat-modal" v-model="showModal" cancelText="取消" sureText="确认" title="弹窗标题" small @on-ok="onOK" @on-cancel="onCancel">
  <p>slot的东西,想向弹窗中添加自定义的内容</p>
</chat-modal>
methods: {
  display() {
   this.showModal = true;//交互点击手动触发显示弹窗 
  },
  onOK() {},//点击确认的回调
  onCancel() {}//点击取消的回调
}

Promise-Callback-Methode

<chat-modal ref="chat-modal"></chat-modal>
methods: {
  display() {
    this.$refs["chat-modal"].openModal({
      title: "弹窗标题",
      sureText: "确认",
      cancelText: "取消"
    }).then(res => {
      //点击确认的回调
    }, res => {
      //点击取消的回调
    })
  }
}

Der Vorteil der zweiten Methode besteht darin, dass die gesamte Logik in einer Methode konzentriert ist.

2. Schauen Sie sich den Quellcode der Komponente an

Tipp: Der Stil ist etwas schlecht...

<template>
  <p>
    <p class="shadow" v-show="showModal"></p>
    <p class="modal" :class="{&#39;smSize&#39;: otherText.small || small}" v-show="showModal">
      <p class="header">{{ otherText.title || title}}</p>
      <p class="body">
        <slot></slot>
      </p>
      <p class="footer">
        <p class="item success" id="sure" ref="sure" @click="makeSure" v-show="otherText.sureText || sureText">{{ otherText.sureText || sureText }}</p>
        <p class="item red" id="cancel" ref="cancel" @click="makeCancel" v-show="otherText.cancelText || cancelText">{{ otherText.cancelText || cancelText }}</p>
      </p>
    </p>
  </p>
</template>
<script>
//此组件提供两种调用方法,可以在组件上v-model一个表示是否显示弹窗的对话框，然后需要的一些值通过props传入，然后$emit在组件上@监听做回调
//第二中方法所有的传值回调都只需要在组件内部的一个方法调用然后在组件外部this.$refs[xxx].open调用然后.then触发回调，比上一种方便些
var initOtherText = {
  sureText: "",
  cancelText: "",
  title: "",
  small: false
};
export default {
  props: {
    title: {
      type: String
    },
    sureText: {
      type: String
    },
    cancelText: {
      type: String
    },
    value: {
      type: Boolean
    },
    small: {
      type: Boolean
    }
  },
  watch: {
    value(newVal) {
      this.showModal = newVal;
    }
  },
  data() {
    return {
      otherText: JSON.parse(JSON.stringify(initOtherText)),
      showModal: this.value
    };
  },
  methods: {
    makeSure() {
      this.$emit("on-ok");
      this.$emit("input", false);
    },
    makeCancel() {
      this.$emit("on-cancel");
      this.$emit("input", false);
    },
    openModal(otherText) {
      this.otherText = { ...otherText };
      this.showModal = true;
      var pms = new Promise((resolve, reject) => {
        this.$refs["sure"].addEventListener("click", () => {
          this.showModal = false;
          resolve("点击了确定");
        });
        this.$refs["cancel"].addEventListener("click", () => {
          this.showModal = false;
          reject("点击了取消");
        });
      });
      return pms;
    }
  }
};
</script>
<style lang="scss" scoped>
.shadow {
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  transition: opacity 0.3s ease;
  width: 100%;
  z-index: 50;
}
.modal {
  display: table-cell;
  vertical-align: middle;
  overflow-x: hidden;
  position: fixed;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.33) 0px 2px 8px;
  border-radius: 5px;
  outline: 0px;
  overflow: hidden;
  transition: all 0.3s ease;
  width: 600px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -300px;
}
.header {
  align-items: center;
  background-color: #62a39e;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
  color: #fff;
  font-weight: bold;
  display: -ms-flexbox;
  display: flex;
  height: 3.5rem;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}
.body {
  align-items: center;
  padding: 1.5rem;
}
.footer {
  justify-content: flex-end;
  padding: 1.5rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  float: right;
}
.item {
  color: white;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  display: inline-block;
}
.info {
  background-color: #2196f3;
}
.success {
  background-color: #62a39e;
}
.red {
  background-color: #e95358;
}
.smSize {
  height: 200px;
}
</style>

Analysieren Sie zunächst die erste Möglichkeit: Der Aufrufer muss eine Variable (in diesem Beispiel showModal) an das V-Modell außerhalb der Komponente binden, um anzugeben, ob das Popup-Fenster angezeigt wird. Dies muss manuell erfolgen Legen Sie this.showModal = true außerhalb der Komponente fest, und die Requisiten innerhalb der Komponente definieren einen Wert als Wert: {Typ: Boolean} und deklarieren eine Variable innerhalb der Komponente, um den von außen übergebenen Requisitenwert zu synchronisieren Der Wert ist showModal: this.value (der intern deklarierte Wert wird auch showModal genannt). Überwachen und synchronisieren Sie dann den showModal-Wert innerhalb der Komponente, der angezeigt oder ausgeblendet werden muss. Das Ereignis wird verworfen, wenn innerhalb der Komponente auf die Schaltflächen „OK“ und „Schließen“ geklickt wird Funktion watch: { value(newVal) { this.showModal = newVal } }. Zu diesem Zeitpunkt kann das Popup-Fenster angezeigt und ausgeblendet werden. Möglicherweise gibt es keinen Code zum Festlegen von this.showModal = false; Hauptsächlich wegen dieser Codezeilen v-model = 'showModal' und

kann tatsächlich als this.$emit("on-ok");this.$emit("on-cancel"); geschrieben werden. Daher müssen wir angeben, dass der Name der Requisiten innerhalb der Komponente ein Wert sein muss, und dann die Bestätigung oder den Abbruch innerhalb der Komponente auslösen Komponente Auf diese Weise kann das Popup-Fenster direkt ausgeblendet werden, ohne den Benutzer zu stören und ihn aufzufordern, showModal außerhalb der Komponente manuell auf false zu setzen.props: {value: {type: Boolean}} this.$emit("input", false)Dann schauen wir uns die Promise-Methode an: In Bei der ersten Methode werden die übergebenen Werte alle über props übergeben. Zum Empfangen definiert diese Methode ein anderes Objekt innerhalb der Komponente, um den eingehenden Wert zu empfangen, <chat-modal v-model="showModal">

makeSure() {
      this.$emit("on-ok");
      this.$emit("input", false);
    },
makeCancel() {
      this.$emit("on-cancel");
      this.$emit("input", false);
    }

var initOtherText = {
  sureText: "",
  cancelText: "",
  title: "",
  small: false
};
otherText: JSON.parse(JSON.stringify(initOtherText)),

Das DOM-elementgebundene Klickereignis der Schaltfläche „OK“ abrufen, showModal im Rückruf auf „false“ setzen und auflösen,

this.$refs["sure"].addEventListener("click", () => {
  this.showModal = false;
  resolve("点击了确定");
});

Das DOM abrufen gebundenes Klickereignis der Schaltfläche „Abbrechen“, ablehnen.this.otherText = { ...otherText }; this.showModal = true

Pits angetroffen

Ich bin schon einmal auf ein Pit gestoßen, weil das Klickereignis vorhanden ist Zum ersten Mal gebunden, zum zweiten Mal aufgelöst und abgelehnt. Es wird fehlschlagen. Ich wollte das Bindungsereignis abbrechen, aber da das gesamte Popup-Fenster angezeigt wurde: keine, besteht keine Notwendigkeit, die Bindung manuell aufzuheben Es. Bei der zweiten Frage geht es darum, ob man v-if oder v-show verwenden soll, um das Popup-Fenster auszublenden. Ich habe am Anfang v-if verwendet, habe das aber bei diesem Schritt festgestellt

this.showModal = true;
var pms = new Promise((resolve, reject) => {
  this.$refs["sure"].addEventListener.xxx//省略
});
return pms;

this.$refs["chat-modal"].openModal({
  title: "服务小结",
  sureText: "提交并结束",
  cancelText: "取消"
  }).then();

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das V-Modell und versprechen, die Vue-Popup-Komponente zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!