Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser le composant de boîte d'invite globale dans vue ?

亚连
Libérer: 2018-06-04 14:20:22
original
2530 Les gens l'ont consulté

Cet article présente principalement l'exemple de code du composant de boîte d'invite globale de vue. Les amis qui en ont besoin peuvent s'y référer

Cet article vous présente un composant de boîte d'invite globale de vue. Le code spécifique est le suivant :

<template>
   <!-- 全局提示框 -->
   <p v-show="visible" class="dialog-tips dialog-center">
     <p>{{message}}</p>
   </p>
</template>
<script>
export default {
 data() {
  return {
   visible: false,
   message: ""
  };
 }
};
</script>
<style lang="scss">
.dialog-tips{
  position: fixed;
  z-index: 100;
  min-width: 220px;
  padding: 40px 22px;
  white-space: nowrap;
  background-color: #fff;
  box-shadow: 0px 8px 15px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  .dialog-tips-icon{
    width: 54px;
    height: 54px;
    @extend %bg-contain;
    display: inline-block;
    margin-bottom: 13px;
  }
}
.dialog-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
</style>
Copier après la connexion

toast.js

import ToastComponent from &#39;./toast.vue&#39;
const Toast = {};
// 注册Toast
Toast.install = function (Vue) {
  // 生成一个Vue的子类
  // 同时这个子类也就是组件
  const ToastConstructor = Vue.extend(ToastComponent)
  // 生成一个该子类的实例
  const instance = new ToastConstructor();
  // 将这个实例挂载在我创建的p上
  // 并将此p加入全局挂载点内部
  instance.$mount(document.createElement(&#39;p&#39;))
  document.body.appendChild(instance.$el)
  // 通过Vue的原型注册一个方法
  // 让所有实例共享这个方法 
  Vue.prototype.$toast = (msg, duration = 1500) => {
    instance.message = msg;
    instance.visible = true;
    setTimeout(() => {
      instance.visible = false;
    }, duration);
  }
}
export default Toast
Copier après la connexion

Comment l'utiliser ?

Dans main.js

 import Vue from &#39;vue&#39;
  import Toast from &#39;./toast&#39; 
  Vue.use(Toast);
Copier après la connexion

Dans le composant

this.$toast("XXXXXXXXX");
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

À propos de la méthode de fermeture du composant en cliquant à l'extérieur du composant dans Vue (tutoriel détaillé)

Détails pour vous Résoudre le problème de l'écran blanc sur la page d'accueil une fois la construction de vue emballée (tutoriel détaillé)

À propos de la méthode pour ne pas afficher la vue du routeur dans vue2.0 (tuto détaillé)

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!