WU-UI

中文

English

中文

English

Appearance

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

提示

wu-popup等组件怎么禁止滚动穿透

平台兼容性 ​

App(vue)App(nvue)H5小程序VUE2VUE3
√√√√√√

基本使用 ​

  • 弹出层的内容通过 slot 传入，由用户自定义
  • 通过 ref 调用 open() 和 close() 控制弹出层的打开和关闭
vue
<template>
	<view>
		<wu-popup ref="popup" @change="change">
			<view>
				<text>
                    君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。
                    人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。
                    烹羊宰牛且为乐，会须一饮三百杯。
                    岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我侧耳听。
                    钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。
                    陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。
                    五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
                </text>
			</view>
		</wu-popup>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		methods: {
			open(){
				this.$refs.popup.open('top');
			},
			change(e){
				console.log('弹窗状态改变：',e);
			}
		}
	}
</script>
<template>
	<view>
		<wu-popup ref="popup" @change="change">
			<view>
				<text>
                    君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。
                    人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。
                    烹羊宰牛且为乐，会须一饮三百杯。
                    岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我侧耳听。
                    钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。
                    陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。
                    五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
                </text>
			</view>
		</wu-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 属性，例如上述的基本使用。
vue
<template>
	<view>
		<wu-popup ref="popup" mode="center" @change="change">
			<view style="width: 600rpx;">
				<text>
                    君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。
                    人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。
                    烹羊宰牛且为乐，会须一饮三百杯。
                    岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我侧耳听。
                    钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。
                    陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。
                    五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
                </text>
			</view>
		</wu-popup>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		methods: {
			open(){
				this.$refs.popup.open();
			},
			change(e){
				console.log('弹窗状态改变：',e);
			}
		}
	}
</script>
<template>
	<view>
		<wu-popup ref="popup" mode="center" @change="change">
			<view style="width: 600rpx;">
				<text>
                    君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。
                    人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。
                    烹羊宰牛且为乐，会须一饮三百杯。
                    岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我侧耳听。
                    钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。
                    陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。
                    五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
                </text>
			</view>
		</wu-popup>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		methods: {
			open(){
				this.$refs.popup.open();
			},
			change(e){
				console.log('弹窗状态改变：',e);
			}
		}
	}
</script>

禁用点击遮罩关闭 ​

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

vue
<template>
	<view>
		<wu-popup ref="popup" :close-on-click-overlay="false">
			<view style="width: 600rpx;">
				<text>
                    君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。
                    人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。
                    烹羊宰牛且为乐，会须一饮三百杯。
                    岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我侧耳听。
                    钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。
                    陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。
                    五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
                </text>
				<button @click="close">关闭</button>
			</view>
		</wu-popup>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		methods: {
			open(){
				this.$refs.popup.open();
			},
			close(){
				this.$refs.popup.close();
			}
		}
	}
</script>
<template>
	<view>
		<wu-popup ref="popup" :close-on-click-overlay="false">
			<view style="width: 600rpx;">
				<text>
                    君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。
                    人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。
                    烹羊宰牛且为乐，会须一饮三百杯。
                    岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我侧耳听。
                    钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。
                    陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。
                    五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
                </text>
				<button @click="close">关闭</button>
			</view>
		</wu-popup>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		methods: {
			open(){
				this.$refs.popup.open();
			},
			close(){
				this.$refs.popup.close();
			}
		}
	}
</script>

API ​

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