How to use global prompt box component in vue?

This article mainly introduces the example code of vue's global prompt box component. Friends who need it can refer to it

This article introduces you to a vue global prompt box component. The specific code is as follows:

<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

How to use?

In main.js

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

In component

this.$toast("XXXXXXXXX");

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

About the method of closing the component by clicking outside the component in Vue (detailed tutorial)

Details for you Solve the problem of white screen on the homepage after vue build is packaged (detailed tutorial)

About the method of not displaying router-view in routing in vue2.0 (detailed tutorial)

The above is the detailed content of How to use global prompt box component in vue?. For more information, please follow other related articles on the PHP Chinese website!