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

6. 重新运行项目, 在微信开发者工具中查看

 可以看到标签已经被追加到了最后面, 尝试调用

 大功告成 !

ps: 如果没有追加就重启HbuilderX和微信开发者工具, 因为可能会因为缓存导致没有加载

微信小程序toast是一种轻量级的提示框组件,一般用于展示简短的文字信息。然而,toast组件并不支持直接显示图片。不过我们可以通过一些技巧间接实现在toast中显示图片的效果。 一种常用的方法是在toast中使用自定义的图标,而不是直接显示图片。我们可以使用Font Awesome等图标库中的图标,然后在toast中设置相应的图标类名,从而实现在toast中显示图标的效果。这个图标可以是一个代表图片的图标,这样就能给用户一个视觉上的提示,让用户知道图片相关的内容。 另一种方法是结合toast组件和一个自定义的弹窗组件来实现。我们可以使用弹窗组件来展示图片,并设置一个透明的背景色,从而实现类似于toast的效果。在弹窗中展示图片后,我们可以设置一个定时器,在一定的时间后关闭弹窗,从而达到toast显示图片的效果。 除此之外,我们还可以考虑使用其他的提示组件,如基于canvas等技术实现的自定义提示组件,从而实现在微信小程序中直接在toast中显示图片的效果。这种方式相对来说比较复杂,需要开发者自己实现,并且可能会涉及到一些底层的API或者库的使用。 综上所述,微信小程序toast组件本身并不支持直接显示图片,但我们可以通过一些技巧或者组合其他的组件来实现在toast中显示图片的效果。开发者可以根据自己的需求和技术水平选择合适的方法来实现这个功能。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值