uni-app 确认对话框

说明

相当于 JavaScript 中 confirm() 确认对话框

实现方式一

uni-app内置方式,对话框不能定制,比较丑陋

官网:

https://uniapp.dcloud.net.cn/api/ui/prompt.html#showmodal

<button type="default" @tap="modalTap">有标题的modal</button>

<button type="default" @tap="noTitlemodalTap">无标题的modal</button>
<script>

    export default {
        data() {
            return {
                title: 'modal',
                modalHidden: true,
                modalHidden2: true
            }
        },
        methods: {
            modalTap: function (e) {
                uni.showModal({
                    title: "弹窗标题",
                    content: "弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内",
                    showCancel: false,
                    confirmText: "确定",
                    success: function (res) {
                        if (res.confirm) {
                            console.log('用户点击确定');
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                })
            },
            noTitlemodalTap: function (e) {
                uni.showModal({
                    content: "弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内",
                    confirmText: "确定",
                    cancelText: "取消",
                    success: function (res) {
                        if (res.confirm) {
                            console.log('用户点击确定');
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                })
            }
        }
    }
</script>

实现方式二

通过 <uni-popup> 实现,可实现定制

关键代码

显示对话框:

this.$refs.对话框ref值.open()

关闭对话框:

this.$refs.对话框ref值.close()

点击确认按钮事件:

@confirm="delById"

案例

html:

<uni-popup ref="deleteConfirm" type="dialog">
    <uni-popup-dialog type="info" cancelText="关闭" confirmText="确认" title="删除" content="您确认删除吗?" @confirm="delById"></uni-popup-dialog>
</uni-popup>

data数据:

data() {
    return {
    };
},

methods函数:

openDeleteConfirm(){ // 打开确认框
    this.$refs.deleteConfirm.open()
},

delById(){ // 将内容删除到回收站
    uni.showToast({
        title: '确认删除',
    });
}