说明
相当于 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: '确认删除',
});
}