uniapp组件库Modal 模态框 的使用方法

目录

#平台差异说明

#基本使用

#传入富文本内容

#异步关闭

#点击遮罩关闭

#控制模态框宽度

#自定义样式

#缩放效果

#API

#Props

#Event

#Method

#Slots


弹出模态框,常用于消息提示、消息确认、在当前页面内完成特定的交互操作。

#平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

#基本使用

默认情况下,模态框只有一个确认按钮:

  • 请至少要配置弹框的内容参数content
  • 通过v-model绑定一个布尔变量来控制模态框的显示与否。
<template><view><u-modal v-model="show" :content="content"></u-modal><u-button @click="open">打开模态框</u-button></view>
</template><script>export default {data() {	return {show: false,content: '东临碣石,以观沧海'}},methods: {open() {this.show = true;}}}
</script>

#传入富文本内容

有时候我们需要给模态框的内容,不一定是纯文本的字符串,可能会需要换行,嵌入其他元素等,这时候我们可以使用slot功能,再结合uni-apprictText组件, 就能传入富文本内容了,如下演示:

<template><view><u-modal v-model="show" :title-style="{color: 'red'}"><view class="slot-content"><rich-text :nodes="content"></rich-text></view></u-modal><u-button @click="open">打开模态框</u-button></view>
</template><script>export default {data() {	return {show: false,content: `空山新雨后<br>天气晚来秋`}},methods: {open() {this.show = true;}}}
</script>
<style lang="scss" scoped>.slot-content {font-size: 28rpx;color: $u-content-color;padding-left: 30rpx;}
</style>

#异步关闭

异步关闭只对"确定"按钮起作用,需要设置async-closetrue,当点击确定按钮的时候,按钮的文字变成一个loading动画,此动画的颜色为 confirm-color参数的颜色,同时Modal不会自动关闭,需要手动设置通过v-model绑定的变量为false来实现手动关闭。

