对话框

对话框组件。

基础使用

• 通过 show 属性设置显示状态
• 通过默认插槽设置弹窗内容
• 通过 onClose 监听遮罩点击关闭事件
• 通过 onCancel 监听关闭按钮点击事件
• 通过 onConfirm 监听确认按钮点击事件

<template>
	<pure-dialog
		:show="show"
		cancel
		@onClose="show = false"
		@onCancel="show = false"
		@onConfirm="show = false"
	>
		<view class="content">
			<rich-text :nodes="content"></rich-text>
		</view>
	</pure-dialog>
	<pure-button
		text="显示"
		@onClick="show = true"
	></pure-button>
</template>

<script setup>
	import { ref } from "vue";

	// 显示状态
	const show = ref(false);

	// 内容
	const content = ref(`
		<p>君不见，黄河之水天上来，奔流到海不复回。</p>
		<p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
		<p>人生得意须尽欢，莫使金樽空对月。</p>
		<p>天生我材必有用，千金散尽还复来。</p>
		<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
		<p>岑夫子，丹丘生，将进酒，君莫停。</p>
		<p>与君歌一曲，请君为我倾耳听。</p>
		<p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
		<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
		<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
		<p>主人何为言少钱，径须沽取对君酌。</p>
		<p>五花马，千金裘，</p>
		<p>呼儿将出换美酒，与尔同销万古愁。</p>
	`);
</script>

弹窗标题

通过 title 设置弹窗标题。

<template>
	<pure-dialog
		:show="show"
		title="重要提示"
	>
		<view class="content">
			<rich-text :nodes="content"></rich-text>
		</view>
	</pure-dialog>
</template>

关闭按钮

通过 showClose 设置是否显示关闭按钮。

<template>
	<pure-dialog
		:show="show"
		showClose
	>
		<view class="content">
			<rich-text :nodes="content"></rich-text>
		</view>
	</pure-dialog>
</template>

底部内容

• 通过 cancel 属性设置是否显示取消按钮
• 通过 confirm 属性设置是否显示确认按钮
• 通过 #footer 插槽自定义底部内容
• 通过 #cancel 插槽自定义取消按钮
• 通过 #confirm 插槽自定义确认按钮

<template>
	<pure-dialog
		:show="show"
		cancel
		confirm
	>
		<view class="content">
			<rich-text :nodes="content"></rich-text>
		</view>
	</pure-dialog>
</template>

自定义宽高

• 通过 width 属性设置宽度
• 通过 height 属性设置高度
• 通过 maxWidth 属性设置最大宽度
• 通过 maxHeight 属性设置最大高度

<template>
	<pure-dialog
		:show="show"
		width="75%"
		max-width="300px"
		height="70%"
		max-height="500px"
	>
		<view class="content">
			<rich-text :nodes="content"></rich-text>
		</view>
	</pure-dialog>
</template>

分割线

• 通过 headerLine 属性设置是否显示 Header 底部分割线（边框）
• 通过 footerLine 属性设置是否显示 Footer 顶部分割线（边框）
• 通过 buttonLine 属性设置是否显示底部按钮分割线

<template>
	<pure-dialog
		:show="show"
		cancel
		headerLine
		footerLine
		buttonLine
	>
		<view class="content">
			<rich-text :nodes="content"></rich-text>
		</view>
	</pure-dialog>
</template>

遮罩

通过 mask 属性设置是否显示遮罩

提示

隐藏遮罩时只是把遮罩透明度设置为 0 了

<template>
	<pure-dialog
		:show="show"
		:mask="false"
	>
		<view class="content">
			<rich-text :nodes="content"></rich-text>
		</view>
	</pure-dialog>
</template>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
show	Boolean	false	显示状态
mask	Boolean	false	是否显示遮罩
maskClickable	Boolean	true	遮罩是否可点击关闭
title	String		标题
showClose	Boolean	false	显示关闭按钮
closeIconName	String	__close	关闭按钮图标
cancel	Boolean	false	是否显示取消按钮
cancelText	String	取消	取消按钮文本
cancelTheme	String	info	取消按钮主题
cancelOpts	Object	{}	取消按钮配置项 参考
confirm	Boolean	true	是否显示确认按钮
confirmText	String	确认	确认按钮文本
confirmTheme	String	primary	确认按钮主题
confirmOpts	Object	{}	确认按钮配置项 参考
scrollable	Boolean	true	内容是否可滚动
headerLine	Boolean	false	是否显示 Header 下边框
footerLine	Boolean	false	是否显示 Footer 上边框
buttonLine	Boolean	false	是否显示底部按钮分割线
width	String		宽度
height	String		高度
maxWidth	String		最大宽度
maxHeight	String		最大高度

事件

名称	参数	说明
onClose		点击遮罩关闭事件
onCancel		取消按钮点击事件
onConfirm		确认按钮点击事件

插槽

名称	参数	说明
#title		标题
#close		关闭按钮
#content-top		内容上方的内容
#default		默认，内容
#content-bottom		内容下方的内容
#footer		底部
#cancel		取消按钮
#confirm		确认按钮
#absolute		绝对定位的内容

