uniapp全局挂载uViewUI的u-toast消息通知组件（微信小程序）-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp全局挂载uViewUI的u-toast消息通知组件（微信小程序）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在使用uView消息通知组件的时候，必须在每个页面中手动添加一个标签，打上ref然后才能调用，非常的麻烦，能不能像ElementUI那样把组件挂载到Vue原型上从而能全局调用呢，个人也是尝试了很多方法，但是由于小程序的app.vue不能写页面，所以无法达到ElementUI那种方便的效果，但是搜索解决方案的时候发现了一个比较接近的方法

1. 初始化uniapp项目

npm init

2. 安装vue-inset-loader

npm i vue-inset-loader

3. 创建vue.config.js, 复制下列代码

const path = require('path')

module.exports = {
	configureWebpack: {
		module: {
			rules: [{
				test: /\.vue$/,
				use: {
					loader: path.resolve(__dirname, "./node_modules/vue-inset-loader")
				},
			}]
		},
	}
}

4. 引入并注册u-toast组件(使用easycome可省略该步骤, 一般都是开启的, 如果没有开启就引入uni_modules/uview-ui/components/u-toast并全局注册就行)

5. 在pages.json中新增配置项, 与pages等属性齐平

"insetLoader":{
	"config":{
        //这个notify属性名可以更改但与下面的label里数组元素的名字要相同, ref的名字随意
		"notify":"<u-toast ref='notify'/>"
	},
	"label":["notify"],
	"rootEle":"view"
}