uni-app点击按钮显示消息提示框-uni.showToast(OBJECT)

悠悠 2022-10-12 15:00 316阅读 0赞

参考文档：https://uniapp.dcloud.io/api/ui/prompt?id=showmodal

![4ca908cabbdf49e9ffc5db20447da244.png][]

示例：

uni.showToast({
        title: '标题',
        duration: 2000
    });

test.vue

<template>
    	<button @click.stop="isLeave()">点击按钮</button>
    </template>
    <script>
    	export default {
    		data() {
    			return {};
    		},
    		onLoad() {},
    		methods: {
    			isLeave(id) {
    				uni.showToast({
    					title: '消息提示',
    					icon: 'none'
    				});
    			},
    		},
    	}
    </script>
    <style>
    </style>

![5795548878cd416d8e0af8601f19c254.gif][]

运用，在提交表单的时候，可以做一个判断，如果不符合提交要求，可以直接显示消息提示框，作为一个提示哦

这里的参数icon所对应的数值，我在上面给设置成了none,不显示图标  
一般可以根据相关的需求进行设置的

![bd112d0fa8cb06586d385ab3a2bca7b1.png][]

比如success:显示成功图标，此时 title 文本最多显示 7 个汉字长度。默认值

uni.showToast({
                        title: '消息提示',
                        icon: 'success'
                    });

![e2ab5b382b030fb49bd9adcbd44cde71.png][]

比如：loading显示加载图标，此时 title 文本最多显示 7 个汉字长度。

uni.showToast({
                        title: '消息提示',
                        icon: 'loading'
                    });

![4e321c08a2a9bcdd5976b932061c4efc.png][]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[4ca908cabbdf49e9ffc5db20447da244.png]: /images/20221005/2910e961e05346f5ba7d206b4dc93a9e.png
[5795548878cd416d8e0af8601f19c254.gif]: /images/20221005/eb7f7a88046d4553a984b93886ecccda.png
[bd112d0fa8cb06586d385ab3a2bca7b1.png]: /images/20221005/79b9f6037446480cbf1b797a58e2f397.png
[e2ab5b382b030fb49bd9adcbd44cde71.png]: /images/20221005/85256695420c4240a9630b19ef600a26.png
[4e321c08a2a9bcdd5976b932061c4efc.png]: https://img-blog.csdnimg.cn/img_convert/4e321c08a2a9bcdd5976b932061c4efc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210705133343953.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ==,size_16,color_FFFFFF,t_70