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

╰半橙微兮° 2022-10-11 10:57 28阅读 0赞

参考文档：[https://uniapp.dcloud.io/api/ui/prompt?id=showmodal][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][]

[https_uniapp.dcloud.io_api_ui_prompt_id_showmodal]: https://links.jianshu.com/go?to=https%3A%2F%2Funiapp.dcloud.io%2Fapi%2Fui%2Fprompt%3Fid%3Dshowmodal
[0d6ff9283ca7e35b40a0c25bde5a7d0d.png]: /images/20221005/91fcf4f4c1764b24aa74faea6c1cb5f9.png
[6861ba75acbfe31ec2775054fbc5c633.gif]: /images/20221005/9b336d95f794485787f5b38b8bbc58b4.png