# Dialog 对话框

概述

Dialog 对话框,在浮层中显示,引导用户进行相关操作。

# 支持平台

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

温馨提示

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

# 引入

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

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

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

# 代码演示

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

通过 show 属性控制是否显示对话框,content 属性设置对话框内容,maskClosable 属性设置是否可点击遮罩层关闭对话框(需要结合@close事件使用,通过设置属性 show 为false进行关闭)。

<fui-dialog :show="show" :content="content" maskClosable @click="onClick" @close="onClose"></fui-dialog>
1
data() {
	return {
		content: '弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内',
		show: false
	}
}

1
2
3
4
5
6
7
自定义按钮

通过 show 属性控制是否显示对话框,title 属性设置标题信息,content 属性设置对话框内容,buttons 属性设置对话框按钮内容,@click 事件为对话框按钮点击事件。

<fui-dialog :show="visible" title="我是标题" content="我是自定义的对话框!" :buttons="buttons" @click="onTap"></fui-dialog>
1
data() {
	return {
		visible: false,
		buttons: [{
			text: '确定',
			color: '#FF2B2B'
		}]
	}
}

1
2
3
4
5
6
7
8
9
10

# Slots

插槽名称 说明
default 自定义对话框内容信息,替换 content 内容

# Props

属性名 类型 说明 默认值 平台差异说明
show Boolean 是否显示对话框 false -
title String 对话框标题 温馨提示 -
color String 对话框标题字体颜色 #333 -
content String 对话框内容 - -
contentColor String 对话框内容字体颜色 #7F7F7F -
buttons Array 对话框按钮,属性说明详见下方 [{text: '取消'}, {text: '确定',color: '#465CFF'}] -
background String 对话框背景色 #fff -
radius Number, String 对话框圆角值,单位rpx 24 -
maskBackground String 对话框遮罩背景色 rgba(0,0,0,.6) -
maskClosable Boolean 点击遮罩是否可关闭对话框 true -
//buttons 数据格式及属性说明
//按钮个数不建议超过三个
[{
	//按钮文本
	text: '取消',
	//按钮字体颜色,可选
	color: '#333'
}, {
	//按钮文本
	text: '确定',
	//按钮字体颜色
	color: '#465CFF'
}]
1
2
3
4
5
6
7
8
9
10
11
12
13

# Events

事件名 说明 回调参数
@click 点击对话框按钮时触发 {
  index:按钮索引,
  ...this.buttons[index]
}
@close 点击遮罩层(maskClosable=true)时触发 -

示例预览

# 示例代码地址

FirstUIDialog 对话框
Last Updated: 9/29/2022, 1:07:59 AM