FirstUI UNI版

Modal 模态框 VIP专属

概述

Modal 模态框，在浮层中显示，引导用户进行相关操作。

# 支持平台

App-vue App-Nvue 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 H5 PC 快手小程序 钉钉小程序
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓

温馨提示

一般来说我们会通过 z-index + position 来进行层级的设置，但是 weex （Nvue）不支持 z-index 设置层级关系，默认越靠后的元素层级越高。

# 引入

以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiModal from "@/components/firstui/fui-modal/fui-modal.vue"
export default {
	components:{
		fuiModal
	}
}
1
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。
基础使用

通过 show 属性控制模态框的显示隐藏，title 属性设置模态框的标题，descr 属性设置模态框描述内容 ，@click 事件为模态框按钮点击事件。

<fui-modal :show="show" title="提示" descr="确定关注 FirstUI 吗？" @click="onClick"></fui-modal>
1
点遮罩可关闭

通过 show 属性控制模态框的显示隐藏，descr 属性设置模态框描述内容，maskClosable 属性控制是否可点击遮罩关闭模态框（需要结合 @cancel 事件设置 show 为false来达到关闭模态框）。

<fui-modal :show="show" :descr="descr" maskClosable @click="onClick" @cancel="onCancel"></fui-modal>
1
data() {
	return {
		show: false,
		descr: '是否将此次编辑保留？'
	}
},
methods: {
	//调用此方法显示模态框
	showModal() {
		this.show = true;
	},
	//模态框按钮点击事件
	onClick(e) {
		console.log(e)
		//...
		this.onCancel()
	},
	//关闭模态框
	onCancel(e) {
		this.show = false
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
自定义内容

通过 buttons 属性设置模态框按钮（为空数组则不显示），自定义内容放置组件内部，样式自定义。

<fui-modal :buttons="[]" width="600" :show="show">
	<fui-icon name="checkbox-fill" :size="108" color="#09BE4F"></fui-icon>
	<text class="fui-title">购买成功</text>
	<text class="fui-descr">成功购买一张月卡，可免费阅读30天</text>
	<fui-button text="我知道了" width="240rpx" height="72rpx" :size="28" radius="36rpx" background="#FFB703"
		borderWidth="0" :margin="['0','0','24rpx']" @click="onCancel">
	</fui-button>
	<view class="fui-icon__close" @tap="onCancel">
		<fui-icon name="close" color="#B2B2B2" :size="48"></fui-icon>
	</view>
</fui-modal>
1
2
3
4
5
6
7
8
9
10
11
.fui-title {
	font-size: 32rpx;
	padding-top: 24rpx;
}

.fui-descr {
	font-size: 24rpx;
	color: #B2B2B2;
	padding-top: 12rpx;
	padding-bottom: 48rpx;
}

.fui-icon__close {
	position: absolute;
	right: 24rpx;
	top: 20rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
data() {
	return {
		show: false
	}
},
methods: {
	//调用此方法显示模态框
	showModal() {
		this.show = true;
	},
	//关闭模态框
	onCancel(e) {
		this.show = false
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

TIP

如果自定义内容中包含输入框类组件，小程序端模态框不显示时可能无法隐藏输入框，需要自行使用 v-if 对输入框进行隐藏。

# Slots

插槽名称 说明
default 模态框自定义内容

# Props

属性名 类型 说明 默认值 平台差异说明
show Boolean 是否显示模态框 false -
title String 标题 - -
size Number, String 标题字体大小，单位rpx 34 -
color String 标题字体颜色 #333 -
descr String 描述内容 - -
descrSize Number, String 描述内容字体大小，单位rpx 28 -
descrColor String 描述内容字体颜色 #7F7F7F -
buttons Array 操作按钮，数据格式见下方说明 [{text: '取消',plain: true}, {text: '确定'}] -
direction String 操作按钮排列方向，可选值：row、column row -
radius Number, String 按钮圆角值，单位rpx 16 -
width Number, String 模态框宽度，单位rpx 640 -
background String 模态框背景色 #FFFFFF -
boxRadius Number, String 模态框圆角值，单位rpx 16 -
padding V1.8.0+ Number, String 模态框上下padding值，单位rpx 32 -
maskBackground String 遮罩背景色 rgba(0,0,0,.6) -
maskClosable Boolean 点击遮罩是否可关闭模态框（设为true时，需结合@cancel事件，通过设置show为false关闭模态框） false -
zIndex Number 模态框z-index值 996 Nvue端不支持，默认越靠后的元素层级越高，即将组件放置最底部
//buttons 数据格式说明

//数据格式一，字符串数组
buttons: ['按钮一', '按钮二']

//数据格式二，以下为约定属性，其他属性可自行增加
buttons: [{
	//按钮文本，必选
	text: '确定',
	//按钮文本颜色，可选
	color: '#fff',
	//按钮背景颜色，可选
	background:'#465CFF',
	//是否为镂空按钮，即背景色为透明，可选
    plain: false
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# Events

事件名 说明 回调参数
@click 点击模态框按钮时触发 {
  index:按钮索引,
  ...this.buttons[index]
}
@cancel 点击遮罩层（maskClosable=true）时触发 -

示例预览

# 示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

# 特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)

Last Updated: 10/17/2023, 6:09:59 PM

← Gallery 画廊 →