弹出层

介绍

弹出层，页面中的弹层。通常用于筛选，提示等功能。

基础用法

通过show属性控制弹出层的显示与隐藏。

<z-popup :show="show" :custom-style="{padding: '30px 50px'}" @close="hideBasic">
	内容
</z-popup>

data() {
	return {
		show: false
	}
},
methods: {
    hideBasic(){
        this.show = false;
    }
}

弹出位置

通过position属性控制弹出层的位置。可选值top,bottom,left,right。

<z-popup :show="show" position="top" :custom-style="{height: '20%'}" @close="this.show = false" />
<z-popup :show="show" position="bottom" :custom-style="{height: '50%'}" @close="this.show = false" />
<z-popup :show="show" position="left" :custom-style="{width: '20%',height: '100%'}" @close="this.show = false" />
<z-popup :show="show" position="right" :custom-style="{width: '20%',height: '100%'}" @close="this.show = false" />

关闭图标

通过closeable属性控制弹出层是否显示关闭图标。通过close-icon可以设置关闭图标的名称。通过close-icon-size属性设置关闭图标的尺寸。通过close-icon-position属性设置关闭图标的位置。

<z-popup :show="show" closeable position="bottom" :custom-style="{height: '20%'}" @close="this.show = false" />

<!-- 自定义图标 -->
<z-popup :show="show" closeable close-icon-size="50rpx" close-icon="off_outline_close" position="bottom" :custom-style="{height:'20%'}" @close="this.show = false" />

<!-- 图标位置 -->
<z-popup :show="show" closeable close-icon-position="top-left" position="bottom" :custom-style="{height:'20%'}" @close="this.show = false" />

圆角弹窗

通过round属性设置弹出层为圆角。

<z-popup :show="show" round position="bottom" :custom-style="{height:'20%'}" @close="this.show = false" />

Props

Events

Slots