Uniapp全局消息提示以及其组件的实现方法

   async created(){
	const _this=this
	setInterval(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)	
    }

<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>

{
template:'',
data(){
    return {
        属性
    }
  }
}

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

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

import GlobalMessage from "./GlobalMessage.js";
// 这里也可以直接执行 toastRegistry()
Vue.use(GlobalMessage);

this.$message('测试数据')

import GlobalMessage from '@/components/common/GlobalMessage.vue';
Vue.component('GlobalMessage',GlobalMessage)

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')
// }

"insetLoader": {
    "config":{
        "message": "<GlobalMessage></GlobalMessage>",
   
    },
    // 全局配置
    "label":["confirm"],
    "rootEle":"div"
},
"pages": [
    {
        "path": "pages/tabbar/index/index",
        "style": {
            "navigationBarTitleText": "测试页面",
            // 单独配置，用法跟全局配置一致，优先级高于全局
            "label": ["confirm","abc"],
            "rootEle":"div"
        }
    },
]