# bottom-popup

bottom-popup 底部弹出层

# 组件结构

<template>
	<view @touchmove.stop.prevent>
		<view class="tui-popup-class tui-bottom-popup" :class="{'tui-hidden':!show,'tui-popup-show':show,'tui-popup-radius':radius}" :style="{backgroundColor:backgroundColor,height:height?height+'rpx':'auto'}">
			<slot></slot>
		</view>
		<view class="tui-popup-mask" :class="[show?'tui-mask-show':'']" v-if="mask" @tap="handleClose"></view>
	</view>
</template>

# 组件脚本

<script>
	export default {
		name: "tuiBottomPopup",
		props: {
			//是否需要mask
			mask: {
				type: Boolean,
				default: true
			},
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			//背景颜色
			backgroundColor: {
				type: String,
				default: "#fff"
			},
			//高度 rpx
			height: {
				type: Number,
				default: 0
			},
			//设置圆角
			radius:{
				type:Boolean,
				default:true
			}
		},
		methods: {
			handleClose() {
				if (!this.show) {
					return;
				}
				this.$emit('close', {});
			}
		}
	}
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# props

参数 类型 描述 默认值
mask Boolean 是否需要mask true
show Boolean 控制显示 false
backgroundColor String 背景颜色 #fff
height Number 高度 单位rpx 0 表示auto
radius Boolean 设置圆角 true
zIndex [Number, String] popup z-index 997
maskZIndex [Number, String] mask z-index 996
translateY String 弹层显示时,垂直方向移动的距离 0

# methods

名称 描述
@close 关闭弹层

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/popup/popup

# H5二维码

# 小程序二维码