Popup

This component is used to display pop-up windows, information prompts and other content, and supports top, bottom, left, right and middle pop-ups. Only components provide containers, and the internal content is customized by the user, with super scalability and silky animation.

提示

How to disable scroll penetration in components such as wu-popup

Platform compatibility

App(vue)	App(nvue)	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

Basic usage

The content of the pop-up layer is passed in through slot and is customized by the user
Control the opening and closing of the popup layer by calling open() and close() through ref

vue

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

Set the direction of the pop-up layer

Through the mode attribute setting, it can be set to left, top, right, bottom, center, the default is center
You can also pass a parameter through the open() method to replace the mode attribute, such as the basic usage above.

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>

Disable click mask off

By default, clicking on the mask will automatically close the pop-up window. If you do not want to click to close, you only need to set closeOnClickOverlay to false. At this time, to close wu-popup, you can only manually call the close() method .

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

Property name	Description	Type	Default value	Optional value
mode	Popup mode: `top` - top popup, `bottom` - bottom popup, `left` - left popup, `right` - right popup, `center` - middle popup	String	center	top / bottom /left/right/center
duration	animation duration, unit ms	String / Number	300	-
overlay	whether to display the mask	Boolean	true	true / false
overlayStyle	Mask layer style: generally used to modify the mask color, such as: `{background: 'rgba(3, 100, 219, 0.5)'}`	Object / String	-	-
overlayOpacity	Mask transparency, between `0-1`, do not share with `overlayStyle`	Number / String	0.5	-
closeOnClickOverlay	Whether to close the pop-up window when clicking on the mask	Boolean	true	true / false
zIndex	z-index value of the pop-up layer	Number	String	10075
safeAreaInsetTop	Whether to leave the top safe area (status bar height)	Boolean	false	true / false
safeAreaInsetBottom	Whether to leave the bottom safe area for adaptation	Boolean	true	true / false
closeable	Whether to display the close icon	Boolean	false	true / false
closeIconPos	Customize the close icon position, `top-left` - upper left corner, `top-right` - upper right corner, `bottom-left` - lower left corner, `bottom-right` - lower right corner	String	top-right	top-right / top-left / bottom-left / bottom-right
zoom	Whether to enable zoom when mode=center	Boolean	true	true / false
bgColor	Background color, set to "" or none to remove the default white background	String	none	-
round	Set the rounded corner value, only valid for `mode = top`	bottom	center	Number / String 0
customStyle	Define the external style needed for the content area	Object	-	-

Method name	Description	Parameters
open	Open the pop-up layer	open(type: String), if there are parameters, the mode attribute will be replaced
close	Close the popup layer	-

Event name	Description	Callback parameters
change	Triggered when the pop-up layer status changes	e = {show: true \| false, type: current mode}
maskClick	Click on the mask layer to trigger	-

Slot Name	Description
default	custom content

Popup ​

Platform compatibility ​

Basic usage ​

Set the direction of the pop-up layer ​

Disable click mask off ​

API ​

Popup Props ​

Popup Methods ​

Popup Events ​

Popup Slots ​

Platform compatibility

Basic usage

Set the direction of the pop-up layer

Disable click mask off

API

Popup Props

Popup Methods

Popup Events

Popup Slots