弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由开发者自行定义

# 基本使用

通过 <n-popup> 形式调用,设置 show 参数控制是否显示,开启或关闭将触发 @change 事件,返回当前 show 的状态。

<template>
	<view>
		<n-popup :show="show" @change="onChange">
			<!-- 内部内容由开发者自行定义 -->
			<view class="popup">
				<!-- 关闭弹出层 -->
				<n-button text="关闭" width="200" @click="close"></n-button>
			</view>
		</n-popup>
		<!-- 打开弹出层 -->
		<n-button text="打开" @click="open"></n-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true
			}
		},
		methods: {
			onChange(e) {
				this.show = e.detail
			},
			//打开
			open() {
				this.show = true;
			},
			//关闭
			close() {
				this.show = false;
			}
		}
	}
</script>

<style scoped>
	.popup {
		height: 400rpx;
	}
</style>

# 设置弹出层方向

可以通过 direction 参数设置,可以设置为leftrighttopbottomcenter,默认为center

注意

  • 在设置弹出层方向为 leftright 时,内部内容由开发者需要定义容器宽度
  • 在设置弹出层方向为 topbottom 时,内部内容由开发者需要定义容器高度
  • 在设置弹出层方向为 center,内部内容由开发者需要定义容器宽度/高度/背景色,在 center 方向下默认背景色是透明底的
<template>
	<view>
		<n-popup :show="show" @change="onChange" direction="left">
			<!-- 内部内容由开发者自行定义 -->
			<view class="popup">
				<n-button text="关闭" width="200" @click="close"></n-button>
			</view>
		</n-popup>
		<n-button text="打开" @click="open"></n-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true
			}
		},
		methods: {
			onChange(e) {
				this.show = e.detail
			},
			//打开
			open() {
				this.show = true;
			},
			//关闭
			close() {
				this.show = false;
			}
		}
	}
</script>

<style scoped>
	.popup {
		width: 400rpx;
	}
</style>

# 遮罩层开启/关闭

通过 mask-close 参数控制击遮罩层是否可关闭

<n-popup :mask-close="false"></n-popup>

# API

# Attribute 参数

参数 说明 类型 可选值 默认值
show 控制显示或者隐藏 Boolean true false
direction 弹出层方向 String left、right、top、bottom、center bottom
mask-close 点击遮罩层是否可关闭 Boolean false true

# Event 事件

事件名 说明 返回值
@change 当打开或者关闭时返回遮罩层状态 {detail: 遮罩层状态}