uniapp uni-popup弹出层组件 弹窗 无法弹出 自定义样式问题

uni-popup弹出层组件

之前用到弹出层组件时发现弹出时会有一层灰色的遮罩，后来调试了几次发现是因为没有自定义给弹出层宽高，尝试了几次终于做到自己想要的效果，话不多说，直接附上完整代码：
效果图：

<template>
	<view>
		<view class="sign_text" @tap="toggle('center')">
			<text style="line-height: 60px;margin-top: 12px;">点击弹出</text>
		</view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view style="color: green;">
					这是一个弹窗
				</view>
				<view style="color: red;" @click="close()">
					关闭弹窗
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			//弹窗开启
			toggle(type) {
				this.type = type
				this.$refs.popup.open(type)
			},
			//弹窗关闭
			close() {
				this.$refs.popup.close()
			},

		}
	}
</script>

<style>
	.popup-content {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 200px;
		width: 280px;
		background-color: #fff;
		border-radius: 10px;
	}

</style>

下面教一下不会灵活使用的同学这个组件应该怎么用

一、uni-popup弹出层

官网组件地址：https://ext.dcloud.net.cn/pluginid=329

可以先翻看一下官网的介绍，很有用。

二、使用步骤

.首先要去官网把这个组件导入到项目中或者下载到本地，常规放在components文件目录下：

最好是这三个都要一起下载，这样用的时候比较方便，使用的时候按需引入，自定义组件样式就好了

有疑问欢迎留言~