uni-app/vue项目如何封装全局消息提示组件
效果图：
第一步：封装组件和方法，采用插件式注册！
在项目目录下新建components文件夹，里面放两个文件，分别是index.vue和index.js.
index.vue：
<template><div class="toast" v-if="isShow">{{ message }}</div>
</template><script>
export default {name: 'AllToast',props: {isShow: {type: Boolean,required: true,default: false},message: {type: String,required: true,default: ''}},data() {return {};}
}
</script><style scoped>
.toast {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 9999;width: 300rpx;height: 100rpx;background-color: red;display: flex;justify-content: center;align-items: center;color: #fff;border-radius: 10rpx;
}
</style>
index.js:
import Vue from 'vue'
import AllToast from './index.vue'const ToastConstructor = Vue.extend(AllToast)function showToast(message) {const instance = new ToastConstructor({el: document.createElement('view'),propsData: {isShow: true,message: message}})document.body.appendChild(instance.$el)setTimeout(() => {instance.isShow = falsedocument.body.removeChild(instance.$el)}, 3000) // 3秒后自动隐藏
}export default {install: function (vue) {vue.component('toast', AllToast)vue.prototype.$showToast = showToast}
}
第二步：全局挂载
在main.js中引入和使用
import App from './App'
import uView from '@/uni_modules/uview-ui'
// 引入全局组件
import Mycomponent from '@/components/index.js'// #ifndef VUE3
import Vue from 'vue'
Vue.use(uView)
// 挂载组件
Vue.use(Mycomponent)
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({...App
})
app.$mount()
// 测试使用
Vue.prototype.$showToast('请求失败');
// #endif// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {const app = createSSRApp(App)return {app}
}
// #endif第三步：使用方法
vue页面使用
this.$showToast('我是全局组件菜鸡')其他页面使用
//对于this指向不是vue的需要先引入vue
import Vue from 'vue'//然后调用原型方法
Vue.prototype.$showToast('请求失败');同理 这个方法也适用于Vue项目不止是uni