<template>
	<view @click="$emit('click')" :class="['block', className]" :style="[myStyle]"></view>
</template>

<script>
	export default {
		props: {
			width: {
				type: String | Number,
				default: ""
			},
			height: {
				type: String | Number,
				default: ""
			},
			className: {
				type: String,
				default: ""
			},
		},
		computed: {
			myStyle() {
				let width = typeof this.width === "number"?this.width+"rpx":this.width;
				let height = typeof this.height === "number"?this.height+"rpx":this.height;
				return {
					width: width,
					height: height,
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.block {
		$border: 1px;
		box-sizing: border-box;
		width: 100rpx;
		height: 100rpx;
		border: #{$border} solid #e1e1e1;
		position: relative;
		border-radius: 10rpx;

		&::before {
			content: "";
			width: #{$border};
			height: 50%;
			background-color: #e1e1e1;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		&::after {
			content: "";
			width: 50%;
			height: #{$border};
			background-color: #e1e1e1;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>
