当前位置: 首页 > news >正文

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

学习目标:

学习目标如下所示:

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

学习内容:

内容如下所示:

  1. 显示用户需要确认的模态框
    点击提交按钮,弹窗的显示
<view style="display: flex; justify-content: space-around;"><button class="button" @click="submit">t提交</button>
</view>
  1. 调用的方法
submit(){let that=thisuni.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、示例效果如下所示:
    在这里插入图片描述
http://www.lryc.cn/news/96419.html

相关文章:

  • linux部署es+kibana
  • 二十三种设计模式第十七篇--迭代子模式
  • 《零基础入门学习Python》第056讲:论一只爬虫的自我修养4:网络爬图
  • 23.7.26总结(博客项目)
  • 安全第一天
  • SpringCloud学习路线(12)——分布式搜索ElasticSeach数据聚合、自动补全、数据同步
  • cloudstack的PlugNicCommand的作用
  • LT9211C 是一款MIPI/RGB/2PORT LVDS互转的芯片
  • 【Rust 基础篇】Rust 通道(Channel)
  • 学习 C语言第二天 :C语言数据类型和变量(下)
  • 【Kubernetes资源篇】ingress-nginx最佳实践详解
  • Java基础阶段学习哪些知识内容?
  • 【HISI IC萌新虚拟项目】ppu整体uvm验证环境搭建
  • 图像处理之hough圆形检测
  • el-upload文件上传(只能上传一个文件且再次上传替换上一个文件) vue3+vite+ts
  • 随手笔记——根据点对来估计相机的运动综述
  • ip校园广播音柱特点
  • 用 Node.js 手写 WebSocket 协议
  • Xilinx AXI VIP使用教程
  • mysql主主架构搭建,删库恢复
  • pythonweek1
  • 进程虚拟地址空间区域划分
  • OpenAI Code Interpreter 的开源实现:GPT Code UI
  • macOS Ventura 13.5 (22G74) 正式版发布,ISO、IPSW、PKG 下载
  • Electron 主进程和渲染进程传值及窗口间传值
  • C#设计模式之---建造者模式
  • output delay 约束
  • html2Canvas+jsPDF 下载PDF 遇到跨域的对象存储的图片无法显示
  • 【C#】并行编程实战:异步流
  • 在家下载论文使用哪些论文下载工具比较好