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

innerhalb der Komponente. V-Modell ist eigentlich der syntaktische Zucker von Vue.

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

<chat-modal :value="showModal" @input="showModal = arguments[0]"> und definiert dann eine Methode namens openModal in Menthods und Nehmen Sie dann die eingehende Reihe von Zuweisen der Parameter zum Objekt innerhalb der Komponente this.$emit("input", false) und setzen Sie showModal auf true, und erstellen Sie dann bei jedem Auslösen ein neues Promise-Objekt. Die darin enthaltenen asynchronen Ereignisse sind zwei Klickereignisse. Klicken Sie auf OK und Abbrechen. Hier müssen wir das DOM bedienen

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;

将showModal置为true时然后就去绑定事件这时候还没有DOM还没有解析玩DOM树上还没有,要不就得用this.$nextTick增加了复杂度，最后采用了v-show；

关于优先级问题

如果既在组件上用prop传了值(title,sureText之类的)如 <chat-modal" title="xx" sureText="xxx"></chat-modal> 也在方法里传了

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何使用Vue内父子组件通讯todolist组件

如何使用Vue整合AdminLTE模板

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!