概述
Uniapp中怎么实现全局消息提示及其组件？下面本篇文章给大家介绍一下Uniapp全局消息提示及其组件的实现方法，希望对大家有所帮助！
实现
1.短轮询请求-App.vue中
async created(){const _this=thissetInterval(async ()=>{
const res=await _this.$ajax({
url:`/api/notice/status`
})
if(res.data.code===200){
const value=res.data.data.hasNew
_this.$store.commit({type: 'changeNew', value})
}
},6000)
}登录后复制2.全局消息提示组件
消息请求后需要有一个全局的自定义组件来展示消息，但是遇到一个问题，那就是在Unipp中，
虽然App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData。也就是App.vue中只能进行js以及css的编写，而不能挂载视图元素，那么是否可以在js中像使用this.$message一样使用组件呢，我想到了Vue中使用vue.prototype.$message挂载全局组件的方式。
(1)定义一个GlobalMessage.vue组件
自定义一个消息提示组件，text将会是我们传入的提示消息参数
<template>
<div class='message-container'>
全局消息提示 {{text}}
</div>
</template>
<script></script>
<style lang="scss" scoped>
.message-container{
position: fixed;
top: 10%;
z-index: 2000;
left: 10%;
width: 200px;
height: 200px;
background-color: red;
}
</style>登录后复制（2）新建GlobalMessage.js
将自定义组件引入，vue.extend可以使用基础的Vue构造器，创建一个子类，参数是一个包含组件的对象。对象示例如下：
{
template:'',
data(){
return {
属性
}
}
}登录后复制但此时创建的并非组件实例，需要通过new 方式创建组件实例，参数包括创建的组件Dom节点，组件内部属性。然后使用document.body.appendChild将组件渲染到body中，此时我们已经可以调用此方法，将自定义组件挂载到全局。
function showMessage(text,duration){
const MessageDom=new MessageConstructor({
el:document.createElement('div'),data(){
return {text:text,
}
}
})document.body.appendChild(MessageDom.$el)
}登录后复制接下来我们需要将该方法挂载到vue原型上，从而能够像this.$message一样使用，我们在vue.prototype上挂载$message，并将此方法导出。
function registryMessage(){
vue.prototype.$message=showMessage
}
export default registryMessage登录后复制GlobalMessage.js全部代码
import vue from "vue"
import GlobalMessage from './GlobalMessage.vue';
const MessageConstructor= vue.extend(GlobalMessage)
function showMessage(text,duration){
const MessageDom=new MessageConstructor({
el:document.createElement('div'),data(){
return {text:text,
}
}
})
document.body.appendChild(MessageDom.$el)
}
function registryMessage(){
vue.prototype.$message=showMessage
}
export default registryMessage登录后复制（3）main.js中
将我们抛出的方法引入，使用Vue.use进行全局注册，这样就可以愉快的使用this.$message了。
import GlobalMessage from "./GlobalMessage.js";
// 这里也可以直接执行
toastRegistry()Vue.use(GlobalMessage);
登录后复制使用
this.$message('测试数据')登录后复制3.小程序中如何实现
超导马得，刚刚能够全局使用this.$message，但是又遇到一个问题，小程序中没有document，我们看uni-app官方文档：
uni-app的js API
那么需求不能不完成，我们采用另外一套方案，使用vuex状态机来进行全局状态控制，将自定义组件放在需要的页面中，使用状态机来控制消息的提示内容以及展示与隐藏。注：请自行安装配置vuex。
import GlobalMessage from '@/components/common/GlobalMessage.vue';
Vue.component('GlobalMessage',GlobalMessage)登录后复制在需要的页面放置GlobalMessage组件，但是我们需要每个页面都要加组件标签，实在是一个难以忍受的方式，于是在翻阅一些文档后，在jy文章中发现一个工具vue-inset-loader
4.vue-inset-loader的使用
vue-inset-loader
（1）安装
（2）vue.config.js注入loader
没有vue.config.js请新建文件。
module: {
rules: [
{
test: /.vue$/,
use:{
loader: "vue-inset-loader"
// // 针对Hbuilder工具创建的uni-app项目
// loader: path.resolve(__dirname,"./node_modules/vue-inset-loader")
}
}
]
},
// 支持自定义pages.json文件路径
// options: {
// pagesPath: path.resolve(__dirname,'./src/pages.json')
// }登录后复制（3）pages.json配置文件中添加insetLoader
"insetLoader": {
"config":{
"message": "<GlobalMessage></GlobalMessage>",
},
// 全局配置
"label":["confirm"],
"rootEle":"div"
},
"pages": [
{
"path": "pages/tabbar/index/index",
"style": {
"navigationBarTitleText": "测试页面",
// 单独配置，用法跟全局配置一致，优先级高于全局
"label": ["confirm","abc"],
"rootEle":"div"
}
},
]登录后复制- 配置说明
config(default:{}) 定义标签名称和内容的键值对label(default:[]) 需要全局引入的标签，打包后会在所有页面引入此标签rootEle(default:"div") 根元素的标签类型，缺省值为div，支持正则，比如匹配任意标签 ".*"
✔ label 和 rootEle 支持在单独页面的style里配置，优先级高于全局配置
总结
推荐：《uniapp教程》
以上就是聊聊使用Uniapp怎么实现全局消息提示及其组件的详细内容，更多请关注靠谱客其它相关文章！
最后
以上就是过时长颈鹿为你收集整理的聊聊使用Uniapp怎么实现全局消息提示及其组件的全部内容，希望文章能够帮你解决聊聊使用Uniapp怎么实现全局消息提示及其组件所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复