<template>
	<view class="u-gap" :style="[gapStyle]">

	</view>
</template>

<script>
	/**
	 * alertTips 提示
	 * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
	 * @tutorial https://www.uviewui.com/components/gap.html
	 * @property {String} bg-color 背景颜色（默认#f3f4f6）
	 * @property {String Number} height 分割槽高度，单位rpx（默认30）
	 * @example <u-gap height="80" bg-color="#bbb"></u-gap>
	 */
	export default {
		name: "u-gap",
		props: {
			bgColor: {
				type: String,
				default: '#f3f4f6' // 也即：rgb(243, 244, 246)
			},
			// 高度
			height: {
				type: [String, Number],
				default: 30
			}
		},
		computed: {
			gapStyle() {
				return {
					backgroundColor: this.bgColor,
					height: this.height + 'rpx'
				}
			}
		}
	}
</script>

<style>
</style>