<template><view class=""><u-modal v-model="show" @confirm="confirm" ref="uModal" :async-close="true"></u-modal><u-button @click="showModal">弹起Modal</u-button></view>
</template><script>
export default {data() {return {show: false}},onLoad: function(opt) {},methods:{showModal() {this.show = true;},confirm() {setTimeout(() => {// 3秒后自动关闭this.show = false;// 如果不想关闭,而单是清除loading状态,需要通过ref手动调用方法// this.$refs.uModal.clearLoading();}, 3000)}}
}
</script>

#点击遮罩关闭

有时候我们不显示"关闭"按钮的时候,需要点击遮罩也可以关闭Modal,这时通过配置mask-close-abletrue即可

<u-modal v-model="show" :mask-close-able="true"></u-modal>

#控制模态框宽度

可以通过设置width参数控制模态框的宽度,此值可以为数值(单位rpx),百分比,auto等。

<u-modal v-model="show" width="70%"></u-modal>

#自定义样式

此组件有完善的自定义功能,可以配置标题,内容,按钮等样式(传入对象形式),具体参数详见底部的API说明

<u-modal v-model="show" :title-style="{color: 'red'}"></u-modal>

#缩放效果

开启缩放效果,在打开和收起模态框的时候,会带有缩放效果,具体效果请见示例,此效果默认开启,通过zoom参数配置

<u-modal v-model="show" :zoom="false"></u-modal>

#API

#Props

注意:需要给modal组件通过v-model绑定一个布尔值,来初始化modal的状态,随后该值被双向绑定。

参数说明类型默认值可选值
show是否显示模态框,请赋值给v-modelBooleanfalsetrue
z-index层级String | Number1075-
title标题内容String提示-
width模态框宽度,数值时单位为rpxString | Number600百分比 / auto
content模态框内容,如传入slot内容,则此参数无效String内容-
show-title是否显示标题Booleantruefalse
show-confirm-button是否显示确认按钮Booleantruefalse
show-cancel-button是否显示取消按钮Booleanfalsetrue
confirm-text确认按钮的文字String确认-
cancel-text取消按钮的文字String取消-
cancel-color取消按钮的颜色String#606266-
confirm-color确认按钮的颜色String#2979ff-
border-radius模态框圆角值,单位rpxString | Number16-
title-style自定义标题样式,对象形式Object--
content-style自定义内容样式,对象形式Object--
cancel-style自定义取消按钮样式,对象形式Object--
confirm-style自定义确认按钮样式,对象形式Object--
zoom是否开启缩放模式Booleantruefalse
async-close是否异步关闭,只对确定按钮有效,见上方说明Booleanfalsetrue
mask-close-able是否允许点击遮罩关闭ModalBooleanfalsetrue
negative-top往上偏移的值,以避免可能弹出的键盘重合,单位任意,数值则默认为rpx单位 1.4.4String | Number0-

#Event

事件名说明回调参数
confirm点击确认按钮时触发-
cancel点击取消按钮时触发-

#Method

此方法需要通过ref调用,详见上方的"异步关闭"

事件名说明
clearLoading异步控制时,通过调用此方法,可以不关闭Modal,而单是清除loading状态

#Slots

名称说明
default传入自定义内容,一般为富文本,见上方说明
confirm-button 1.6.0传入自定义按钮,用于在微信小程序弹窗通过按钮授权的场景

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/645325.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

modbus poll测试工具测试modbus tcp与PLC设备连接使用方法

socket默认端口是502&#xff0c;socket连上之后&#xff0c; 按照modbuspoll工具设置的读写参数 生成的RTU命令格式去组装读PLC的设备数据 modbuspoll工具配置&#xff0c;以v9.9.2中文破解版为例&#xff1a; 首先点连接菜单&#xff08;connection&#xff09;建立连接&…

反射式编程中,Mono和Flux两个类的区别

在响应式编程框架如Project Reactor中&#xff0c;Mono和Flux是两个核心类&#xff0c;它们都实现了Reactive Streams规范的Publisher接口&#xff0c;用于处理异步数据流。 1. Mono&#xff1a; Mono代表的是0或1个元素的数据序列。换句话说&#xff0c;它表示的是未来可能产…

for循环延时时间计算

​ 文章目录 前言一、计算方式二、for循环 2.1 for循环里定义变量2.2 codeblock设置C99标准 三、四、总结 前言 之前做led点亮的实验&#xff0c;好像是被delay函数影响了&#xff0c;因为delay参数设置的不对&#xff0c;led没有正常闪烁。现在就想搞明白一些。 一、计算…

Fluent Bit配置与使用——基于版本V2.2.2

Fluent Bit日志采集终端 文档适用版本&#xff1a;V2.2 1、日志文件处理流程 数据源是一个普通文件&#xff0c;其中包含 JSON 内容&#xff0c;使用tail插件记录日志&#xff0c;通过parsers进行格式化匹配&#xff08;图里没写&#xff09;&#xff0c;通过两个筛选器&…

[150] 逆波兰表达式求值 js

题目描述&#xff1a; 给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。 * * 请你计算该表达式。返回一个表示表达式值的整数。 逆波兰表达式&#xff1a; * * 逆波兰表达式是一种后缀表达式&#xff0c;所谓后缀就是指算符写在后面。 *…

新能源汽车智慧充电桩管理方案:环境监测与充电安全多维感知

随着新能源技术的不断发展&#xff0c;新能源充电桩作为电动汽车的重要基础设施&#xff0c;其管理和维护变得尤为重要。环境监测类传感器能够实时监测充电桩周围的环境参数&#xff0c;如温度、湿度等&#xff0c;为管理人员提供及时、准确的数据&#xff0c;以便做出相应的调…

JS之歌词滚动案例

让我为大家带来一个歌词滚动的案例吧&#xff01; 详细的介绍都在代码块中 我很希望大家可以自己动手尝试一下&#xff0c;如果需要晴天的mp3音频文件可以私信我 上代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset&quo…

C++类和对象_C++回顾

面向对象和面向过程的区别 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解决问题。 C是基于面向对象的&#xff0c;关注的是对象&#xff0c;将一件事情拆分成不同的对象&#xff0c;靠对象之间的交互完成。 类…

Excel·VBA时间范围筛选及批量删除整行

看到一个帖子《excel吧-筛选开始时间&#xff0c;结束时间范围内的所有记录》&#xff0c;根据条件表中的开始时间和结束时间构成的时间范围&#xff0c;对数据表中的开始时间和结束时间范围内的数据进行筛选 目录 批量删除整行&#xff0c;整体删除批量删除整行&#xff0c;分…

LeetCode 2865. 美丽塔 I,前后缀分离+单调栈

一、题目 1、题目描述 给你一个长度为 n 下标从 0 开始的整数数组 maxHeights 。 你的任务是在坐标轴上建 n 座塔。第 i 座塔的下标为 i &#xff0c;高度为 heights[i] 。 如果以下条件满足&#xff0c;我们称这些塔是 美丽 的&#xff1a; 1 < heights[i] < maxHeight…

HTML+CSS:炫酷登录切换

效果演示 实现了一个登录注册页面的切换效果&#xff0c;当用户点击登录或注册按钮时&#xff0c;会出现一个叠加层&#xff0c;其中包含一个表单&#xff0c;用户可以在表单中输入用户名和密码&#xff0c;然后点击提交按钮进行登录或注册。当用户点击返回按钮时&#xff0c;会…

操作系统----操作系统的特征

目录 1.并发&#xff1a; 2.共享&#xff1a; 3.虚拟&#xff1a; 4.异步&#xff1a; 操作系统包括以下4个特征&#xff1a;并发&#xff0c;共享&#xff0c;虚拟&#xff0c;异步 1.并发&#xff1a; 指两个或多个事件在同一时间间隔内发生。这些事件宏观上是同时发生…

边缘计算:挑战与机遇的平衡艺术

前言 边缘计算作为云计算的补充&#xff0c;通过在数据源近处进行数据处理&#xff0c;已经成为实现物联网&#xff08;IoT&#xff09;、自动驾驶、智慧城市等应用的重要技术。然而&#xff0c;边缘计算的发展和普及也面临不少挑战&#xff0c;同时也带来了巨大的机遇。 方向…

【Android】Android中的系统镜像由什么组成?

文章目录 总览Boot Loader 的加锁与解锁Boot 镜像内核RAM diskARM 中的设备树 (Device Tree) /System 和/Data 分区镜像参考 总览 各种Android设备都只能刷专门为相应型号的设备定制的镜像。 厂商会提供一套系统镜像把它作为“出厂默认”的 Android 系统刷在设备上。 一个完…

SpringCloudAlibaba系列之Nacos实战

目录 注意事项 参考资源 Nacos配置中心 初始化项目 进行Nacos相关配置 运行 Nacos注册中心 dubbo方式 对外暴露接口dubbo-api 服务提供者dubbo-provider 服务消费者dubbo-consumer 负载均衡客户端方法 服务提供者 服务消费者 注意事项 不管是使用Nacos配置中心&…

代码随想录 Leetcode144/94/145 二叉树的前/中/后序遍历

题目&#xff1a; 前&#xff1a; 中&#xff1a; 后&#xff1a; 代码&#xff08;首刷自解 2024年1月24日&#xff09;&#xff1a; //前序遍历&#xff0c;递归 class Solution { public:void funcOfRecursion(TreeNode* cur, vector<int>& vec) {if (cur null…

MySQL深入——16

MySQL如何保持高可用&#xff1f;&#xff1f; 主备延迟 主备延迟分为两类&#xff0c;一类主动比如软件升级&#xff0c;主库所在机器按照计划下线等&#xff0c;另外一类是被动&#xff0c;比如主库所在机器掉电。 在看这个概念之前&#xff0c;我们先来看看“同步延迟”&…

谈谈 RocketMQ 5.0 分级存储背后一些有挑战的技术优化

作者&#xff1a;斜阳 RocketMQ 5.0 提出了分级存储的新方案&#xff0c;经过数个版本的深度打磨&#xff0c;RocketMQ 的分级存储日渐成熟&#xff0c;并成为降低存储成本的重要特性之一。事实上&#xff0c;几乎所有涉及到存储的产品都会尝试转冷降本&#xff0c;如何针对消…

张量计算和操作

一、数据操作 1、基础 import torchx torch.arange(12) # x:tensor([ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11])x.shape # torch.Size([12])x.numel() # 12x x.reshape(3, 4) # tensor([[ 0, 1, 2, 3], # [ 4, 5, 6, 7], # [ 8, 9, 10, 11]])torch.zeros((2…

自动化Web页面性能测试介绍

随着越来越多的用户使用移动设备访问 Web 应用&#xff0c;使得 Web 应用需要支持一些性能并不是很好的移动设备。为了度量和测试 Web 应用是不是在高复杂度的情况下&#xff0c;页面性能能满足用户的需求。 同时&#xff0c;随着 Web 应用的空前发展&#xff0c;前端业务逐渐…