uni-app点击按钮弹出提示框(以弹窗的形式显示),选择确定和取消

学习目标:

学习目标如下所示:

  • uni-app点击提交按钮后弹出提示框,(以弹窗的形式显示),提示用户是否确认提交(即确定和取消),点击确定后调用真正的提交方法,将数据传给后端,点击取消后,模态框自动消失,不请求后端接口。

学习内容:

内容如下所示:

  1. 显示用户需要确认的模态框
    点击提交按钮,弹窗的显示

  2. 调用的方法

    submit(){
    let that=this
    uni.showModal({
    title: '提示:',
    content: '请确认是否要提交?',
    success: function(res) {
    if (res.confirm) {
    // console.log('确定');
    //TODO
    } else if (res.cancel) {
    // console.log('取消');
    //TODO
    }
    }
    });
    },

总结:

知识小结:

  • 模态框的主要内容

    uni.showModal({
    title: '提示',
    content: '请确认是否要提交?',
    success: function (res) {
    if (res.confirm) {
    console.log('用户点击确定');
    } else if (res.cancel) {
    console.log('用户点击取消');
    }
    }
    });

  • 2、注意:
    uni.showModal方法的提示框大小是固定的,无法通过设置字体大小来改变提示框中的文字大小。如果我们想要控制文字大小,可以通过CSS样式的方式来实现。 即通过 font-size: 16px; 控制字体的大小。

  • 3、示例效果如下所示:

相关推荐
Cutecat_3 小时前
视频字幕处理工具横向:提取模式 vs 编辑模式,该如何选择
android·前端·ios·语音识别
dsyyyyy11013 小时前
JavaScript变量
开发语言·javascript·ecmascript
qq_422152573 小时前
PDF 加水印工具怎么选?2026 年文档版权保护方案对比
前端·pdf·github
kyriewen3 小时前
手写 Promise.all、race、any:不到 30 行代码,解决并发异步的所有姿势
前端·javascript·面试
brucelee1864 小时前
OpenClaw 浏览器控制(Chrome MCP)完整教程
前端·chrome
ct9784 小时前
React 状态管理方案深度对比
开发语言·前端·react
胡志辉的博客5 小时前
深入浅出理解浏览器事件循环:从一道输出题讲到 Chrome 源码
前端·javascript·chrome·chromium·event loop
代码不加糖5 小时前
js中不会冒泡的事件有哪些?
前端·javascript·vue.js
懂懂tty5 小时前
Vue2与Vue3之间API差异
前端·javascript·vue.js
AI焦点5 小时前
跨越协议鸿沟:Tool Use状态机从Anthropic到OpenAI兼容体系的适配要点
前端·人工智能