Maison > Article > interface Web > Comment utiliser v-model et promettre d'implémenter le composant pop-up vue

Comment utiliser v-model et promettre d'implémenter le composant pop-up vue

php中世界最好的语言original: 2018-05-28 15:00:302089parcourir

Cette fois, je vais vous montrer comment utiliser v-model et promettre d'implémenter le composant pop-up vue. Quelles sont les précautions concernant l'utilisation de v-model et promettre d'implémenter le composant pop-up vue. composant , ce qui suit est un cas pratique, jetons un coup d’oeil.

Récemment, l'entreprise a une activité back-end qui est écrite dans le système back-end existant. Cependant, elle devra être retirée séparément pour créer ultérieurement un nouveau système back-end pour cette activité. Par conséquent, la bibliothèque de composants vue dans le système back-end existant ne peut plus être utilisée (car je ne sais pas sur quelle bibliothèque de composants le futur système sera basé pour éviter les problèmes liés aux futurs projets de transplantation). la fonction de fenêtre contextuelle dans mon entreprise, je ne peux donc en écrire qu'une manuellement (même si c'est le cas. Le composant de fenêtre contextuelle est très simple et je souhaite le résumer moi-même. Veuillez indiquer s'il y a des erreurs sur). d'abord, j'ai utilisé les accessoires traditionnels et $emit, mais j'ai senti que la logique de devoir recevoir deux rappels d'annulation et de confirmation était dispersée, j'ai donc utilisé Écrire les deux rappels ensemble au lieu de deux rappels de promesse n'est pas nécessairement une bonne idée, mais c'est donne une idée.

1. Présentation

Regardons d'abord la méthode d'appel finale

méthode props $emit

<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() {}//点击取消的回调
}

Méthode de rappel de promesse

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

L'avantage de la deuxième méthode est que toute la logique est concentrée en une seule méthode.

2. Jetez un oeil au code source du composant

astuce : Le style est un peu mauvais...

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

Première analyse Regardons la première méthode : l'appelant doit lier une variable (showModal dans cet exemple) au v-model en dehors du composant pour indiquer si la fenêtre contextuelle est affichée lors de l'affichage, il doit définir manuellement this.showModal = true à l'extérieur du composant et la définition des accessoires à l'intérieur du composant. Un attribut pour recevoir cette valeur est value : {type : Boolean}. En même temps, une variable est déclarée à l'intérieur du composant pour synchroniser les accessoires. valeur transmise de l'extérieur. La valeur par défaut est showModal : this.value (la valeur déclarée en interne est également appelée showModal ), écoutez dans la montre la synchronisation watch: { value(newVal) { this.showModal = newVal } } puis liez la valeur showModal à l'intérieur du composant à l'élément DOM ; qui doit être affiché ou masqué. L'événement est rejeté lorsque vous cliquez sur les boutons OK et Fermer à l'intérieur du composant

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

this.$emit("on-ok");this.$emit("on-cancel"); Ces deux phrases concernent le rejet de l'événement, sortez-le du composant @, puis écrivez ce dont vous avez besoin. . La fonction de rappel . À ce stade, la fenêtre contextuelle peut être affichée et masquée. Vous constaterez peut-être qu'il n'y a aucun code pour définir this.showModal = false; Principalement à cause de ces lignes de code v-model = 'showModal' et props: {value: {type: Boolean}} this.$emit("input", false) à l'intérieur du composant. v-model est en fait le sucre syntaxique de vue. <chat-modal v-model="showModal"> peut en fait être écrit comme <chat-modal :value="showModal" @input="showModal = arguments[0]">, nous devons donc spécifier que le nom des accessoires doit avoir une valeur à l'intérieur du composant, puis déclencher la confirmation ou l'annulation à l'intérieur du composant. composant this.$emit("input", false) De cette façon, la fenêtre contextuelle peut être masquée directement sans déranger l'utilisateur et sans lui demander de définir manuellement showModal sur false en dehors du composant.

Regardons ensuite la méthode de promesse : Dans la première méthode, les valeurs transmises sont toutes transmises via props Pour le recevoir, cette méthode définit un autre objet à l'intérieur du composant pour recevoir la valeur entrante,

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

puis définit une méthode nommée openModal dans menthods, puis prend la valeur entrante. Une série de paramètres est assignée à l'objet à l'intérieur du composant this.otherText = { ...otherText }; this.showModal = true; et showModal est défini sur true, puis un nouvel objet de promesse est créé à chaque fois qu'il est déclenché. sont deux événements de clic, cliquez sur OK et Annuler. Le DOM doit être manipulé ici

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

Obtenez l'événement de clic de liaison de l'élément DOM du bouton OK, définissez showModal sur false dans le rappel et résolvez. 🎜>

this.$refs["cancel"].addEventListener("click", () => {
  this.showModal = false;
  reject("点击了取消");
});

Obtenez l'événement de clic de liaison DOM du bouton Annuler, rejetez.

Pièges rencontrés lors du rappel

J'ai déjà rencontré un piège, car l'événement click a été lié pour la première fois. La résolution et le rejet échoueront la deuxième fois. Je voulais annuler l'événement de liaison, mais parce que la fenêtre contextuelle entière

était affichée : none;, il n'est pas nécessaire de le dissocier manuellement. La seconde consiste à savoir s'il faut utiliser v-if ou v-show pour masquer la fenêtre contextuelle. J'ai utilisé v-if au début mais j'ai trouvé cela à cette étape v-show="showModal".

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中文网其它相关文章！

Articles Liés

Voir plus