Maison  >  Article  >  interface Web  >  Explication détaillée du composant Alert in vue

Explication détaillée du composant Alert in vue

小云云
小云云original
2018-01-15 13:27:1110717parcourir

Cet article présente principalement le code d'implémentation d'Alert dans le composant vue. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Avant-propos

Cet article fournit principalement le cadre général du composant Alert et propose un petit nombre d'options configurables. Destiné à fournir grossièrement des idées

Alerte

est utilisé pour afficher des informations d'invite importantes sur la page.

Structure du modèle de modèle


<template>
 <p v-show="visible" class="Alert">
  <i v-show="closable" class="iconhandle close" @click="close"></i>
  <slot></slot>
 </p>
</template>

Boîte d'alerte de structure brute, icône d'icône, interpolation de fente (autres couleurs de style Options...)

Si vous avez besoin d'une animation, vous pouvez utiliser la transition de composant intégrée à Vue


<transition name="alert-fade">
</transition>

script


export default {
 name: &#39;Alert&#39;,

 props: {
  closable: {
   type: Boolean,
   default: true
  },
  show: {
   type: Boolean,
   default: true,
   twoWay: true
  },
  type: {
   type: String,
   default: &#39;info&#39;
  }
 },
 data() {
  return {
   visible: this.show
  };
 },
 methods: {
  close() {
   this.visible = false;
   this.$emit(&#39;update:show&#39;, false);
   this.$emit(&#39;close&#39;);
  }
 }
};
  • nom : le nom du composant

  • props: propriétés

  • méthodes: méthode

Cliquez pour fermer pour exposer 2 événements

Utiliser


import Alert from &#39;./Alert.vue&#39;

Alert.install = function(Vue){
  Vue.component(&#39;Alert&#39;, Alert);
}
export default Alert


<Alert :closable="false">
 这是一个不能关闭的alert
</Alert>
<Alert>
 这是一个可以关闭的alert
</Alert>

Attribut

参数 说明 类型 可选值 默认值
closable 是否可关闭 boolean true
show 是否显示 boolean true

Événement

事件名称 说明 回调参数
update:show 关闭时触发,是否显示false false
close 关闭时触发

Recommandations associées :

Remarques sur l'utilisation de alert() en JavaScript

En plus de alert, il y a aussi Quelles autres méthodes d'invite existe-t-il ?

La différence entre alert() et console.log() en javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn