Creating a component message.vue
<template> <div class="wrap" v-if="showWrap" :class="showContent ?'fadein':'fadeout'"> <i :class="iconState ?'success':'wrong'"></i> {{text}} </div> </template>
<style scoped> .wrap{ position: fixed; left: 50%; top:50%; background: rgba(0,0,0,.6); padding: 10px; border-radius: 5px; transform: translate(-50%,-50%); color:#fff; font-size: 0.1rem; text-align: center; } .fadein { animation: animate_in 0.5s; } .fadeout { animation: animate_out 0.5s; opacity: 0; } @keyframes animate_in { 0% { opacity: 0; } 100%{ opacity: 1; } } @keyframes animate_out { 0% { opacity: 1; } 100%{ opacity: 0; } } .success{ width: 0.2rem; height: 0.2rem; display: block; background: url('../../static/img/sure.png')no-repeat; background-size: 0.2rem 0.2rem; margin: 0.08rem auto; } .wrong{ width: 0.2rem; height: 0.2rem; display: block; background: url('../../static/img/wrong.png')no-repeat; background-size: 0.2rem 0.2rem; margin: 0.08rem auto; } </style>
Join message.js
VUE from Import 'VUE'; Import toastComponent from './message.vue'; // this is the static component we just created const ToastConstructor = vue.extend (toastComponent); // returns an extended instance constructor var Test = to true; // pop function definition component receives two parameters, and to display the text display time function showToast (text, iconState, DURATION = 2000) { IF (the Test === to false) { return; } const = toastDom new new ToastConstructor ({ EL: document.createElement ( 'div'), Data () { return { text: text, showWrap: to true, // whether the display component showContent: true, // effects: prior to hide the components, the hidden animation iconState: iconState }; } }); Document.body.appendChild (toastDom $ EL);. The Test = to false; // After a duration of time over the entire assembly hide the setTimeout (() => { toastDom.showWrap = to false; the Test = to true; }, duration ); } // Register the assembly functions as global function registryToast () { // the component to register the prototype chain vue go, // so this can be used in all instances vue inside Message $ (). vue.prototype . $ = Message showToast; } Export default registryToast;
Or introduced into the index.js main.js
import Vue from 'vue'; import toastRegistry from '@/components/message/message'; Vue.use(toastRegistry); new Vue({ el: '#app', template: '<App />', components: { App } });