Explication détaillée de l'utilisation du composant de boîte d'invite globale de vue

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du composant vue global prompt box Quelles sont les précautions lors de l'utilisation du composant vue global prompt box. . Ce qui suit est un cas pratique.

Cet article vous présente un composant de boîte d'invite vue globale. 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>

toast.js

import ToastComponent from './toast.vue'
const Toast = {};
// 注册Toast
Toast.install = function (Vue) {
  // 生成一个Vue的子类
  // 同时这个子类也就是组件
  const ToastConstructor = Vue.extend(ToastComponent)
  // 生成一个该子类的实例
  const instance = new ToastConstructor();
  // 将这个实例挂载在我创建的p上
  // 并将此p加入全局挂载点内部
  instance.$mount(document.createElement('p'))
  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

Comment utiliser ?

 Dans main.js

 import Vue from 'vue'
  import Toast from './toast' 
  Vue.use(Toast);

Dans le composant

this.$toast("XXXXXXXXX");

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur php chinois. site web!

Lecture recommandée :

vue détermine le contenu d'entrée Y a-t-il des espaces ?

Comment gérer la compatibilité de la boîte de date et d'heure easyui dans IE

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!