main.js中
import Toast from '@/components/toast'; Vue.use(Toast);index.js
import Loading from './loading'; const obj = {}; obj.install = function (Vue) { // 创建组件构造器 const LoadingConstructor = Vue.extend(Loading); // new的方式创建组件对象 const loading = new LoadingConstructor(); // 将组件对象挂载到某个元素上 loading.$mount(document.createElement('div')); document.body.appendChild(loading.$el); Vue.prototype.$loading = loading; }; export default obj;Toast.vue
<template> <div class="cus-toast" v-if="isShow">{{message}}</div> </template> <script> export default { name: 'Toast', data() { return { message: ' ', isShow: false }; }, methods: { show(msg = '提示', duration = 2000) { this.isShow = true; this.message = msg; setTimeout(function (vm) { vm.isShow = false; this.message = ''; }, duration, this); } } }; </script> <style scoped> .cus-toast { position: absolute; width: 200px; height: 50px; background-color: rgba(0, 0, 0, .75); color: white; line-height: 50px; top: 30%; text-align: center; left: 50%; transform: translate(-50%, -50%); border-radius: 20px; z-index: 999; } </style>
