弹出窗

弹出窗组件。

基础使用

通过 show 属性设置显示状态
通过默认插槽设置弹窗内容
通过 showNot 配置是否显示头部取消按钮
通过 showOk 配置是否显示头部确认按钮
通过 showCancel 配置是否显示底部取消按钮
通过 showConfirm 配置是否显示底部确认按钮
通过 onClose 监听遮罩点击关闭事件
通过 onNot 监听头部左侧取消按钮点击事件
通过 onOk 监听头部右侧确认按钮点击事件
通过 onCancel 监听底部关闭按钮点击事件
通过 onConfirm 监听底部确认按钮点击事件

提示

该组件设计了头部取消按钮、头部确认按钮、底部取消按钮、底部确认按钮公 4 个按钮。

vue

<template>
	<pure-popup
		:show="show"
		showNot
		showOk
		showCancel
		showConfirm
		@onNot="show = false"
		@onOk="show = false"
		@onCancel="show = false"
		@onConfirm="show = false"
	>
		<view class="content">
			<rich-text :nodes="content"></rich-text>
		</view>
	</pure-popup>
	<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 设置弹窗标题。

vue

<template>
	<pure-popup
		:show="show"
		title="标题"
	>
		<view class="content">
			<rich-text :nodes="content"></rich-text>
		</view>
	</pure-popup>
</template>

关闭按钮

通过 showClose 设置是否显示关闭按钮。
通过 closePosition 设置关闭按钮位置。
- bottom - 显示在底部
- left - 显示在顶部左侧
- right - 显示在顶部右侧
通过 onClose 监听关闭按钮点击事件。

vue

<template>
	<pure-popup
		:show="show"
		showClose
		closePosition="right"
		@onClose="show = false"
	>
		<view class="content">
			<rich-text :nodes="content"></rich-text>
		</view>
	</pure-popup>
</template>

弹出方向

通过 direction 属性设置弹出方向
- top - 顶部弹出
- bottom - 底部弹出
- left - 左侧弹出
- right - 右侧弹出
- center - 中间弹出

vue

<template>
	<pure-popup
		:show="show"
		direction="bottom"
	>
		<view class="content">
			<rich-text :nodes="content"></rich-text>
		</view>
	</pure-popup>
</template>

自定义宽高

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

vue

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

分割线

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

vue

<template>
	<pure-popup
		:show="show"
		title="标题"
		showCancel
		showConfirm
		headerLine
		footerLine
	>
		<view class="content">
			<rich-text :nodes="content"></rich-text>
		</view>
	</pure-popup>
</template>

遮罩

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

提示

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

vue

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

属性

名称	类型	默认值	说明
`hoverClass`	`String`	`pure-hover`	按下去的样式类
`show`	`Boolean`	`false`	显示状态
`mask`	`Boolean`	`false`	是否显示遮罩
`maskClickable`	`Boolean`	`true`	遮罩是否可点击关闭
`direction`	`String`	`center`	弹出方向
`title`	`String`		标题
`showClose`	`Boolean`	`false`	显示关闭按钮
`closeIconName`	`String`	`__close`	关闭按钮图标
`closeIconOpts`	`Object`	`{}`	关闭按钮配置项参考
`closePosition`	`String`	`bottom`	关闭按钮位置
`showNot`	`Boolean`	`false`	是否显示顶部取消按钮
`notlText`	`String`	`关闭`	顶部取消按钮文本
`notTheme`	`String`	`info`	顶部取消按钮主题
`notOpts`	`Object`	`{}`	顶部取消按钮配置项参考
`showOk`	`Boolean`	`false`	是否显示顶部确认按钮
`okText`	`String`	`确定`	顶部确认按钮文本
`okTheme`	`String`	`primary`	顶部确认按钮主题
`okOpts`	`Object`	`{}`	顶部确认按钮配置项参考
`showCancel`	`Boolean`	`false`	是否显示底部取消按钮
`cancelText`	`String`	`取消`	底部取消按钮文本
`cancelTheme`	`String`	`info`	底部取消按钮主题
`cancelOpts`	`Object`	`{}`	底部取消按钮配置项参考
`showConfirm`	`Boolean`	`false`	是否底部显示确认按钮
`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`		点击遮罩关闭事件
`onNot`		顶部取消按钮点击事件
`onOk`		顶部确认按钮点击事件
`onCancel`		底部取消按钮点击事件
`onConfirm`		底部确认按钮点击事件

插槽

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

样式变量

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

弹出窗 ​

基础使用 ​

弹窗标题 ​

关闭按钮 ​

弹出方向 ​

自定义宽高 ​

分割线 ​

遮罩 ​

属性 ​

事件 ​

插槽 ​

样式变量 ​

弹出窗

基础使用

弹窗标题

关闭按钮

弹出方向

自定义宽高

分割线

遮罩

属性

事件

插槽

样式变量