uv-ui

✈

组件名：uv-popup

点击下载&安装 (opens new window)

该组件用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义，强扩展性。

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

提示

  1. uv-popup等组件怎么禁止滚动穿透 (opens new window)

  2. 弹出闪一下或不丝滑的优化方案

# 基本使用

  • 弹出层的内容通过slot传入，由用户自定义
  • 通过ref调用open()和close()控制弹出层的打开和关闭
<template>
	<view>
		<uv-popup ref="popup" @change="change">
			<view>
				<text>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。 明月几时有？把酒问青天。
				不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
				转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。
				但愿人长久，千里共婵娟。</text>
			</view>
		</uv-popup>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		methods: {
			open(){
				this.$refs.popup.open('top');
			},
			change(e){
				console.log('弹窗状态改变：',e);
			}
		}
	}
</script>

# 设置弹出层的方向

  • 通过 mode 属性设置，可以设置为left、top、right、bottom、center，默认center
  • 也可以通过 open() 方法传一个参数可代替 mode 属性，例如上述的基本使用。
<template>
	<view>
		<uv-popup ref="popup" mode="center" @change="change">
			<view style="width: 600rpx;">
				<text>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。 明月几时有？把酒问青天。
				不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
				转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。
				但愿人长久，千里共婵娟。</text>
			</view>
		</uv-popup>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		methods: {
			open(){
				this.$refs.popup.open();
			},
			change(e){
				console.log('弹窗状态改变：',e);
			}
		}
	}
</script>

# 禁用点击遮罩关闭

默认情况下，点击遮罩会自动关闭弹窗，如不想点击关闭，只需将closeOnClickOverlay设置为false，这时候要关闭uv-popup，只能手动调用 close() 方法。

<template>
	<view>
		<uv-popup ref="popup" :close-on-click-overlay="false">
			<view style="width: 600rpx;">
				<text>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。 明月几时有？把酒问青天。
				不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
				转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。
				但愿人长久，千里共婵娟。</text>
				<button @click="close">关闭</button>
			</view>
		</uv-popup>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		methods: {
			open(){
				this.$refs.popup.open();
			},
			close(){
				this.$refs.popup.close();
			}
		}
	}
</script>

# 优化方案

有时候弹窗内容较多时，或者内容比较复杂时，在弹出的时候，可能会闪一下，感觉不丝滑。其实这是渲染的问题，只能在内容区去解决：

解决思路：设置 custom-style 属性设置一个高度，根据自己的实际情况设置具体高度，或者设置一个 min-height。这样解决就可以得到很好的优化。

注意：如果只设置 max-height 不会有效果。

<template>
	<view>
		<uv-popup ref="popup" mode="bottom" custom-style="height: 200rpx;">
			<view class="content">
				<view>里面是很比较多或复杂的内容...</view>
				<view>里面是很比较多或复杂的内容...</view>
				<view>里面是很比较多或复杂的内容...</view>
				<view>里面是很比较多或复杂的内容...</view>
				<view>里面是很比较多或复杂的内容...</view>
			</view>
		</uv-popup>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		methods: {
			open(){
				this.$refs.popup.open();
			}
		}
	}
</script>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

参数 说明 类型 默认值 可选值
mode 弹出方向：top- 顶部弹出 bottom- 底部弹出 left- 左侧弹出 right- 右侧弹出 center- 中间弹出 String center top | bottom | left | right | center
duration 动画时长，单位ms String | Number 300 -
overlay 是否显示遮罩 Boolean true true | false
overlayStyle 遮罩自定义样式，一般用于修改遮罩颜色，如：{background: 'rgba(3, 100, 219, 0.5)'} Object | String - -
overlayOpacity 遮罩透明度，0-1之间，勿与overlayStyle共用 Number | String 0.5 -
closeOnClickOverlay 点击遮罩是否关闭弹窗 Boolean true true | false
zIndex 弹出层的z-index值 Number | String 10075 -
safeAreaInsetTop 是否留出顶部安全区（状态栏高度） Boolean false true | false
safeAreaInsetBottom 是否为留出底部安全区适配 Boolean true true | false
closeable 是否显示关闭图标 Boolean false true | false
closeIconPos 自定义关闭图标位置，top-left-左上角，top-right-右上角，bottom-left-左下角，bottom-right-右下角 String top-right top-right | top-left | bottom-left | bottom-right
zoom 当mode=center时 是否开启缩放 Boolean true true | false
bgColor 背景色，设置为""或none可去除默认的白色背景 String none -
round 设置圆角值，仅对mode = top | bottom | center有效 Number | String 0 -
customStyle 定义内容区需要用到的外部样式 Object - -
方法名 说明 参数
open 打开弹出层 open(String:type) ，如果参数可代替 type 属性
close 关闭弹出层 -
事件名 说明 回调参数
@change 打开关闭弹窗触发 e={show: true | false}
@maskClick 点击遮罩触发 -
名称 说明
default 弹窗内容

← Modal 模态框 →