uni-app点击按钮弹出提示框-uni.showModal(OBJECT),选择确定和取消

太过爱你忘了你带给我的痛 2022-10-12 15:00 19阅读 0赞

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

显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。

uni.showModal({
        title: '提示',
        content: '这是一个模态弹窗',
        success: function (res) {
            if (res.confirm) {
                console.log('用户点击确定');
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
        }
    });

![0d6ff9283ca7e35b40a0c25bde5a7d0d.png][]

test.vue

<template>
    	<button @click.stop="isLeave()">离厂解绑</button>
    </template>
    <script>
    	export default {
    		data() {
    			return {};
    		},
    		onLoad() {},
    		methods: {
    			isLeave(id) {
    				uni.showModal({
    					title: '提示',
    					content: '这是一个模态弹窗',
    					success: function(res) {
    						if (res.confirm) {
    							console.log('用户点击确定');
    						} else if (res.cancel) {
    							console.log('用户点击取消');
    						}
    					}
    				});
    			},
    		},
    	}
    </script>
    <style>
    
    </style>

效果：点击按钮的时候，  
会弹出一个提示框  
![6861ba75acbfe31ec2775054fbc5c633.gif][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[0d6ff9283ca7e35b40a0c25bde5a7d0d.png]: /images/20221005/57d1d6cf66ff4972ba73d1a46a6d1cb3.png
[6861ba75acbfe31ec2775054fbc5c633.gif]: /images/20221005/bbab485b691946ce8bac35d6832361a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/13aebbecab1e4a30ae0e4288b4d0e071.png