bottom-popup

bottom-popup 底部弹出层

组件结构

<template>
	<view>
		<view class="tui-popup-class tui-bottom-popup" :class="{'tui-popup-show':show}" :style="{background:bgcolor,height:height?px(height):'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
			},
			//背景颜色
			bgcolor: {
				type: String,
				default: "#fff"
			},
			//高度 upx
			height: {
				type: Number,
				default: 0
			}
		},
		methods: {
			handleClose() {
				if (!this.show) {
					return;
				}
				this.$emit('close', {});
			},
			px(num){
				return uni.upx2px(num) + 'px'
			}
		}
	}
</script>

组件样式

... 此处省略n行

脚本说明

 props: 
	 "mask" : 是否需要mask, 类型:"Boolean",默认值:true	
	 "show" :控制显示, 类型:"Boolean",默认值:false
	 "bgcolor" :背景颜色,类型:"String",默认值:"#fff"
	 "height":高度 upx,类型:"Number",默认值:0(0表示auto)
	 
 methods:
   "handleClose":隐藏关闭bottom-popup
   "px":upx转换为px,现在支持动态绑定rpx,后续会去掉

示例

... 此处省略n行,下载源码查看