TopPopup 顶部弹出层，从顶部弹出的浮层，引导用户进行相关操作。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

基础使用

通过 show 属性控制是否显示顶部弹出层，@close 事件为当 maskClosable 属性值为true时点击遮罩回调事件，通过设置 show 属性为false来关闭顶部弹出层。

<wui-top-popup :show="show" @close="closePopup">
	<view class="wui-custom__wrap">
		这是自定义内容区
	</view>
</wui-top-popup>

/* 自定义内容区样式需自行控制 */
.wui-custom__wrap {
	width: 100%;
	height: 520rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

const show = ref(false)
//调用此方法显示顶部弹出层
const showPopup = (type) => {
    show.value = true
}
const closePopup = (type) => {
    show.value = false
}

内容可滚动

当内容较多需要滚动时，可在组件内部使用 scroll-view 来达到内容滚动效果（注意：组件内部自定义内容样式需要自行控制）。

<wui-top-popup :show="show" @close="closePopup">
<view class="wui-scroll__wrap">
  <view class="wui-title">测试标题二</view>
  <scroll-view scroll-y class="wui-scroll__view">
    <wui-list-cell v-for="(item,index) in itemList" :key="index">item{{index+1}}</wui-list-cell>
  </scroll-view>
  <view class="wui-icon__close" @tap="closePopup">
    <wui-icon name="close" :size="48"></wui-icon>
  </view>
</view>
</wui-top-popup>

.wui-scroll__wrap {
  padding-top: 30rpx;
  padding-bottom: 24rpx;
  position: relative;
}
.wui-title {
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
  padding-bottom: 24rpx;
}
.wui-icon__close {
  position: absolute;
  top: 24rpx;
  left: 24rpx;
}

.wui-scroll__view {
  width: 100%;
  height: 600rpx;
}

const show = ref(false)
const itemList = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14])
//调用此方法显示顶部弹出层
const showPopup = (type) => {
    show.value = true
}
const closePopup = (type) => {
    show.value = false
}

Slots

插槽名称	说明
default	自定义显示内容

Props

属性名	类型	说明	默认值	平台差异说明
show	Boolean	是否显示顶部弹出层	false	-
background	String	顶部弹出层背景颜色	#fff	-
radius	Number, String	顶部弹出层左下/右下圆角值，单位rpx	24	Nvue端若设置圆角被内部元素覆盖，请将内部元素也设置同样圆角值
zIndex	Number, String	顶部弹出层z-index值	1001	Nvue端无效，默认越靠后的元素层级越高
maskClosable	Boolean	点击遮罩 是否可关闭	true	-
maskBackground	String	遮罩背景色	rgba(0,0,0,.6)	-

Events

事件名	说明	回调参数
@close	点击遮罩层（maskClosable=true）时触发	-