样式变量

名称	说明
--pure-dialog-width	宽
--pure-dialog-height	高
--pure-dialog-max-width	最大宽度
--pure-dialog-max-height	最大高度
--pure-dialog-background	背景
--pure-dialog-border-radius	圆角大小
--pure-dialog-position	定位方式
--pure-dialog-margin	外边距
--pure-dialog-padding	内边距
--pure-dialog-align-self	自己对齐方式
--pure-dialog-transform	变换效果
--pure-dialog-z-index	层级
--pure-dialog-shadow	阴影效果
--pure-dialog-top	定位位置
--pure-dialog-bottom	定位位置
--pure-dialog-left	定位位置
--pure-dialog-right	定位位置
--pure-dialog-animation-timing-function	动画函数
--pure-dialog-animation-duration	动画时长
--pure-dialog-header-height	Header 高度
--pure-dialog-header-align-items	Header 内容对齐方式
--pure-dialog-header-justify-content	Header 内容对齐方式
--pure-dialog-header-margin	Header 外边距
--pure-dialog-header-padding	Header 内边距
--pure-dialog-header-border-radius	Header 圆角大小
--pure-dialog-header-border-bottom	Header 下边框样式
--pure-dialog-header-border-bottom-width	Header 下边框宽度
--pure-dialog-header-border-bottom-style	Header 下边框类型
--pure-dialog-header-border-bottom-color	Header 下边框颜色
--pure-dialog-title-font-size	标题大小
--pure-dialog-title-font-weight	标题粗细
--pure-dialog-title-color	标题颜色
--pure-dialog-title-text-align	标题对齐方式
--pure-dialog-title-line-height	标题高度
--pure-dialog-close-position	关闭按钮定位方式
--pure-dialog-close-color	关闭按钮颜色
--pure-dialog-close-top	关闭按钮定位位置
--pure-dialog-close-bottom	关闭按钮定位位置
--pure-dialog-close-left	关闭按钮定位位置
--pure-dialog-close-right	关闭按钮定位位置
--pure-dialog-close-font-size	关闭按钮字体大小
--pure-dialog-close-z-index	关闭按钮层级
--pure-dialog-close-border-width	关闭按钮边框粗细
--pure-dialog-close-border-style	关闭按钮边框类型
--pure-dialog-close-border-color	关闭按钮边框颜色
--pure-dialog-close-border-radius	关闭按钮圆角大小
--pure-dialog-close-width	关闭按钮宽度
--pure-dialog-close-height	关闭按钮高度
--pure-dialog-close-transform	关闭按钮变换效果
--pure-dialog-close-font-weight	关闭按钮字体粗细
--pure-dialog-close-margin	关闭按钮外边距
--pure-dialog-close-padding	关闭按钮内边距
--pure-dialog-line-size	分割线大小
--pure-dialog-button-line-size	按钮分割线大小
--pure-dialog-line-color	分割线颜色
--pure-dialog-button-line-color	按钮分割线颜色
--pure-dialog-body-padding	主内容外边距
--pure-dialog-body-margin	主内容内边距
--pure-dialog-content-text-align	内容文本对齐方式
--pure-dialog-content-background	内容区域背景
--pure-dialog-content-padding	内容区域内边距
--pure-dialog-footer-height	Footer 高度
--pure-dialog-footer-align-items	Footer 内容对齐方式
--pure-dialog-footer-justify-content	Footer 内容对齐方式
--pure-dialog-footer-text-align	Footer 文本对齐方式
--pure-dialog-footer-background	Footer 背景
--pure-dialog-footer-font-size	Footer 字体大小
--pure-dialog-footer-color	Footer 字体颜色
--pure-dialog-footer-margin	Footer 外边距
--pure-dialog-footer-padding	Footer 内边距
--pure-dialog-footer-gap	Footer 内容之间的间距
--pure-dialog-footer-border-radius	Footer 圆角大小
--pure-dialog-footer-font-weight	Footer 字体粗细
--pure-dialog-footer-border-top	Footer 上边框样式
--pure-dialog-footer-border-top-width	Footer 上边框粗细
--pure-dialog-footer-border-top-style	Footer 上边框类型
--pure-dialog-footer-border-top-color	Footer 上边框颜色
--pure-dialog-footer-button-flex	按钮占比
--pure-dialog-footer-button-height	按钮高度
--pure-dialog-footer-button-cancel-color	取消按钮文本颜色
--pure-dialog-footer-button-cancel-font-size	取消按钮文本尺寸
--pure-dialog-footer-button-cancel-font-weight	取消按钮文本粗细
--pure-dialog-footer-button-cancel-background	取消按钮背景
--pure-dialog-footer-button-confirm-color	确认按钮文本颜色
--pure-dialog-footer-button-confirm-font-size	确认按钮文本尺寸
--pure-dialog-footer-button-confirm-font-weight	确认按钮文本粗细
--pure-dialog-footer-button-confirm-background	确认按钮背景